/vueCli3-base

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

Primary LanguageJavaScript

vueCli3-base基础构建版

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

PC

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

移动

基础配置

  • 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日