Vue腳手架——vue-cli的安裝和使用

vue-cli是一個腳手架工具,包含了諸多前端技術:

webpack

babel

eslint

http-proxy-middleware

typescript

css pre-prosessor

css module

這些工具,他們大部分依賴兩個東西

node環境:很多工具的運行環境

npm:包管理器,用於下載各種第三方庫

目前,npm已經和node集成,當安裝node後會自動安裝npm

安裝node:

https://nodejs.org/zh-cn/

下載長期支持版

驗證安裝:

打開終端,node -v。npm -v會顯示版本信息

配置原地址:

默認情況下,npm安裝包會從國外網站下載,速度非常慢,容易下載失敗,因此要使用命令更改npm原地址爲淘寶源

npm config set registry http://registry.npm.taobao.org/

更改好之後,查看原地址是否正確的被更改

npm config get registry

安裝vue-cli

使用下面的命令安裝vue-cli工具

npm install -g @vue/cli

安裝好之後,檢查vue-cli是否安裝成功

vue --version

搭建工程

進入到目標路徑的終端下

vue create 工程名

注意:工程名由字母、數字、下劃線構成

如何使用腳手架開發?

1.cd到工程名目錄下

2.npm run serve -> 建立一個自己的IP Server,在瀏覽器中進入Server不斷開發

3.開發完成,npm run build -> 打包src的開發代碼變爲可運行代碼,在dist文件夾中

理解工程結構

在這裏插入圖片描述

src:所有開發代碼都在裏面,包括組件,css,js,vue文件

public:開發的圖片,html文件

dist:打包後的可執行文件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章