1、node版本
node版本要求node>=8.9以上(推薦 8.11.0+)
使用以下命令查看node版本
node -v 如果不是最新的請到node下載下載最新版本安裝即可。
2、vue-cli安裝
（1）若已全局安裝vue-cli (1.x 或 2.x)，需先卸載
npm uninstall vue-cli -g （2）全局安裝 vue-cli3.0
npm install -g @vue/cli 3、創建項目
（1）創建項目
vue create 項目名
（2）配置
// 默認預設配置 babel, eslint default (babel, eslint) // 手動選擇配置 Manually select features （3）手動選擇配置項目
Vue CLI v3.4.1 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support //支持漸進式網頁應用程序 ( ) Router //路由管理器 ( ) Vuex //狀態管理模式（構建一個中大型單頁應用時） ( ) CSS Pre-processors //css預處理 (*) Linter / Formatter //代碼風格、格式校驗 ( ) Unit Testing // 單元測試 ( ) E2E Testing // 即端對端測試 - 上下鍵：自由選擇配置項
- 空格：選中
- enter：全部選擇完畢之后按下執行
（4）enter后，Installed CLI Plugins配置細節
//1、 TypeScript // 是否使用class風格的組件語法 Use class-style component syntax? // 是否使用babel做轉義 Use Babel alongside TypeScript for auto-detected polyfills? // 2、Router // 路由使用歷史模式 Use history mode for router? (Requires proper server setup for index fallback in production) // 3、CSS Pre-processors css預處理 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default) Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus // 4、Linter / Formatter 代碼風格、格式校驗 > TSLint // 僅錯誤預防 ESLint with error prevention only // Airbnb配置 ESLint + Airbnb config // 標准配置 ESLint + Standard config // Prettier配置（常用） ESLint + Prettier // 5、選擇lint方式：Pick additional lint features // 保存時檢查（常用） (*) Lint on save // 提交時檢查 ( ) Lint and fix on commit // 6、Unit Testing 單元測試 Mocha + Chai Jest // 7、E2E Testing E2E（End To End）即端對端測試 Cypress (Chrome only) Nightwatch (Selenium-based) // 8、選擇 Babel, PostCSS, ESLint 等自定義配置的存放位置 // 在單獨的配置文件中 In dedicated config files // 在package.json In package.json // 9、將此作為將來項目的預置嗎？ Save this as a preset for future projects? // 在單獨的配置文件中 In dedicated config files // 在package.json In package.json // 10、按下enter構建項目 4、啟動項目
// 1、進入項目 cd 項目名 // 2、運行 npm run serve