Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化申尼，它確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接苛白，這樣你可以專注在撰寫應(yīng)用上位谋，而不必花好幾天去糾結(jié)配置的問(wèn)題多柑。與此同時(shí)，它也為每個(gè)工具提供了調(diào)整配置的靈活性瑞佩，無(wú)需 eject聚磺。個(gè)人在使用vue-cli3的感受中，其零配置炬丸、可升級(jí)2個(gè)特點(diǎn)確實(shí)很不錯(cuò)哦咧最。由此可見(jiàn)，vue-cli3更智能御雕、更高效咯！大贊~
首先滥搭，如何安裝vue-cli3酸纲？
1.如果你之前安裝了vue-cli的舊版本，由于Vue CLI 的包名稱由?vue-cli?改成了?@vue/cli瑟匆。那么你要做如下操作：
?如果你已經(jīng)全局安裝了舊版本的vue-cli(1.x 或 2.x)闽坡，你需要先通過(guò)?npm uninstall vue-cli -g?或?yarn global remove vue-cli?卸載它。
2.你要有一個(gè)nodejs環(huán)境
Vue CLI 需要?Node.js?8.9 或更高版本 (推薦 8.11.0+)。你可以使用?nvm?或?nvm-windows在同一臺(tái)電腦中管理多個(gè) Node 版本疾嗅。
3.你可以通過(guò)下面指令安裝vue-cli3的包
npm install -g @vue/cli@3.0.0
# OR
yarn global add @vue/cli@3.0.0
4.安裝之后外厂，你就可以在命令行中訪問(wèn)?vue?命令。你可以通過(guò)簡(jiǎn)單運(yùn)行?vue代承，看看是否展示出了一份所有可用命令的幫助信息汁蝶，來(lái)驗(yàn)證它是否安裝成功。（例如 vue --version）
5.用以下命令創(chuàng)建一個(gè)vue的項(xiàng)目论悴，另：項(xiàng)目名稱首字母不能用大寫
vue create hello-world
6.安裝過(guò)程中掖棉，你會(huì)被提示選取一個(gè) preset。你可以選默認(rèn)的包含了基本的 Babel + ESLint 設(shè)置的 preset膀估，也可以選“手動(dòng)選擇特性”來(lái)選取需要的特性幔亥。
在多選時(shí)，空格鍵代表選中察纯，enter代表進(jìn)入下一個(gè)配置項(xiàng)
且你手動(dòng)選擇的配置項(xiàng)還會(huì)存入到你電腦的?~/.vuerc?文件中帕棉，這樣下次創(chuàng)建vue項(xiàng)目的時(shí)候，可以選擇你之前手動(dòng)配置的配置項(xiàng)饼记，這點(diǎn)vue cli3做得很人性化哦香伴！贊贊贊！
7.上面的配置選擇完之后握恳，一個(gè)簡(jiǎn)單的vue項(xiàng)目就創(chuàng)建成功了瞒窒。這個(gè)時(shí)候你在命令行cd hello-world，進(jìn)入到hello-world項(xiàng)目根路徑下乡洼，命令行敲下npm run serve崇裁，項(xiàng)目就可以跑起來(lái)啦。
8.創(chuàng)建項(xiàng)目后的目錄結(jié)構(gòu)
public目錄：放置ico以及你的index.html束昵。
src目錄：開(kāi)發(fā)vue項(xiàng)目的重點(diǎn)目錄所在拔稳。
assets目錄：放置靜態(tài)文件，例如：圖片锹雏，js巴比，svg的js等等啊，這個(gè)目錄下的文件在生產(chǎn)環(huán)境下會(huì)被webpack?copy礁遵。
components目錄：放置公用vue組件頁(yè)面轻绞。
styles目錄：新增，放置重寫reset.css以及阿里矢量圖字體iconfont.css用佣耐。
views目錄：可以用作放大模塊政勃，如登錄頁(yè)，首頁(yè)兼砖，注冊(cè)頁(yè)等等奸远。
前端獨(dú)立開(kāi)發(fā)有個(gè)跨域問(wèn)題既棺，之前vue-cli2的proxy-table等配置在vue-cli3中哪里配置呢？就是在多出的vue.config.js這個(gè)文件配置懒叛。
// vue.config.js
module.exports = {
? ? // 選項(xiàng)...
? ? baseUrl:"./",
? ? outputDir:"dist",
? ? assetsDir:"assets",
? ? indexPath:"index.html",
? ? filenameHashing:true,
? ? pages:undefined,
? ? lintOnSave:true,
? ? runtimeCompiler:false,
? ? transpileDependencies:[],
? ? productionSourceMap:false,
? ? crossorigin:undefined,
? ? integrity:false,
? ? devServer:{//代理
? ? ? ? port:8086,
? ? ? ? proxy:'http://192.168.255.201:8082'
? ? }
}
