vue-cli3.0 開發環境構建

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

npm uninstall vue-cli -g

二. 全局安裝 vue-cli3.0

npm install -g @vue/cli

三. node版本要求 Node >=8.9,能夠使用 nvm 管理多個 Node 版本。

1. 安裝nvm https://github.com/coreybutler/nvm-windows/releases

2. 安裝node–> nvm install 版本號 window系統位數

3. 顯示全部安裝的版本 nvm ls

4. 切換node版本 nvm use 版本號

四.建立項目

vue create 項目名

1. 進入功能配置選擇

(1. default (babel, eslint) 默認預設配置 babel, eslint
 (2. Manually select features  手動選擇配置

2. enter後，進入手動選擇配置 ,有如下Installed CLI Plugins選項(注：空格單選，a全選，i反向全選)

(1. babel
(2. TypeScript  
(3. Progressive Web App (PWA) Support  支持漸進式網頁應用程序
(4. Router 路由管理器
(5. Vuex 狀態管理模式（構建一箇中大型單頁應用時）
(6. CSS Pre-processors css預處理
(7. Linter / Formatter 代碼風格、格式校驗
(8. Unit Testing 單元測試
(9. E2E Testing E2E（End To End）即端對端測試

3. 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預處理

選擇CSS 預處理類型:Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)  
選項：
	Less
	Sass
	Stylus

(4. Linter / Formatter 代碼風格、格式校驗

選擇Linter / Formatter類型:Pick a linter / formatter config:
選項：
	TSLint
	ESLint with error prevention only  僅錯誤預防
	ESLint + Airbnb config  Airbnb配置
	ESLint + Standard config 標準配置
	ESLint + Prettier
選擇lint方式：Pick additional lint features
選項：
	Lint on save 保存時檢查
    Lint and fix on commit 提交時檢查

(5. Unit Testing 單元測試

選擇unit testing類型：Pick a unit testing solution: (Use arrow keys)
選項：
	Mocha + Chai  
    Jest

(6. E2E Testing E2E（End To End）即端對端測試

選擇E2E testing類型：Pick a E2E testing solution: (Use arrow keys)
選項：
	Cypress (Chrome only) 
    Nightwatch (Selenium-based)

(7. 選擇 Babel, PostCSS, ESLint 等自定義配置的存放位置

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
 選項：
	In dedicated config files 在專用的配置文件中
    In package.json 在package.json

(8. 將此做爲未來項目的預置嗎？

Save this as a preset for future projects?
 選項：
	In dedicated config files 在專用的配置文件中
    In package.json 在package.json

(9.保存預設爲

Save preset as:

(10.回車後開始構建

五.項目啓動

1.進入目錄

cd ydc-vue3

2.運行

npm run serve

3.運行地址

App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.90:8080/