1墨微、安裝nodenode官網(wǎng)下載安裝
2半等、安裝vue-cli
npm install -g @vue/cli
3筒捺、打開(kāi)終端，進(jìn)入文件夾
npm create project//創(chuàng)建項(xiàng)目project势就，點(diǎn)擊enter繼續(xù)
4泉瞻、選擇創(chuàng)建項(xiàng)目
選擇配置方式
vue2是我之前創(chuàng)建項(xiàng)目環(huán)境用到的一些配置保存下來(lái)的，這里新手可以選擇Manually select feature苞冯，自己手動(dòng)配置
5瓦灶、選擇需要配置的，如Babel轉(zhuǎn)碼器（空格選中或取消選中）
配置
Babel：將ES6轉(zhuǎn)碼為ES5（因?yàn)橛行g覽器對(duì)于ES6抱完、ES7的語(yǔ)法無(wú)法識(shí)別，需要將其轉(zhuǎn)換為ES5的語(yǔ)法）
TypeScript//開(kāi)發(fā)語(yǔ)言中使用就需要選擇刃泡，這里我們使用到的是js巧娱，
Progressive Web App (PWA) Support// 漸進(jìn)式Web應(yīng)用程序
Router // vue-router（vue路由）
Vuex // vue的狀態(tài)管理模式
CSS Pre-processors // CSS 預(yù)處理器（如：less、sass）
Linter / Formatter // 代碼風(fēng)格檢查和格式化（如：ESlint）
Unit Testing // 單元測(cè)試（unit tests）
E2E Testing // e2e（end to end） 測(cè)試
6烘贴、選擇Vue版本
Vue版本
7禁添、選擇Vue-router是否使用History模式
Vue-Router模式
看到一篇關(guān)于Vue-Router的兩個(gè)模式Hash和History不錯(cuò)的介紹，可參考Hash和History
8桨踪、選擇CSS預(yù)編譯器老翘，我選個(gè)less來(lái)用用
選擇CSS
node-sass是自動(dòng)編譯實(shí)時(shí)的，dart-sass需要保存后才會(huì)生效。sass 官方目前主力推dart-sass 最新的特性都會(huì)在這個(gè)上面先實(shí)現(xiàn)铺峭。
9墓怀、代碼檢測(cè)Eslint
Eslint
10、選擇測(cè)試框架
測(cè)試框架
Mocha + Chai //mocha靈活,只提供簡(jiǎn)單的測(cè)試結(jié)構(gòu)卫键，如果需要其他功能需要添加其他庫(kù)/插件完成傀履。必須在全局環(huán)境中安裝
Jest //安裝配置簡(jiǎn)單，容易上手莉炉。內(nèi)置Istanbul钓账，可以查看到測(cè)試覆蓋率，相較于Mocha:配置簡(jiǎn)潔絮宁、測(cè)試代碼簡(jiǎn)潔梆暮、易于和babel集成、內(nèi)置豐富的expect
11绍昂、選擇配置文件建立方式啦粹，是單獨(dú)生成文件還是在package.json中
文件生成方式
獨(dú)立建文件
在package.json文件中配置
12、上面的配置是否需要保存一共下次構(gòu)建項(xiàng)目直接使用治专，也就是類似于我在第4步所說(shuō)的vue2是之前創(chuàng)建過(guò)的卖陵，選擇yes則為該環(huán)境取個(gè)名字，下次直接使用
image.png
13张峰、啟動(dòng)項(xiàng)目
啟動(dòng)項(xiàng)目
至此基本項(xiàng)目搭建完成泪蔫！關(guān)于后續(xù)項(xiàng)目學(xué)習(xí)等將繼續(xù)補(bǔ)充！
參考：vue搭建項(xiàng)目
