vue-cli3.0 開發環境構建

vue-cli3.0官網

一、node版本

node版本要求node>=8.9以上(推薦 8.11.0+)
使用如下命令查看node版本

node -v 

若是不是最新的請到node下載下載最新版本安裝便可。

二、vue-cli安裝

（1）若已全局安裝vue-cli (1.x 或 2.x)，需先卸載

npm uninstall vue-cli -g 

（2）全局安裝 vue-cli3.0

npm install -g @vue/cli 

三、建立項目

（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配置細節

//一、 TypeScript // 是否使用class風格的組件語法 Use class-style component syntax? // 是否使用babel作轉義 Use Babel alongside TypeScript for auto-detected polyfills? // 二、Router // 路由使用歷史模式 Use history mode for router? (Requires proper server setup for index fallback in production) // 三、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 // 四、Linter / Formatter 代碼風格、格式校驗 > TSLint // 僅錯誤預防 ESLint with error prevention only // Airbnb配置 ESLint + Airbnb config // 標準配置 ESLint + Standard config // Prettier配置（經常使用） ESLint + Prettier // 五、選擇lint方式：Pick additional lint features // 保存時檢查（經常使用） (*) Lint on save // 提交時檢查 ( ) Lint and fix on commit // 六、Unit Testing 單元測試 Mocha + Chai Jest // 七、E2E Testing E2E（End To End）即端對端測試 Cypress (Chrome only) Nightwatch (Selenium-based) // 八、選擇 Babel, PostCSS, ESLint 等自定義配置的存放位置 // 在單獨的配置文件中 In dedicated config files // 在package.json In package.json // 九、將此做爲未來項目的預置嗎？ Save this as a preset for future projects? // 在單獨的配置文件中 In dedicated config files // 在package.json In package.json // 十、按下enter構建項目 

四、啓動項目

// 一、進入項目 cd 項目名 // 二、運行 npm run serve