前言
vue-cli 都到 3.0.3 了粱哼，所以是時(shí)候玩轉(zhuǎn)一下 vue-cli 3 的新特性了撒遣。
1. vue-cli 3.0.3
以下的安裝都是在 macOS 的環(huán)境下進(jìn)行的，當(dāng)然在 windows 和 linus 下也同理叉瘩。
1.1 安裝
vue cli 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它履腋。
可以使用下列任一命令安裝這個(gè)新 vue-cli 3.0.3 的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
你還可以用這個(gè)命令來檢查其版本是否正確 (3.x)：
vue --version
或者：
vue -V
1.2 使用圖形化界面
你也可以通過 vue ui 命令以圖形化界面創(chuàng)建和管理項(xiàng)目：
vue ui
上述命令會(huì)打開一個(gè)瀏覽器窗口，并以圖形化界面將你引導(dǎo)至項(xiàng)目創(chuàng)建的流程惭嚣。
1.3 創(chuàng)建項(xiàng)目
1.3.1 默認(rèn)型
- 新建文件夾遵湖，在該文件夾下打開命令窗口，輸入以下命令進(jìn)行新建項(xiàng)目晚吞，當(dāng)然我起的項(xiàng)目名字叫 vue-webpack-demo
vue create vue-webpack-demo
- 會(huì)讓你選擇默認(rèn)（default）還是手動(dòng)（Manually）延旧，（注：現(xiàn)在vue-cli3.0默認(rèn)使用yarn下載）。
- 先是默認(rèn)的槽地，一路回車后的項(xiàng)目目錄如下：
- 再來手動(dòng)的迁沫，我起的項(xiàng)目名字叫 vue-webpack-demo2，如下圖捌蚊，讓你選擇那些選項(xiàng)集畅，按 空格鍵 是選擇單個(gè)，a 鍵 是全選缅糟。
- 我選擇了常用的如下選項(xiàng)：
- vue-router 默認(rèn) hash 模式牡整，所以我選擇默認(rèn)的，選擇了 n 溺拱，而不是 history 模式：
- 下一步之后問詢問你安裝哪一種 CSS 預(yù)處理語言逃贝，我是選擇了用的 less。
- 這個(gè)是問你選擇哪個(gè)自動(dòng)化代碼格式化檢測(cè)迫摔，配合 vscode 編輯器的沐扳，Prettier - Code formatter插件，我選的隨后一個(gè)句占。
- 第一個(gè)是保存就檢測(cè)沪摄，第二個(gè)是 fix 和 commit 的時(shí)候檢查。
- 選擇單元測(cè)試解決方案纱烘，Mocha是流行的JavaScript測(cè)試框架之一杨拐，通過它添加和運(yùn)行測(cè)試，從而保證代碼質(zhì)量擂啥，chai 是斷言庫哄陶，我兩個(gè)都選擇了。
- 上邊這倆意思問你像哺壶，babel, postcss, eslint 這些配置文件放哪屋吨？第一個(gè)是：放獨(dú)立文件放置蜒谤，第二個(gè)是：放package.json里，這里小汪選擇放單獨(dú)配置文件至扰，選第一個(gè)
- 下面倒數(shù)第二行問你是否將以上這些將此保存為未來項(xiàng)目的預(yù)配置嗎 鳍徽？選擇是的時(shí)候，下次創(chuàng)建項(xiàng)目時(shí)敢课，可以選擇剛剛配置好的配置阶祭，不用再每個(gè)都配置一遍。最后一個(gè)是選擇的名字直秆，你隨意選擇濒募，點(diǎn)擊確定就開始下載模板了。
- 再創(chuàng)建項(xiàng)目的時(shí)候切厘，剛剛配置好的選擇的名字 vue-webpack4 會(huì)這樣子出現(xiàn)：
- 啟動(dòng)命令
// 1. 進(jìn)入項(xiàng)目
cd vue-webpack-demo
// 或者 cd vue-webpack-demo2
// 2. 安裝依賴
npm i
// 3. 啟動(dòng)
npm run serve
1.4 項(xiàng)目改變
- 相比 vue-cli 2.X 創(chuàng)建的目錄萨咳，vue-cli 3.0 創(chuàng)建的目錄看不見 webpack 的配置
- 啟動(dòng)命令行由：
npm run dev 或者 npm start
改變?yōu)椋?/p>
npm run serve
安裝過程也發(fā)生了一些變化懊缺，配置可以保存疫稿，下次可以再用，像前面的 vue-webpack4鹃两。
手動(dòng)配置 webpack：在根目錄下新建一個(gè) vue.config.js 文件遗座，進(jìn)行你的配置 :
const path = require('path');
module.exports = {
// 基本路徑
baseUrl: './',
// 輸出文件目錄
outputDir: 'dist',
// eslint-loader 是否在保存的時(shí)候檢查
lintOnSave: true,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 為生產(chǎn)環(huán)境修改配置...
config.mode = 'production';
} else {
// 為開發(fā)環(huán)境修改配置...
config.mode = 'development';
}
Object.assign(config, {
// 開發(fā)生產(chǎn)共同配置
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@c': path.resolve(__dirname, './src/components')
}
}
});
},
// 生產(chǎn)環(huán)境是否生成 sourceMap 文件
productionSourceMap: true,
// css相關(guān)配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項(xiàng)
loaderOptions: {},
// 啟用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// PWA 插件相關(guān)配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相關(guān)配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// proxy: {
// // 設(shè)置代理
// // proxy all requests starting with /api to jsonplaceholder
// 'http://localhost:8080/': {
// target: 'http://baidu.com:8080', //真實(shí)請(qǐng)求的目標(biāo)地址
// changeOrigin: true,
// pathRewrite: {
// '^http://localhost:8080/': ''
// }
// }
// },
before: (app) => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
};
- 當(dāng)然如果你不想用3.0的話，還是可以繼續(xù)使用2.0的, 官方文檔是這樣說的：
具體配置看官方文檔：
vue-cli 3.0
簡(jiǎn)單的配置方式
踩坑記
1. npm 的全局路徑被修改了
我都不記得在裝什么包的時(shí)候修改了 mac 中 npm 的全局路徑了俊扳，平時(shí) npm 運(yùn)行各種命令不報(bào)錯(cuò)途蒋。
全局卸載 vue-cli 命令行：
npm uninstall vue-cli -g;
但是今天全局卸載 vue-cli 的時(shí)候一直不成功，搞了一個(gè)小時(shí)馋记，結(jié)果看了一下 npm 的全局路徑号坡，才發(fā)現(xiàn)路徑不對(duì)！Ｌ菪选宽堆！
如果你的 npm 的全局路徑也變了，請(qǐng)按如下步驟修改加默認(rèn)的茸习。
方法一：
原因：npmr 的配置改變了畜隶，導(dǎo)致正確的 npmr 不能用。
- 打開終端号胚，切換到根路徑
cd
open .npmrc
- 文件里面修改為 prefix=/usr/local
方法二：
npm config set prefix /usr/local //是默認(rèn)路徑 修改了路徑會(huì)出現(xiàn)錯(cuò)誤籽慢。
按上面的方法修改完，再全局卸載 vue-cli 果然就成功了猫胁。
最后
你以為本文就這么結(jié)束了 ? 精彩在后面 Ｏ湟凇！弃秆！
對(duì) 全棧修煉 有興趣的朋友可以掃下方二維碼關(guān)注我的公眾號(hào)
我會(huì)不定期更新有價(jià)值的內(nèi)容极景，長期運(yùn)營察净。
關(guān)注公眾號(hào)并回復(fù) 福利 可領(lǐng)取免費(fèi)學(xué)習(xí)資料，福利詳情請(qǐng)猛戳： Python盼樟、Java氢卡、Linux、Go晨缴、node译秦、vue、react击碗、javaScript
