使用 vue-cli 3.0 創建項目

1. 切換到要創建項目的目錄下，

   vue create < your-project >

2. 如果能創建成功，則說明已經安裝了 vue-cli 3.0；否則按照提示安裝： npm install -g @vue/cli， 再次創建項目： vue create < your-project >
3. 出現以下提示，選擇第二項，手工配置    

4. 出現以下選項，按下 space 選中當前項， enter 進入下一步  

   1. babel： 用於將高版本的ES語法轉化為低版本ES語法的工具，解決瀏覽器兼容性問題。需要選中。
   2. TypeScript語法支持。不選中 。 這里如果選中的話 js 文件換成 ts 文件
   3. PWA，漸進式移動應用。不需要選中。
   4. Router，路由。需要選中。
   5. Vuex，Vue官方的狀態管理工具。需要選中。
   6. CSS預處理器。不選中。
   7. 語法檢查工具。（這個東西對於初學者，還着急出項目的那種，是一個深坑！！！）需要選中。但是能讓你的代碼規范很多
   8. 單元測試、選中。
   9. 端到端測試， 不選中。
5. ? Use history mode for router? (Requires proper server setup for index fallback in production)   ： url 模式， hash 模式帶 #。
6. 
7. 將 配置 集成在package.json 里面
8. 完成創建  

    

 

使用 3.0 vue create 創建項目 和 之前 vue init 創建項目差別：

1. 啟動項目不在是 npm run dev ，而是 npm run serve

2. 去掉了2.x build和config等目錄 ,大部分配置 都集成到vue.config.js這里了

 vue.config.js里
大概包括了配置 常用的輸出路徑名、跟目錄、預處理、devServer配置、pwa、dll、第三方插件等等
詳細配置可以看官方文檔 詳細config配置

3. package.json 里面也略有所不同，分環境打包。 因為是剛學，對打包項目不太了解，切換成 3.0 先走一遍。

 

參考：https://juejin.im/entry/5ac1c540f265da237c690faf

https://segmentfault.com/a/1190000014627083

https://zhuanlan.zhihu.com/p/43672478