環境安裝
首先需要安裝node.js和npm最新版,檢視版本
命令列執行：安裝更新(-g指全域性安裝) :
npm install -g node
npm install -g npm
npm就自動為我們更新到最新版本
淘寶npm映象使用方法
npm config set registry https://registry.npm.taobao.org
cnpm config set registry https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org
配置後可通過下面方式來驗證是否成功 ：
npm config get registry
複製程式碼使用 npm 全域性安裝 vue-cli ：
npm i -g @vue/cli
建立專案
1-執行：
vue create 專案名
2-此處有兩個選擇：
default (babel, eslint)預設套餐，提供babel和eslint支援
Manually select features自己去選擇需要的功能，提供更多的特性選擇。
vue-cli 內建支援了8個功能特性，可以多選：使用方向鍵在特性選項之間切換，使用空格鍵選中當前特性，使用 a 鍵切換選擇所有，使用 i 鍵翻轉選項。
對於每一項的功能，此處做個簡單描述：
babel es6 轉 es5。
TypeScript 支援使用 TypeScript 書寫原始碼。
Progressive Web App (PWA) Support PWA 支援。
Router 支援 vue-router 。
Vuex 支援 vuex 。
CSS Pre-processors 支援 CSS 前處理器。
Linter / Formatter 支援程式碼風格檢查和格式化。
Unit Testing 支援單元測試。
E2E Testing 支援 E2E 測試。
3-選擇完成按住enter進入下一步，接下來都是對之前每項選項的更詳細的選擇。
css選擇 自己喜好
選擇ESLint的程式碼規範，此處使用 Standard程式碼規範
選擇何時進行程式碼檢測，此處選擇在儲存時進行檢測Lint on save
選擇單元測試解決方案，此處選擇 Jest
Linter / Formatter選擇prettier
這一步就是要選擇配置檔案的位置了。對於 Babel 、 PostCSS 等，都可以有自己的配置檔案： .babelrc 、 .postcssrc 等等，同時也可以把配置資訊放在 package.json 裡面。此處出於對編輯器（ Visual Studio Code ）的友好支援（編輯器一般預設會在專案根目錄下尋找配置檔案），選擇把配置檔案放在外面，選擇 In dedicated config files
4-補充
Save this as a preset for future projects?這個就是問要不要把當前的這一系列選項配置儲存起來，方便下一次建立專案時複用。
啟動專案
初始完之後，進入到專案根目錄：
cd 專案名
啟動專案：
npm run serve
vue.config.js配置
此部分內容參考Vue-cli配置參考
vue.config.js是一個可選的配置檔案，如果專案的（和package.json同級的）根目錄中存在這個檔案，那麼它會被@vue/cli自動載入。你也可以使用package.json中的vue欄位，但是注意這種寫法需要你嚴格遵照JSON的格式來寫。
這個檔案應該匯出了一個包含了選項的物件
// vue.config.js
module.exports = {
// 選項...
}
複製程式碼配置代理
如果你的前端應用和後端 API 伺服器沒有執行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 伺服器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置
vue-cli3.0的代理配置
devServer: {
// webpack-dev-server 相關配置
port: 8085, // 埠號
host: "localhost",
https: false, // https:{type:Boolean}
open: true, //配置自動啟動瀏覽器
hotOnly: false,
// proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
proxy: {
"/ganziecommerce": {
target: "http://192.168.0.110:8001",
ws: true,
changeOrigin: true
}
}
},
複製程式碼打包
publicPath: "./", // 基本路徑
outputDir: "dist", // 輸出檔案目錄,可以自定義
assetsDir: "assets", //靜態資源目錄(js,css,img,fonts)
npm run build //打包