vue-cli3项目搭建配置

项目初始化

注意：安装前请确保有安装node.js，并且node>=8.9

全局安装vue　

npm install -g @vue/cli

如果之前安装了vue旧版本，查看vue --version

创建项目

vue create vue-cli3-init(项目名)

注：名称不能采用驼峰

vue-cli3也可以采用UI面板进行配置，相对比较方便，目前先写命令行创建，后续再加上面板创建。

选择配置，默认配置还是手动，这里我选择手动Manually，继续回车会让你选择你想要功能。 （不用用git窗口，选择不了选项，可以使用上下方向来切换选项）

此处有两个选择：

• default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。
• Manually select features 自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript，就应该选择这一项。

回车后可进行选择，8个功能特性，可以多选： 使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项。我的选择如下，请根据自己需要进行选择。

对于每一项的功能，此处做个简单描述：

• TypeScript 支持使用 TypeScript 书写源码。
• Progressive Web App (PWA) Support PWA 支持。
• Router 支持 vue-router 。
• Vuex 支持 vuex 。
• CSS Pre-processors 支持 CSS 预处理器。
• Linter / Formatter 支持代码风格检查和格式化。
• Unit Testing 支持单元测试。
• E2E Testing 支持 E2E 测试。

是否选择history模式，根据自己需要选择。

是否选择预语言，根据自己需要选择。

 是否ESlint输出，根据自己需要选择。

是否保存时或者提交时是进行ESlint校验，根据自己需要选择。

选择把配置文件放在外面，选择 In dedicated config files

要不要把当前的这一系列选项配置保存起来，方便下一次创建项目时复用。

项目初始化完成，进入项目:

cd vue-cli3-init

依赖安装完成之后启动项目：

npm run serve

 

修改目录结构

用编辑器打开后可以看到目录结构。相对于vue-cli2精简了很多，减少了对webpack的配置。 

• node_modules 文件夹 项目依赖(对webpack进行了封装)

• public 文件夹

  1.favicon.ico 是 网站图标

  2.index.html 页面入口文件

• src 文件夹

  main.js 入口js

  assets 存放静态文件

  components 存放公用组件

  App.vue 入口vue文件

• .eslintrc.js 配置

• .gitignore 指定文件无需提交到git上

• balel.config.js 使用一些预设

• package.json 项目描述及依赖

• package-lock.json 版本管理使用的文件

由于现在的目录结构不利于后期的开发，现在我们增加部分文件，待后续可以进行功能扩展。在src文件下：新建api文件夹，config文件夹,router文件夹，utils文件夹，views文件夹，store文件夹。并在其文件下建子目录，详细请参考目录截图：

 

多环境运行

由于我们的项目需要在不同环境下进行运行(开发，生产，测试等)，这避免我们需要多次的去切换请求的地址以及相关的配置，vue-cli2是可以直接在config文件中进行配置的，但是vue-cli3已经简化了，官方文档也有进行配置的说明，实现具体有以下2种方法，我比较偏向第二种。

第一种实现方法

1.在根目录新建2个文件，分别为.env.development，.env.production，.env.test。注意文件是只有后缀的。

　.env.development 模式用于serve，开发环境，就是开始环境的时候会引用这个文件里面的配置

　.env.production模式用于build，线上环境。

　.env.test 测试环境

2.分别在文件内写上：

开发环境：

//.env.development 
VUE_APP_BASE_API = '需要请求API'

线上环境：

//.env.production
VUE_APP_BASE_API = '需要请求API'

测试环境：

//.env.test
VUE_APP_BASE_API = '需要请求API'

当需要用到该变量是可以用process.env.VUE_APP_BASE_API进行取值。

3.更改package.json文件

"scripts": {
    "dev": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

第二种实现方式

1.在config文件新建index.js文件，根据全局的环境变量来进行判断，并进行输出。代码如下：

// 一些全局的config配置
const modeUrlObj = {
  // 生产环境
  'production': {
    baseURL: 'http://xxx:9091/pro/',
    authBaseURL: ''
  },
  // 开发环境
  'development': {
    baseURL: 'http://xxxx:9091/dev/',
    authBaseURL: ''
  },
  // 测试环境
  'test': {
    baseURL: 'http://xxxx:9091/test/',
    authBaseURL: ''
  }
}
export default modeUrlObj[process.env.NODE_ENV]

2.更改package.json文件

"scripts": {
    "dev": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

3.引用的方法可以参照如下：

import config from '../config/index' // 路径配置
config.baseURL  // 对应环境api

4.运行命令行

npm run dev // 开发环境
npm run test // 测试环境
npm run build // 正式环境打包
npm run build:test // 测试环境打包

axios封装

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。如果还对axios不了解的，可以移步axios文档。

安装依赖

npm install axios --save; // 安装axios

配置axios

在uitls文件下新增request.js文件，在这里我们对axios进行初始化后，暴露给需要引用的文件，方便开发。

import axios from 'axios'
import config from '../config/index' // 路径配置

创建axios实例，并进行配置

// 创建axios 实例
const service = axios.create({
    baseURL: config.baseURL, // api的base_url
    timeout: 10000 // 请求超时时间
})

利用axios的请求拦截和响应拦截可以对登录和权限方面进行控制，具体需求可以自己进行配置。完整代码如下：

import axios from 'axios'
import config from '../config/index' // 路径配置

// 创建axios 实例
const service = axios.create({
    baseURL: config.baseURL, // api的base_url
    timeout: 10000 // 请求超时时间
})

// request 拦截器
service.interceptors.request.use(
    config => {
        // 这里可以自定义一些config 配置

        return config
    },
    error => {
        //  这里处理一些请求出错的情况

        Promise.reject(error)
    }
)

// response 拦截器
service.interceptors.response.use(
    response => {
        const res = response.data
        // 这里处理一些response 正常放回时的逻辑

        return res
    },
    error => {
        // 这里处理一些response 出错时的逻辑

        return Promise.reject(error)
    }
)

export default service

api请求配置

在api文件下新建分类的api请求文件。根据具体需要分类。主要是方便团队开发，容易归类。可以参考下面配置。

import request from '@/utils/request'

export default {
  // 登录
  login (data) {
    return request({
      url: '/login',
      method: 'post',
      data
    })
  },
  // 获取用户信息
  getUserInfo () {
    return request({
      url: '/userinfo',
      method: 'get'
    })
  }
}

业务中需要进行请求可以用import后，进行传参即可。

模块化vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

如果对vuex还不大了解的可以自行阅读vuex官方文档。

安装vuex

npm install vuex -S

新建目录

modules文件主要用法存放分类的文件，可以进行区分，getters文件是对state进行处理，index.js主要进行一些引入，初始化操作。 

书写vuex配置

index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user' // 引入各个模块的代码
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        user
    },
    getters
})

export default store

getter.js文件

getter中的配置可根据需求进行增加或者删除，下面是示例。

const getters = {
  requestLoading: state => state.app.requestLoading,
  size: state => state.app.size,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  roles: state => state.user.roles
}
export default getters

moduels/user.js文件

该文件为与业务相关，可以跟据具体参见进行增加和删除命名。每个文件的基本配置和用法如下：

import { getToken, setToken } from '@/utils/auth'
import api from '@/api/user'

const user = {
  state: {
    token: getToken(),
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
  },

  actions: {
    // 登录
    Login ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        api.login(userInfo).then(res => {
          if (res.code === 200) {
            setToken(res.data)
            commit('SET_TOKEN', res.data)
          }
          resolve()
        }).catch(err => {
          reject(err)
        })
      })
    }
  }
}

export default user

全局样式引用

在项目开发过程中，我们经常需要全局样式引用，例如主题色等，如果每次去写的化会变得很麻烦。因为我们应该了sass预语言编译，所以可以大胆的应用其特性。例如变量，函数，混入等。但是我们需要在项目中进行全局的配置才能有效果。不用在每一个页面都进行引入样式，就能直接引用。

新建目录

在assets下新建如下文件，具体的代码自行进行配置

* common.scss 主要存放公共的样式
* mixin.scss 存放混入样式
* reset.scss 存放重置样式。
* variable.scss 存放变量

全局引入

新建vue.config.js文件，并写上以下代码

module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `
               @import "@/assets/css/variable.scss"; 
               @import "@/assets/css/common.scss";
               @import "@/assets/css/mixin.scss";
              `
      }
    }
  },
}

在app.vue中引入reset.scss文件，完成后，样式即可进行全局调用了。

<style lang="scss">
  @import "assets/css/reset";
</style>

移动端适配配置

在本项目中主要用rem来进行页面的适配操作的，因为rem就可以随根字体大小改变而改变，从而实现了自适应的功能。但是html的字体是固定的，所以需要监听页面大小的变化，我主要用了淘宝的amfe-flexible来进行监听改变的。将项目中css的px转成rem单位，免去计算烦恼,我们可以用scss来进行计算或者利用px2rem插件来进行自动转化。因为是开发移动端，需把mate换为
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale= 1.0, minimum-scale=1.0">
实现方法如下：

安装amfe-flexible

npm i amfe-flexible --save

px转rem

方法一：

在common.scss文件中，全局引入scss函数：

/**
  转化px为rem。$base-font-size = 设计稿尺寸/10
*/
@function px2rem($px, $base-font-size: 37.5) {
  @return ($px/$base-font-size)*1rem
}

调用方式直接： width: px2rem(175);

方法二：

安装依赖

npm i postcss-pxtorem --save-dev

package.json内，在postcss内添加：

"postcss": {
   "plugins": {
     "autoprefixer": {},
     "postcss-pxtorem": {
       "rootValue": 75, // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除）
       "propList":["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
    }
   }
 },

常用util

该文件主要是对一些常用的js进行封装，例如时间格式化，LocalStorage操作等，相对比较常用的方法，这个文件可以进行保存，要用到时直接复制过来用即可。下面是我封装LocalStorage的文件，可参考以下，其他自行设置

import Cookies from 'js-cookie'

const TokenKey = 'Authorization'
/*
* 设置setLocalStorage
* */
export function setLocalStorage (key, value) {
    window.localStorage.setItem(key, window.JSON.stringify(value))
}
/*
* 获取getLocalStorage
* */
export function getLocalStorage (key) {
    return window.JSON.parse(window.localStorage.getItem(key) || '[]')
}
/*
* 设置setSessionStorage
* */
export function setSessionStorage (key, value) {
    window.sessionStorage.setItem(key, window.JSON.stringify(value))
}
/*
* 获取getSessionStorage
* */
export function getSessionStorage (key) {
    return window.JSON.parse(window.sessionStorage.getItem(key) || '[]')
}
/*
* 获取getToken
* */
export function getToken () {
    return Cookies.get(TokenKey)
}
/*
* 设置setToken
* */
export function setToken (token) {
    return Cookies.set(TokenKey, token)
}
/*
* 移除removeToken
* */
export function removeToken () {
    return Cookies.remove(TokenKey)
}

引入第三方UI框架(elementUI)

1. 打开控制台，执行vue add element命令，为项目安装element。

　

 2.等待其安装完毕，在设置向导中配置引入方式和加载地区。

　

3.在自动安装完依赖后，可以看到相关的文件已经被创建/更新了。

 　

4.如果需要按需引入，则去到src目录下自动新建的plugins目录，编辑element.js即可，默认会导入一个Button。这么做的好处是不用把引入的ele组件写在main.js文件下，使各模块更加分离。