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:打包後的可執行文件