写在前面
使用 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 相关信息,可按功能分模块引入 -
请求拦截与封装
- 使用 axios 做请求,在
src/request/http.js
中做了封装,用 axios 拦截器对请求和响应做统一拦截,处理每次请求的 token 信息或者响应状态码 - 对 axios 请求进行简单封装 get,post 请求,统一传参,响应后传回一个 promise 对象,在
src/request/api.js
中将每个接口封装,对外暴露请求改接口的方法名,返回一个 promise,组件中直接调用 api.js 中的方法名即可
- 使用 axios 做请求,在
-
工具类
在
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…