步驟
- 新建一個文件夾如demo，vscode打開此文件夾，再打開終端
- vue-cli3.0以上版本，Vue cli 的包名稱由 vue-cli 改成了 @vue/cli。所以要先卸載舊版本，再安裝新的
- npm uninstall vue-cli -g 卸載vue2.0的安裝包
- npm install -g @vue/cli 全局安裝vue-cli3.0的包(安裝全局vue環境請不要使用yarn global add @vue/cli)
- vue --version看一下腳手架版本是否是3.0+
- vue create newProject 創建新的項目，格式：vue create 項目名
- 選擇自定義方式
- 選擇自定義選項(使用空格鍵選中或取消)
這里提一下linter這種代碼限制有時會比較難受，不喜歡拘束的可以取消此選項
- 使用history路由(Y)還是hash路由(N)
注：vue2.0里默認是hash路由，你也可以在router里通過mode重新設置路由模式，如mode:'history'
例：const routes = [
{
path: '/',
name: 'Index',
component: Index,
meta:{title:'首頁'}
},
]
export default new VueRouter({
mode: 'history', //改變路由模式hash -> History
routes
})
hash路由與hsitory路由主要差別：
（1）在url顯示： hash有#很Low ； history 無#好看
（2）回車刷新： hash 可以加載到hash值對應頁面 ； history一般就是404掉了
（3）支持版本： hash支持低版本瀏覽器和IE瀏覽器 ； history是HTML5新推出的API
-
選擇css預處理器，sass,less等
-
選擇eslint代碼檢測方式
談談區別：
第一種ESLint + Airbnb 很適合開發 react 項目
第二種 ESLint + Standard 用的很少，不過也不錯。
第三種 ESLint + Prettier 比較適合 vue 項目
當然：我還是覺得ESLint with error prevention only 檢測代碼錯誤就夠用了。
- 選擇檢測觸發條件(建議選擇第一個，保存時觸發代碼檢測)
- 選擇把Babel、PostCss、ESLint這些配置的文件放哪里，這里我選擇第一個：獨立放置文件
- 是否記錄以便下次繼續使用這套配置（選擇Y需要輸入保存名字，N不記錄）
- 這些自定義過后，系統便會自動搭建腳手架了
- 將newProject外面的demo文件夾去除，只留newProject作為最外層文件夾，yarn serve或 npm run serve啟動即可。(不然以后下載包都要先cd到newProject文件夾再npm下載)。
- 項目搭建完成