基于vuecli30的项目工程重新构建空白版拿来即用

写在前面

使用 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…