怎麼用Vuecli 3.0快速建立項目

一.安裝

1.安裝node.js，這裏須要注意的是，Vue CLI 3須要 nodeJs ≥ 8.9，因此咱們去中文官方下載地址：http://nodejs.cn/download/ ，下載最新版本便可；

2.安裝vue-cli3.0版本：

兩種狀況：1.你以前安裝過vue-cli3.0以前的版本，需卸載以前版本，再安裝新版本；

卸載舊版本：

npm uninstall vue-cli -g

安裝新版本：

npm install -g @vue/cli

2.你以前沒有安裝過vue-cli3.0以前的版本，直接安裝新版本便可；

3.安裝nrm，有時候國外資源太慢，使用這個就能夠快速地在 npm 源間切換：

1.全局安裝nrm

npm install -g nrm

2.查看當前使用源

nrm current

3.查看可選源（帶*號即爲當前使用源）

nrm ls

4.切換源

以淘寶鏡像爲例：

nrm use taobao

5.測試源速度（即響應時間）

好比：測試官方源和淘寶源的響應時間

nrm test npm

nrm test taobao

能夠得出，淘寶源的速度要遠快於官方源，安裝完nrm以後，咱們進行建立項目，咱們下載和搭建的速度就會快不少，才能稱上快速兩個字；

 

二.建立項目

1.新建項目

vue create jjrweb //後面爲文件名 不支持駝峯（含大寫字母）

彈出以下界面：

1.第一個「 my-default」是我以前保存的預設配置，等下下面會介紹到；

2.default（babel，eslint）：默認套餐，提供 babel 和 eslint 支持；

3.Manually select features：本身去選擇須要的功能，提供更多的特性選擇。好比若是想要支持 TypeScript ，就應該選擇這一項；

若是想要更多的支持，這裏我選擇Manually select features：切換到這項，按下 enter 鍵選中，

彈出以下界面：

能夠多選：使用方向鍵在特性選項之間切換，使用空格鍵選中當前特性，使用 a 鍵切換選擇全部，使用 i 鍵翻轉選項。

( ) Babel //轉碼器，能夠將ES6代碼轉爲ES5代碼，從而在現有環境執行。 
( ) TypeScript// TypeScript是一個JavaScript（後綴.js）的超集（後綴.ts）包含並擴展了 JavaScript 的語法，須要被編譯輸出爲 JavaScript在瀏覽器運行，目前較少人再用
( ) Progressive Web App (PWA) Support// 漸進式Web應用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的狀態管理模式）
( ) CSS Pre-processors // CSS 預處理器（如：less、sass）
( ) Linter / Formatter // 代碼風格檢查和格式化（如：ESlint）
( ) Unit Testing // 單元測試（unit tests）
( ) E2E Testing // e2e（end to end） 測試

這裏我選擇的爲圖片中的選項，回車：

彈出以下界面：

是否使用history router：這裏我選擇NO，後期若是要改爲history，手動去路由裏添加便可，回車；

彈出以下界面：

css預處理器，主要爲css解決瀏覽器兼容、簡化CSS代碼 等問題，你習慣使用哪一種選擇哪一種便可，這裏我選擇Less

彈出以下界面：

ESLint：提供一個插件化的javascript代碼檢測工具，ESLint + Prettier //使用較多，這裏我選擇ESLint + Prettier

彈出以下界面：

什麼時候檢測：這裏我選擇Lint on save  保存時檢測

彈出以下界面：

如何存放配置 ：這裏我選擇圖中選擇

彈出以下界面：

是否保存本次配置（y:記錄本次配置，而後須要你起個名; n：不記錄本次配置）：這裏我選擇NO，上文中正好說到這個，若是你選擇yes，下次建立項目的時候就能夠選擇按以前模板來

彈出以下界面：

搭建完成：能夠進入到該項目文件夾，而後運行項目；

 

2.項目結構

精簡了不少，但仍是和vue2.0有不少區別的，基本的用法變化不是特別大，如圖：

 

 

3.vue-cli2.0和vue-cli3.0的區別

1.vuex（狀態管理）：

vue cli 2 中 ：vuex是搭建完成後本身npm install的，並不包括在搭建過程當中。能夠看到vue cli 2的vuex默認文件夾（store）又包含了三個js文件：action（存放一些調用外部API接口的異步執行的的方法，而後commit mutations改變mutations 數據）、index（初始化mutations 數據，是store的出口）、mutations（處理數據邏輯的同步執行的方法的集合，Vuex中store數據改變的惟一方法commit mutations）

vue cli 3 中：vuex是包含在搭建過程供選擇的預設。vue cli 3 中默認只用一個store.js代替了原來的store文件夾中的三個js文件。action、mutations、state以及store 的 getters 的用法有不少

2.router （路由）：

vue cli 2 ：「 router/index.js 」

vue cli 3：「router.js」（用法和作的事都同樣）

3.去掉 static  、 新增 public 文件夾

vue cli 2 ：static 是 webpack 默認存放靜態資源的文件夾，打包時會直接複製一份到dist文件夾不會通過 webpack 編譯

vue cli 3  ：摒棄 static 新增了 public 。vue cli 3 中「靜態資源」兩種處理方式：

經webpack 處理：在 JavaScript 被導入或在 template/CSS 中經過「相對路徑」被引用的資源會被編譯並壓縮

不經webpack 處理：放置在 public 目錄下或經過絕對路徑被引用的資源將會「直接被拷貝」一份，不作任何編譯壓縮處理

4.index.html ：

vue cli 2 ：「index.html 」

vue cli 3 ：「public/index.html 」此模板會被 html-webpack-plugin 處理的

5.src/views：

vue cli 3 的 src文件夾 新增 views文件夾 用來存放 「頁面」，區分 components（組件）

6.去掉 build（根據config中的配置來定義規則）、config（配置不一樣環境的參數）文件夾 ：

vue cli 3 中，這些配置 你能夠經過 命令行參數、或 vue.config.js （在根目錄 新建一個 vue.config.js 同名文件）裏的 devServer 字段配置開發服務器

7.babel.config.js：

配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不一樣，這個配置文件不會使用基於文件位置的方案，而是會一致地運用到項目根目錄如下的全部文件，包括 node_modules 內部的依賴。官方推薦在 Vue CLI 項目中始終使用 babel.config.js 取代其它格式。

8.根目錄的一些其餘文件的改變：

以前全部的配置文件都在vue create 搭建時preset預設 或者 後期能夠經過 命令參數 、 vue.config.js 中配置

 

三.項目編寫

1.在package.json文件中添加

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode product",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },

2.在根目錄下建立.env.development文件，並配置

# 開發環境
NODE_ENV = 'development'

# base api
VUE_APP_BASE_API = '/api'
VUE_APP_MOCK = '/mock'

VUE_APP_BASE_HTTP_MOCK = 'http://11.3.120.181:8989'
VUE_APP_BASE_HTTP = 'http://11.3.120.181:8765'

3.在根目錄下建立.env.test文件

# 測試環境
NODE_ENV = 'test'

# base api
VUE_APP_BASE_API = '/api'
VUE_APP_BASE_HTTP = 'http://11.3.120.181:8765'

4.在根目錄下建立.env.product文件

# 生產環境
NODE_ENV = 'product'

#業務接口地址
VUE_APP_BASE_API = '/api'
#VUE_APP_API_HOST = 'https://www.shenchan.com'
VUE_APP_API_HOST = 'http://10.3.320.201:8765'

5.在main.js裏配置api變量

import api from './http/index'
import globalData from './utils/globalData'

Vue.config.productionTip = false;

Vue.use(api)

// 設置全局變量
Vue.prototype.$globalData = globalData

6.新建一個utils文件夾，裏面創建一個globalData.js文件

const globalData = {
  API_HOST: process.env.VUE_APP_API_HOST
}
export default globalData

7.新建一個http文件夾，裏面創建三個api.js,index.js,list.js文件，以及一個module文件夾裏面存放login.js接口

api.js:設置接口配置和攔截器的編寫

import axios from 'axios'
// import { getToken } from '@/utils/auth'
import globalData from '@/utils/globalData'
// create an axios instance
const service = axios.create({
  baseURL: globalData.API_HOST, // url = base url + request url
  withCredentials: false, // send cookies when cross-domain requests
  timeout: 10000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // mock數據和接口數據區分
    if (config.method === 'get' && config.params) {
      console.log('1111')
      // config.params.applytime = new Date()
    }
    if (process.env.NODE_ENV === 'product') {
      config.url = process.env.VUE_APP_API_HOST + config.url
      console.log('2222'+config.url)
    } else {
      config.url = process.env.VUE_APP_BASE_HTTP + process.env.VUE_APP_BASE_API + config.url
      console.log('3333'+config.url)
    }
    console.log('請求地址：' + config.url)
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    console.log('返回結果:' + response)
    const res = response.data
    console.log('4444' + res)
    if (res !== '') {
      if (process.env.NODE_ENV === 'development') {
        console.log('開發環境'+res.msg) // 提示
      }
      return Promise.reject(res.msg)
    } else {
      return res
    }
  },
  error => {
    console.error(error)
    if (error.response.data.code === 401) {
      console.log('登陸異常，請從新登陸') // 提示,而後在此處添加跳轉到登陸
      return false
    }
    if (process.env.NODE_ENV === 'development') {
      console.log(error.response.data + '開發環境err') // 提示
    }
    return Promise.reject(error)
  }
)

export default service

index.js:設置請求名頭

import list from './list'

const busineApi = Vue => {
  if (busineApi.installed) {
    return
  }
  busineApi.installed = true
  Object.defineProperties(Vue.prototype, {
    // 此處掛載在 Vue 原型的 $list 對象上
    $hjApi: {
      get () {
        return list
      }
    }
  })
}
export default busineApi

list.js:接口模塊的引入

// Saas系統
import login from './module/login' // 登陸模塊

const allApi = Object.assign(login)

export default allApi

login.js:接口定義

import axios from '../api'

// 登陸
export const login = (data = {}) => {
  return axios({
    url: '/auth/oauth/token',
    method: 'get',
    params: data
  })
}


export default {
  login
}

8.頁面裏面請求寫法

methods: {
    // 登陸
    login () {
      console.log('abcd')
      // 登陸接口
      this.$hjApi.login({
        username: 'hjhj',
        password: '123456',
      }).then(res => {
        console.log(res+'登陸成功')
      }).catch(err => {
        console.log(err)
      })
    }
  }