nyhxiaoning / vuecli3-base

基于vuecli3.0对项目的基础构建，下载即用，pc端移动端两版在不同分支

vueCli3-base基础构建版

基于vue-cli3.0基础脚手架做部分修改，分为pc，移动两版，主要区别是移动版添加了分辨率适配，本项目为空白版，拿来即用，省却每次手动构建项目工程！！

PC

• pc版安装了elementUI做统一UI展示
• 安装scss写样式

移动

• 移动端适配：本项目使用vw单位统一对分辨率做适配，在vuecli工程里，根据大漠的《如何在Vue项目中使用vw实现移动端适配》用webpack中做配置。

基础配置

• svg组件：

  文件在src/icons/中，组件在component公共组件中封装用于svg展示组件，用做小icon的展示，svg保存在icons/下，使用时组件中调用<svg-icon icon-class="iconName"/>即可

• css样式：

  在src/style/中，全局公共样式，初始化样式。

• 路由与vuex

  对vue router和vuex做了相同的模块化处理，在router/和store/中统一写路由和vuex相关信息，可按功能分模块引入

• 请求拦截与封装

  1. 使用axios做请求，在src/request/http.js中做了封装，用axios拦截器对请求和响应做统一拦截，处理每次请求的token信息或者响应状态码
  2. 对axios请求进行简单封装get，post请求，统一传参，响应后传回一个promise对象，在src/request/api.js中将每个接口封装，对外暴露请求改接口的方法名，返回一个promise，组件中直接调用api.js中的方法名即可

• 工具类

  在src/utils/中，对常用枚举值、全局组件注册、常用类功能模块做模块化封装

• vue.config.js

  vuecli3隐藏所有配置，添加新配置项目中新建vue.config.js文件，本项目在其中加了一些常用配置，文件夹的别名，代理，打包路径等

• Eslint

  eslint使用默认规则，在vscode编辑器中配合eslint插件的保存自动修复功能，每次保存后会按照eslit规则自动修复

• 目录结构

  src/views文件下写业务模块，src/components写公共基础组件

作者 [王文健]
2019 年 8月 4日