vue-cli 3.0是基于webpack 4.0之上構(gòu)建的vue腳手架工具，得益于webpack4.0的零配置特性，使得在使用vue-cli 3.0時(shí)赞季，零配置就可以開(kāi)發(fā)和打包vue項(xiàng)目
vue-cli 3.0及更高版本為了區(qū)別vue-cli 1.0和vue-cli 2.0，名字更改成了@vue/cli，如果你的電腦已經(jīng)安裝了比如vue-cli 2.0展氓，需要卸載它，然后安裝@vue/cli脸爱，不用擔(dān)心安裝了更高版本的vue-cli不能兼容老項(xiàng)目遇汞，比如用vue-cli 2.0創(chuàng)建的項(xiàng)目，啟動(dòng)和打包還是分別使用npm run dev和npm run build即可
vue --version // 查看電腦上已安裝的vue-cli的版本
npm uninstall vue-cli -g // 卸載老版本vue-cli
npm install -g @vue/cli // 安裝3.0版本的vue-cli
mac電腦卸載和安裝vue-cli方式如下：
sudo chmod -R 777 /usr/local/lib/node_modules/ // 放開(kāi)權(quán)限
sudo npm uninstall vue-cli -g // 卸載老版本
sudo npm install -g @vue/cli // 安裝新版本
安裝完畢，在cmd中輸入vue ui空入，啟動(dòng)項(xiàng)目管理器络它，新建一個(gè)vue項(xiàng)目，在這個(gè)過(guò)程需要操作步驟有：
1. 新建項(xiàng)目文件夾-vue-base-frame
2. 選擇包管理器-npm
3. 初始化git倉(cāng)庫(kù)默認(rèn)打開(kāi)
4. 選擇一套預(yù)設(shè)--選擇手動(dòng)
5. babel-打開(kāi)
6. Router-打開(kāi)
7. Vuex-打開(kāi)
8. CSS Pre-processors（css預(yù)處理器）-打開(kāi)
9. 使用配置文件-打開(kāi)
10. pick a css pre-processor 下拉選擇less
11. pick a linter / formatter config 下拉選擇 eslint + standard config
12. lint on save-打開(kāi)
13. 然后點(diǎn)擊“創(chuàng)建項(xiàng)目歪赢，不保存預(yù)設(shè)”
經(jīng)過(guò)上述步驟化戳，就可以靜待vue基礎(chǔ)模板下載下來(lái)，當(dāng)模板下載完成后轨淌，cmd進(jìn)入項(xiàng)目根目錄迂烁，執(zhí)行npm run serve啟動(dòng)項(xiàng)目，這和vue-cli 2.x版本中npm run dev啟動(dòng)方式不一樣递鹉，啟動(dòng)完成盟步，瀏覽器打開(kāi)這個(gè)項(xiàng)目，可以看到兩個(gè)簡(jiǎn)單的頁(yè)面Home和About躏结，接下來(lái)却盘，需要對(duì)這個(gè)vue模板進(jìn)行改造，在改造之前媳拴，我先來(lái)介紹一下黄橘，項(xiàng)目里各個(gè)文件的作用
先從項(xiàng)目根目錄開(kāi)始看起，主要有三個(gè)文件
- <b>package.json</b> 項(xiàng)目配置文件屈溉，項(xiàng)目中所需的依賴(lài)都會(huì)在這里說(shuō)明塞关，當(dāng)其他人要使用你這個(gè)項(xiàng)目時(shí)，只需要執(zhí)行npm install 就可以安裝這些依賴(lài)子巾，啟動(dòng)項(xiàng)目了帆赢，這里解析下json文件里面dependencies和devDependencies，dependencies聲明生成環(huán)境所需要的依賴(lài)线梗，也就是項(xiàng)目打包以后這些依賴(lài)也是要打包進(jìn)去的椰于，而devDependencies代表開(kāi)發(fā)環(huán)境的依賴(lài)，也就是方面你開(kāi)發(fā)而加載的一些依賴(lài)仪搔，這些依賴(lài)在項(xiàng)目打包時(shí)不會(huì)放進(jìn)去
- <b>public文件夾</b> 公共文件夾瘾婿，在vue-cli 2.x創(chuàng)建的項(xiàng)目模板中，就是static這個(gè)文件夾烤咧，vue-cli 3.x創(chuàng)建的項(xiàng)目模板中偏陪，取而代之的就是這個(gè)public文件夾，這里面有一個(gè)index.html文件煮嫌，它是提供給webpack笛谦，使其在運(yùn)行和打包的時(shí)候作為模板文件使用，生成最后項(xiàng)目里的index.html
- <b>src文件夾</b> 這是項(xiàng)目的主文件夾立膛，以后我們開(kāi)發(fā)都是在這個(gè)文件夾內(nèi)完成的
再來(lái)看下這個(gè)src這個(gè)主文件夾里都有哪些文件：
- assets 存放項(xiàng)目里的靜態(tài)資源文件揪罕，比如圖片梯码，圖標(biāo)，字體文件等
- components 從代碼里抽離出一些可復(fù)用的邏輯組成一個(gè)組件好啰，以便我們復(fù)用
- views 項(xiàng)目里的頁(yè)面都放在這個(gè)文件夾里
- App.vue 項(xiàng)目里的基礎(chǔ)組件（根組件）
- main.js 項(xiàng)目的入口文件轩娶，項(xiàng)目在開(kāi)發(fā)運(yùn)行或者編譯的時(shí)候，都會(huì)以這個(gè)為起始點(diǎn)
- router 存放路由文件
- store 存放狀態(tài)管理文件
以上就是我們下載下來(lái)的初始vue模板的所有說(shuō)明框往，這里提示一下鳄抒，因?yàn)樵趩?dòng)vue ui（項(xiàng)目管理器）上開(kāi)啟了eslint代碼檢查，這里防止你以后寫(xiě)代碼一直報(bào)空格和換行錯(cuò)誤椰弊，需要在根目錄里找到.editorconfig文件和.eslintrc.js文件许溅，修改一下
// .editorconfig.js
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 4 // 將這個(gè)項(xiàng)目默認(rèn)的2改為4
trim_trailing_whitespace = true
insert_final_newline = true
// .eslintrc.js
rules: {
'indent': ['error', 4], // 新增這一行代碼
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
<b>vue.config.js文件</b>
你會(huì)發(fā)現(xiàn)通過(guò)vue-cli 3.x創(chuàng)建的項(xiàng)目里沒(méi)有這個(gè)文件，是因?yàn)樽铋_(kāi)始我講到了基于webpack4.0特性0配置特性秉版，在使用vue-cli 3.0創(chuàng)建項(xiàng)目的時(shí)候贤重，webpack的配置均被隱藏了，老版本的vue-cli清焕，創(chuàng)建的項(xiàng)目并蝗，我們可以找到build和config這兩個(gè)文件夾，但是vue-cli 3.x創(chuàng)建的項(xiàng)目已經(jīng)沒(méi)有這兩個(gè)文件夾秸妥，當(dāng)需要覆蓋原有配置時(shí)滚停，需要在根目錄下新建vue.config.js文件，來(lái)配置新的配置粥惧，當(dāng)項(xiàng)目啟動(dòng)以后vue.config.js會(huì)被自動(dòng)加載
// vue.config.js
/* 如果當(dāng)前是生產(chǎn)環(huán)境production
如果項(xiàng)目部署到域名（www.baidu.com）根目錄下键畴，直接'/' : '/',
如果需要部署到（www.baidu.com/iview-admin）目錄下，直接'/iview-admin/' : '/'
如果是開(kāi)發(fā)環(huán)境突雪，直接'/' : '/' */
const BASE_URL = process.env.NODE_ENV === 'production' ? '/iview-admin/' : '/'
/* 引入node的path模塊 */
const path = require('path')
/* 自定義方法resolve */
const resolve = dir => {
return path.join(__dirname, dir);
}
// 引入webpack
// const webpack = require('webpack')
module.exports = {
lintOnSave: false, // 關(guān)閉eslint檢查
/* webpack配置 */
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // 用@代替src起惕，在項(xiàng)目里你需要引入文件的時(shí)候，只需要@/api,@/config,@/mock...即可
.set('_c', resolve('src/components')) // 用_c代替src/components,我們需要引入組件時(shí)挂签，只需要_c/HelloWorld.vue即可
},
// 打包時(shí)不生成map文件疤祭，這樣減少打包的體積盼产，并且加快打包的速度
productionSourceMap: false,
// 跨域配置
devServer: {
/* 自動(dòng)打開(kāi)瀏覽器 */
open: true,
hot: true, // vue cli3.0 關(guān)閉熱更新
// liveReload: false, // webpack liveReload關(guān)閉
/* 設(shè)置為0.0.0.0則所有的地址均能訪問(wèn) */
host: '0.0.0.0',
port: 4000,
// proxy: 'http://localhost:4000', // 告訴開(kāi)發(fā)服務(wù)器饵婆，將任何未知請(qǐng)求（沒(méi)有匹配到靜態(tài)文件的請(qǐng)求），都代理到這個(gè)url上戏售，來(lái)滿(mǎn)足跨域的請(qǐng)求
},
// configureWebpack: {
// plugins: [
// new webpack.ProvidePlugin({
// $:"jquery",
// jQuery:"jquery",
// "windows.jQuery":"jquery"
// })
// ]
// },
}
