vue-cli 3.0 安裝和創(chuàng)建項(xiàng)目教程
2018年07月18日 10:46:34?Jorrci?閱讀數(shù)：3030
使用前我們先了解下3.0較2.0有哪些區(qū)別
3.0 新加入了 TypeScript 以及 PWA 的支持
部分命令發(fā)生了變化：
下載安裝??npm install -g vue@cli
刪除了vue list
創(chuàng)建項(xiàng)目? ?vue create
啟動(dòng)項(xiàng)目? ?npm run serve
默認(rèn)項(xiàng)目目錄結(jié)構(gòu)也發(fā)生了變化：
移除了配置文件目錄术徊，config和build文件夾
移除了static文件夾，新增public文件夾鳍徽，并且index.html移動(dòng)到public中
在src文件夾中新增了views文件夾缓艳，用于分類 視圖組件 和 公共組件
下面進(jìn)入正題，進(jìn)行安裝和創(chuàng)建項(xiàng)目
首先? 安裝npm3.0
npm install -g vue@cli
下一步? 創(chuàng)建項(xiàng)目文件
vue create projectname//項(xiàng)目名
下一步? 選擇快捷式安裝配置
前面的是你之前安裝的項(xiàng)目配置丛版，第二個(gè)是默認(rèn)配置穿剖，最后一個(gè)是自行配置超埋，建議選最后一個(gè)
下一步? 自行選擇安裝配置
這個(gè)自行選擇配置哲思，按上下鍵切換目標(biāo)選項(xiàng)洼畅，按空格鍵勾選和取消，按a全選棚赔，按i反選帝簇，選好后回車確定
Babel，轉(zhuǎn)譯成瀏覽器可識別的語言靠益，可以讓你的項(xiàng)目支持更新的語法己儒，如es6\es7等
TypeScript，新增的選項(xiàng)卡
PWA捆毫，模擬原生app，漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序
路由
vuex管理模式
css預(yù)處理語言
代碼規(guī)范
組件單元測試
端對端測試冲甘，模擬用戶真實(shí)場景
下一步? 選擇css預(yù)處理語言
下一步? 選擇代碼規(guī)范配置
只進(jìn)行報(bào)錯(cuò)提醒绩卤；
不嚴(yán)謹(jǐn)模式；
正常模式江醇；
嚴(yán)格模式濒憋；
下一步? 是否保存當(dāng)前配置信息
選擇第一個(gè)，下次創(chuàng)建項(xiàng)目就會(huì)有本次的配置出現(xiàn)供你選擇
下一步? 選擇babel,postcss,eslint配置文件存放位置
第一個(gè)方獨(dú)立文件夾里陶夜，第二個(gè)放package.json里凛驮，建議選第一個(gè)
下一步? 填寫項(xiàng)目描述
然后就開始創(chuàng)建項(xiàng)目，下載依賴
等進(jìn)度條完成条辟，項(xiàng)目就創(chuàng)建好了
最后我們開始進(jìn)入項(xiàng)目根目錄黔夭，運(yùn)行項(xiàng)目試試
cdD:\test\test//進(jìn)入你的項(xiàng)目根目錄宏胯，或在你項(xiàng)目根目錄shift+右鍵，點(diǎn)擊在此處打開命令窗口
npm run serve? //運(yùn)行項(xiàng)目
參考文檔：https://cli.vuejs.org/???Vue CLI 3 的官方說明?
