概述:
vue-cli作用有哪些:
1.快速生成本地目錄結(jié)構(gòu)
2.本地開(kāi)發(fā)調(diào)試
3.代碼部署
4.熱加載，方便測(cè)試
5.單元測(cè)試
安裝
1.安裝node環(huán)境
- 官網(wǎng)下載可執(zhí)行文件，按照一般軟件安裝*
node-v //查看版本信息
2.安裝npm 環(huán)境(一般會(huì)隨著node安裝，自帶)
*npm : node包管理器(Node Package Manager) *
npm install npm -g //安裝
npm -v //查看版本信息
作用：
允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用。
允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用。
允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用
3.安裝vue-cli 環(huán)境
安裝
vue-cli 2版本安裝方式
npm install -g vue-cli查看版本信息
vue --version
vue -V查看常用功能
vue查看模板類型
vue list
模板名稱(官方5種模板)：
- webpack-一個(gè)全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測(cè)和CSS擴(kuò)展。
- webpack-simple-一個(gè)簡(jiǎn)單webpack+vue-loader的模板，不包含其他功能，讓你快速的搭建vue的開(kāi)發(fā)環(huán)境。
- browserify-一個(gè)全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測(cè)。
- browserify-simple-一個(gè)簡(jiǎn)單Browserify+vueify的模板，不包含其他功能，讓你快速的搭建vue的開(kāi)發(fā)環(huán)境。
- simple-一個(gè)最簡(jiǎn)單的單頁(yè)應(yīng)用模板。
4.在目標(biāo)文件夾，初始化項(xiàng)目
語(yǔ)法:
例：初始化項(xiàng)目 使用webpack模板 創(chuàng)建項(xiàng)目文件夾
vue init webpack <項(xiàng)目文件夾名稱>
如果版本為3.0以上，需要使用2.0命令的話，會(huì)報(bào)錯(cuò)
Command vue init requires a global addon be installed.
需要 全局安裝一個(gè)橋接工具
npm install -g @vue/cli-init and try again
詳細(xì)格式：
vue init <模板名稱> <項(xiàng)目名稱>
初始化后，配置信息
- Project name :
項(xiàng)目名稱 ，不能使用占用字，如：webpack - Project description:
項(xiàng)目描述，默認(rèn)為A Vue.js project,直接回車，不用編寫。 - Author：
作者，如果你有配置git的作者，他會(huì)讀取 - 構(gòu)建模式：
Runtime+Compiler - Install vue-router?
是否安裝vue的路由插件 - Use ESLint to lint your code?
是否用ESLint來(lái)限制你的代碼錯(cuò)誤和風(fēng)格 - setup unit tests with ?
是否需要安裝單元測(cè)試工具。 - Setup e2e tests with Nightwatch?
是否安裝e2e來(lái)進(jìn)行用戶行為模擬測(cè)試。 - 安裝模塊方式
手動(dòng)安裝
完成后會(huì)提示(to get started:)
cd 項(xiàng)目名稱
npm run dev
通過(guò)命令行中輸入，完成跳轉(zhuǎn)文件，開(kāi)啟服務(wù)器 (ctrl+C退出服務(wù)器)
vue-cli 2與 vue-cli3的區(qū)別
說(shuō)明：
vue-cli 2 與 vue-cli 3 是vue2.x的不同版本的腳手架工具
vue-cli 3是 vue-cli 2的升級(jí)版本
Vue-cli3 目錄結(jié)構(gòu)與配置方式、運(yùn)行，不同于vue-cli2
安裝：
npm install @vue/cli -g
如果全局安裝了vue-cli2則需要先卸載，再安裝vue-cli3
npm uninstall vue-cli -g
npm install @vue/cli -g
通過(guò) vue -V 查看是否安裝3.0版本成功
創(chuàng)建項(xiàng)目：
vue create project-name
按提示選擇基本配置
根據(jù)提示信息配置：
選擇預(yù)制
1.默認(rèn) (Babel+ESLint) 的設(shè)置
2.手動(dòng)選擇功能 ( Manually select features )
手動(dòng)選擇功能列表：
（通過(guò)上下鍵切換，空格確認(rèn)/取消）
- Babel : 將ES6編譯成ES5
- TypeScript: javascript類型的超集
- Progressive Web App (PWA) Support: 支持漸進(jìn)式的網(wǎng)頁(yè)應(yīng)用程序
- Router:vue-router
- Vuex: 狀態(tài)管理
- CSS Pre-processors: CSS預(yù)處理
- Linter / Formatter: 開(kāi)發(fā)規(guī)范
- Unit Testing: 單元測(cè)試
- E2E Testing: 端到端測(cè)試
啟動(dòng)項(xiàng)目
npm run serve
手動(dòng)創(chuàng)建 vue.config.js
區(qū)別于cli2環(huán)境變量通過(guò)（NODE_ENV）區(qū)分開(kāi)發(fā)、測(cè)試、生產(chǎn)
cli3環(huán)境變量都在獨(dú)立文件中（.env.test 、.env.development、.env.production）
在 package.json 的 scripts 命令中添加對(duì)應(yīng)的 mode
'serve':'vue-cli-service serve --mode development',
'build':'vue-cli-service build --mode production',
'lint':'vue-cli-service lint --mode test'
