vue cli 3.0快速建立項目

環境安裝

首先須要安裝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 //打包