基于vue-cli3.0的项目工程重新构建空白版，拿来即用

写在前面

使用vue框架开发时，很多人会选择vue官方提供的cli脚手架，最新的cli已经更新到3.0完全无配置，只需下载就能方便的使用vuecli构建的项目工程，但基础的cli并不能满足正常的项目开发，在开发中我们需要根据自己的习惯和业务功能而添加些基础功能。

我在vuec-li3的基础之上重新做了些构建，分为pc，移动两版，主要区别是移动版添加了分辨率适配，本项目为空白版，拿来即用，省却每次手动构建项目工程！！

GitHub查看项目内容 https://github.com/wwenj/vueC...

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写公共基础组件

写在结尾

本项目只是根据自己开发习惯整理的一套基于vuecli3的重新构建项目，为了让开发更方便，清晰，每次写新项目，个人项目，写demo下载即用，比较方便，如有问题欢迎指教

GitHub查看项目内容 https://github.com/wwenj/vueC...