地址
安裝
命名方式已經(jīng)改為npm推薦的作用域規(guī)則腿时，詳情查看此文章
npm i @vue/cli -g
yarn add @vue/cli global
# 查看版本
vue -V
創(chuàng)建一個(gè)項(xiàng)目
vue create clidemoe # 2.0中 vue init webpack clidemoe
第一次創(chuàng)建只會(huì)有兩個(gè)選項(xiàng)（default和Manually select features）狸捕，1和2是我之前創(chuàng)建保存的慧脱。
這里我們主要看Manually select features：
接著是選擇路由是否使用history模式：
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
創(chuàng)建方式2：
使用圖形化vue ui創(chuàng)建項(xiàng)目：
- 選擇包管理器
- 選擇配置奠宜，可以選擇默認(rèn)包颁，也可以自己手動(dòng)配置（一般手動(dòng)配置）瞻想，還可以選擇之前配置過(guò)的（前提是有保存）
-
選擇功能（插件）
-
選擇配置
- 如果勾選了保存預(yù)設(shè)，會(huì)有彈框讓你輸入這次保存的預(yù)設(shè)名
創(chuàng)建好了娩嚼，看看頁(yè)面
插件
依賴
默認(rèn)啟動(dòng)服務(wù)方式：
npm run serve # 2.0中 npm run dev
npx vue-cli-service serve
對(duì)比：
CLi2啟動(dòng)方式是webpack-dev-server --inline --progress --config build/webpack.dev.conf.js蘑险，使用的是webpack-dev-server搭的服務(wù)
CLi3啟動(dòng)方式是vue-cli-service serve
vue-cli-service serve就是CLi服務(wù)，文件位于node_modules@vue\cli-service\bin
目錄結(jié)構(gòu)
![]()
cli2
相較于2.0岳悟，3.0的目錄結(jié)構(gòu)簡(jiǎn)單了許多佃迄，少了build、config兩個(gè)目錄贵少，安裝時(shí)自動(dòng)下載了node_modules呵俏，3.0的webpack配置可以在根目錄新建一個(gè)vue.config.js文件。
Vue CLi3.0刪除了config和build文件夾春瞬，現(xiàn)在配置webpack只需要在項(xiàng)目的根目錄下新建vue.config.js文件
#vue.config.js 完整默認(rèn)配置
module.exports = {
// 基本路徑
baseUrl: '/',
// 輸出文件目錄
outputDir: 'dist',
// 用于嵌套生成的靜態(tài)資產(chǎn)（js柴信，css，img宽气，fonts）的目錄随常。
assetsDir: '',
// 以多頁(yè)模式構(gòu)建應(yīng)用程序。
pages: undefined,
// eslint-loader 是否在保存的時(shí)候檢查
lintOnSave: true,
// 是否使用包含運(yùn)行時(shí)編譯器的Vue核心的構(gòu)建萄涯。
runtimeCompiler: false,
// 默認(rèn)情況下babel-loader忽略其中的所有文件node_modules绪氛。
transpileDependencies: [],
// 生產(chǎn)環(huán)境sourceMap
productionSourceMap: true,
// webpack配置
configureWebpack: () => {},
chainWebpack: () => {},
// css相關(guān)配置
css: {
// 啟用 CSS modules
modules: false,
// 是否使用css分離插件
extract: true,
// 開(kāi)啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項(xiàng)
loaderOptions: {},
},
// webpack-dev-server 相關(guān)配置
devServer: {
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 設(shè)置代理
before: app => {}
},
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// PWA 插件相關(guān)配置
pwa: {},
// 第三方插件配置
pluginOptions: {
// ...
}
}
瀏覽器兼容性
在package.json文件里多了一個(gè)browserslist字段，這個(gè)字段指定了項(xiàng)目兼容到哪些瀏覽器涝影。
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
這個(gè)字段會(huì)被babel用來(lái)確定轉(zhuǎn)義的js特性和需要添加的css前綴枣察。
參考資料：http://www.reibang.com/p/bd9cb7861b85
插件
vue add eslint
vue add @vue/cli-plugin-eslint
安裝后會(huì)在src目錄下生成一個(gè)plugins目錄，里面會(huì)生成插件的配置文件燃逻。
vue add 的設(shè)計(jì)意圖是為了安裝和調(diào)用 Vue CLI 插件序目。這不意味著替換掉普通的 npm 包。對(duì)于這些普通的 npm 包伯襟，你仍然需要選用包管理器猿涨。
我們推薦在運(yùn)行 vue add 之前將項(xiàng)目的最新?tīng)顟B(tài)提交，因?yàn)樵撁羁赡苷{(diào)用插件的文件生成器并很有可能更改你現(xiàn)有的文件姆怪。
HTML和靜態(tài)資源
CSS相關(guān)
Vue CLI 項(xiàng)目默認(rèn)支持PostCss叛赚、CSS Modules 和 包含 Sass、Less稽揭、stylus在內(nèi)的預(yù)處理器（包還是要安裝的俺附，只是不用配置了）。
預(yù)處理器：
在創(chuàng)建項(xiàng)目的時(shí)候選擇預(yù)處理器（sass/less/stylus）溪掀。如果當(dāng)時(shí)沒(méi)有選好事镣，內(nèi)置的webpack任然會(huì)被預(yù)配置為可以完成所有的處理，你也可以手動(dòng)安裝相應(yīng)的webpack loader：
npm i sass-loader node-sass -D
npm i less-loader less -D
npm i stylus-loader stylus -D
PostCSS：
Vue CLi默認(rèn)開(kāi)啟了autoprefixer（自動(dòng)添加前綴）揪胃，如果要配置目標(biāo)瀏覽器蛮浑，可使用package.json的browserslist字段唠叛，所以開(kāi)發(fā)時(shí)只需使用無(wú)前綴的css規(guī)則即可只嚣。
環(huán)境變量和模式
VueCLI移除了配置文件目錄后沮稚，如何自定義配置環(huán)境變量和模式？
環(huán)境變量：
一般項(xiàng)目中册舞，我們針對(duì)不同的開(kāi)發(fā)環(huán)境蕴掏，會(huì)配置不同的環(huán)境變量，下面這些文件會(huì)在不同的環(huán)境下被載入：
- .env #在所有環(huán)境中載入
- .env.development #在開(kāi)發(fā)環(huán)境中被載入
- .env.production #在生產(chǎn)環(huán)境中被載入
- .env.local #在所有環(huán)境中載入调鲸，會(huì)被git忽略
- .env.development.local #在開(kāi)發(fā)環(huán)境中載入盛杰，但會(huì)被git忽略
- .env.development.local #在生產(chǎn)環(huán)境中載入，但會(huì)被git忽略
- 在根目錄下新建兩個(gè)文件.env.development藐石，.env.production即供。用這兩個(gè)文件存放環(huán)境變量。
// env.development
NODE_ENV=development
VUE_APP_URL=http://123.com
// env.production
NODE_ENV=production
VUE_APP_URL=http://456.com
變量必須以VUE_APP_開(kāi)頭
被載入的變量將會(huì)被vue-cli-service的所有命令于微、插件逗嫡、依賴可用。
tips：
為一個(gè)特定模式準(zhǔn)備的環(huán)境文件將會(huì)比一般的環(huán)境文件擁有更高的優(yōu)先級(jí)株依。（列如.env.development的優(yōu)先級(jí)比.env高）驱证。
模式：
默認(rèn)情況寫，一個(gè)Vue CLi項(xiàng)目有三個(gè)模式：
- development 模式用于 vue-cli-service serve
- production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
- test 模式用于 vue-cli-service test:unit
每個(gè)模式都會(huì)將NODE_ENV的值設(shè)置為模式的名稱——比如在development模式下NODE_ENV的值會(huì)被設(shè)置為development恋腕。
可以在package.json中抹锄，通過(guò)傳遞 --mode 選項(xiàng)參數(shù)為命令行指定模式。
dev-build："vue-cli-service build --mode development" #指定模式
案例
//vue.config.js
module.exports = {
baseUrl: process.env.NODE_ENV !== 'production' ? '/' : '/bl/',
// 這里在webpack配置時(shí)判斷不同環(huán)境下使用不同配置
configureWebpack: config => {
if (process.env.NODE_ENV === "development") {
config.devtool = "source-map";
} else if (process.env.NODE_ENV === "production") {
config.devtool = "eval-source-map";
}
}
}
如果安裝完vue-cli3后荠藤，還想用vue-cli2怎么辦伙单？這個(gè)時(shí)候就需要安裝一個(gè)橋接工具了
npm install -g @vue/cli-init
//安裝完后 就還可以使用 vue init 命令
vue init webpack my-demo
