初始化运行工程
npm install
npm run serve
npm 请使用淘宝镜像:
npm config set registry https://registry.npm.taobao.org
全局安装vue cli 3.0
npm install -g @vue/cli
启动vue cli 界面
运行:vue ui
进入Vue 项目管理器 导入当前项目
选择任务->serve 运行
工程默认已经启用保存自动格式化和修正代码规范,如果需求全局检查
运行: npm run lint
或进入 vue ui 界面 : 任务->lint
请不要随意改变以下文件内容:
vue.config.js
babel.config.js
可以动的配置项为: vue.config.js 下的 devServer
本地代理配置在vue.config.js文件中:
devServer: {
proxy: {
'/api': {
target: 'https://XXXX.com/',
pathRewrite: {
'^/api': ''
},
changeOrigin: true,
secure: false
}
}
}
本地调试修改代理地址随意,但不要提交个人调试的内容到svn或git
工程结构
dist //编译后的目录
public //公共目录,编译后会直接拷贝该目录下内容到编译目标文件
src // 代码目录
|--api // 接口目录,所有接口内容在这里定义
| |--_mock //模拟接口目录,只在开发模式下生效和参与编译
|
|--assets //素材目录,存放图片,字体等素材目录
|--components // 公共组件目录
|--router //页面路由定义目录
|--store //页面状态机
|--styles // 全局样式主题定义目前
|--utils //工具方法定义
|--views //视图文件夹,页面请写在这里
| |--_doc //项目文档,无须关注,只在开发模式下生效和参与编译
| |--layout //页面布局文件夹,里面定义了菜单了主视图布局定义
| |--user //公共用户模块,登录,修改密码用户信息等
1. vue.config.js
工程配置文件,一般情况下,只允许修改代理地址信息,如需深入了解请访问:https://cli.vuejs.org/zh/config/
修改常用项内容请通过使用vue ui上直接修改配置
2. package.json
第三方代码包的安装请分清楚是开发依赖包(devDependencies),还是运行时依赖包(dependencies),不要随意保存安装内容,或者通过vue ui上安装相关依赖
功能开发
以一级菜单为主功能块划分,每个菜单一个文件夹,每个叶子菜单路由对应一个菜单文件夹下的index.vue
开发 系统设置->菜单管理:
1.定义的文件夹和文件有:
views/system_setting
views/system_setting/menu_mgr
views/system_setting/menu_mgr/index.vue
api/system_setting.js
2.定义相关路由
router/asyncRouter.js
{
path: '/system_setting',
component: Layout,
meta: { title: '系统设置', icon: 'news' },
children: [
{
path: 'menu_mgr',
component: () => import('@/views/system_setting/menu_mgr/index'),
meta: { title: '菜单管理',authCode:'system_setting.menu_mgr' }
}
]
}
路由路径为文件夹路径
authCode:授权码,需要唯一,用于权限管理,可不填写,默认自动为菜单路径(/改.)
编码规范
文件夹: 使用全部小写,单词间用下划线分开,system_setting
JS文件: 驼峰命名, systemSetting.js
VUE组件: 首字母大写, PageTable.vue
样式定义: 中划线隔开, item-wapper
变量定义: 驼峰命名
宏定义: 大写 下划线隔开 MAX_COUNT
资源命名: 下划线命名, login_bg.png
开发下的文件或文件夹请以'_'开头 (不参与生产编译)
api下的接口定义: 函数名 = 动词+对象
基础的增删改查 统一命名为:
GET方法:
get对象Info(query)
get对象PageList(query)
get对象List(query)
POST方法:
create对象(params)
update对象(params)
delete对象(id)
例如:
import request from '@/utils/request'
export function getMenuTree () {
return request.get('/mock/menu/tree')
}
export function getMenuList (query) {
return request.get('/mock/menu/tree', {params:query})
}
export function createMenu (params) {
return request.post('/mock/menu/create', params)
}
export function updateMenu (params) {
return request.post('/mock/menu/update', params)
}
export function deleteMenu (id) {
return request.post('/mock/menu/delete', {id})
}
全局应用级别的状态定义在 /store/modules/app.js 下
各个业务模块定义各自的modules,不要模块间穿插使用,
相关文档:https://vuex.vuejs.org/zh/guide/
整个项目的异步请求方式写法采用ES7 的 async-await
async created () {
this.menuTree = await getMenuTree()
}
async save () {
try{
await createMenu(this.params)
}catch(err){
console.log(err) //请求异常捕获的err内容的接口返回内容
}
}
合理的使用ES6的特征函数,和函数编程处理复杂业务和逻辑,使得代码清晰不冗长,比例数组的forEach,map,filter,find,some 等
ES6相关文档:http://es6.ruanyifeng.com/
通用组件以文件夹的形式定义在components下,index.vue为组件入口
作为通用组件请判断它是否是本项目中可能在多个业务块的地方多次出现和复用,非这种情况的请直接定义在业务文件夹内.
组件的定义抽离出公共的props,对每个props都定义属性的类型(type)和默认值(default),组件需考虑结果输出和结果导入2种情况
全局组件(使用度频繁):
components/index.js 引入
局部组件(偶尔使用到):
具体功能块代码中引入
import XXX from '@/components/XXX'
组件定义相关文档:https://cn.vuejs.org/v2/guide/components.html
1.内部作用域
定义内部作用域的样式,务必添加scoped关键字,样式使用scss预编译语言
建议scss层级嵌套不要超过5级
<style lang="scss" scoped>
.class-a{
.class-b{
&.class-c{
}
}
>class-d{
}
}
2. 全局作用域
对应需要改变子组件内样式的,需要使用全局样式作用域才有效,此时务必定义组件最外层样式名(建议用组件名+box命名):
例如:组件PageList.vue
<template>
<div class="page-list-box">
<el-table></el-table>
</div>
</templace>
<style lang="scss">
.page-list-box{
.el-table{
}
}
scss 语法相关文档:https://www.sass.hk/docs/
</style>
内容定义在util/filters.js和 util/direactive.js中,具体请直接进这2个文件看目前已经定义的相关过滤器和指令
相关指令文档:https://cn.vuejs.org/v2/guide/custom-directive.html
相关过滤器文档:https://cn.vuejs.org/v2/guide/filters.html
内容定义在util/mixin.js中
其中主要定义了
closeTab(arg) 关闭TAB页 arg:非必填 回调参数
resetFields(formRef) 重置表单内容和验证 formName 表单的引用ref名称
operType: 针对页面页面增改查使用,为路由绑定参数
mixin 中定义的方法可在各个vue实例对象中使用
相关文档:https://cn.vuejs.org/v2/guide/mixins.html
1.模版内html 标签属性排一行,开头和收尾标签对齐(有子标签)
2.vue 内置指令和事件都采用缩写写法:@click,:href 等
相关模版语法文档:https://cn.vuejs.org/v2/guide/syntax.html
<template>
<a :href="url"></a>
<table>
<tr @click="test">
<td>测试</td>
</tr>
</table>
</template>
工程内的所有图标都使用element-ui自带的字体图片,外加iconfont 阿里巴巴矢量图标库内定义的项目图标,需增加额外图标请告知加入项目图标库
图标库css 定义在public/index.html
页面使用合理使用flex进行布局,高效且容易实现多种布局结果
flex布局相关文档:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
