Vue-cli3項目創建

ps：如果之前安裝有cli2需要先卸載cli2才能安裝cli3/cli4；

准備工作：查看當前版本

vue -V 或者 vue --version

1、安裝、卸載

cli2

全局安裝：npm install vue-cli -g
全局卸載：npm uninstall vue-cli -g

cli3/cli4

全局安裝：npm install @vue/cli@版本號 -g
全局卸載：npm uninstall @vue/cli@版本號 -g

// @vue/cli后面不指定版本號則默認安裝cli4最新版

注：原cli3的安裝指令為@vue/cli，因為cli4的出現同樣使用了@vue/cli，所以想要安裝3的版本，就需要在@vue/cli后面加上@版本號（例：npm install -g @vue/cli@3.11.0）。 查看版本號：https://github.com/vuejs/vue-cli/blob/dev/CHANGELOG.md#.

2、創建項目

base是自定義的項目名稱 不能使用大寫字母

cli2

vue init webpack base

cli3/cli4

vue create base

　　1.創建，選擇手動配置項

　　 

　　2、配置選擇（A全選，空格鍵-選中/取消）

　　　Babel  -------------------------------  babel轉碼器把ES6轉碼為ES5
　　　TypeScript -------------------------  TypeScript
　　　Progressive Web App (PWA) Support PWA ------ PWA漸進式增強WEB應用
　　　Router ------------------------------ 路由
　　　Vuex -------------------------------- 狀態管理工具 
　　　CSS Pre-processors ---------------- CSS 預處理器
　　　Linter / Formatter ------------------- 支持代碼風格檢查和格式化
　　　Unit Testing -------------------------- 單元測試
　　　E2E Testing -------------------------- E2E 測試

　　

 　   詢問 路由是否使用 history 模式? 我選擇是

　　

       詢問 使用哪種css預處理器？我選擇 第二個

       

       詢問 是否把各個配置使用單獨文件存放，還是放在package.json中？ 我選擇放在package.json里面

       

       詢問 是否把本次選擇的配置保存，以供下次使用？我就暫且不保存了

      

      等待…

      

      成功！

      

      切換到demo路徑中然后運行項目

      

 　 去瀏覽器打開 http://localhost:8080/