怎样用Vuecli 3.0疾速建立项目

2019-11-18杂谈搜奇网31°c

A⁺ A^-

一.装置

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

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)
      })
    }
  }