VUE项目前端规范

前端采用vue-cli3，技术栈为 vue+vuex+vue-router+axios+（vant||antd）作为基础框架，开发使用es6 & typescript语言、服务端模拟数据返回为mockerjs。

所有项目必须建立readme.md文档，并对当前项目使用的情况进行必要介绍，必须包含当前插件说明及api地址

模块目录

public目录webpack不会对其下文件进行处理，如在线数据需要变量形式使用静态文件可以使用此目录，引入方式如：

base:process.env.BASE_URL  //data中设置引入环境变量

:src="`${base}/image/no-data.png`"  //变量

src -> assets 为静态文件如图片文字等
components 为公共组件，view中可以通用等放在此处
entry 多页面入口
less/sass 公共less或sass存放
router 路由
service 服务端请求
store vuex数据存放
utils 工具类
views 视图页面


├── public                  //公共目录
│   ├── image               //图片-webpack不做处理
│   └── pdf                 //其他类型如pdf
└── src
    ├── assets              //静态文件目录如图片-webpack压缩处理
    │   └── img
    ├── components          //公共组件    
    │   └── Layout          //页面统一入口Layout，内部饱含router-view用来处理统一头部，尾部等三联结构/
    ├── entry               //多页面入口
    ├── less                //公共less
    ├── router              //公共路由
    ├── service             //公共http请求处理
    │   └── mocker          //默认mocker处理文件
    ├── store               //vuex存储处理
    │   └── login           //如登录页面
    ├── utils               //工具
    └── views               //视图层处理
        ├── Index           //示例
            ├── HotItem
            └── TabMenu

文件引入规范

页面中引入文件，以vue为例，同类型文件应分组引入。

如引入components 组件则在页面中

view页

//非同名，一般用做组件模块
import {
    SearchBox,
} from "./includeComponent.js"

//同名，一般用作服务器请求模块
import $http from "./includeServer";

引入页

// 非同名文件，一般用做组件模块
  import SearchBox from "@/views/Recommend/SearchBox/index.vue";

export {
    SearchBox,
} 

//同名文件，一般用作服务器请求模块
import $MenuList from "@/service/MenuList/index.js";
import $BannerList from "@/service/BannerList/index.js";


export default {
    $MenuList,
    $BannerList,
}

文件名、模块名，命名规范

文件名称与模块名称采用帕斯卡命名法，即单词首字母大写[示例:IndexPage]
模块名称与文件夹名称应使用相同名称，增加可读性、模块默认js使用index命名，页面引入默认index.js文件应使用默认加载方式如加载：import SearchBox from "@/views/Recommend/SearchBox/index.vue";应简写做 import SearchBox from "@/views/Recommend/SearchBox 。
模块引入当前文件夹文件使用路径./ 引入其他文件下路径使用@+文件路径，@指向src目录

环境变量名称规范

环境变量在.env本地（.git忽略） .env.development（测试）.env.production(发布)中设置，命名采用 VUE_APP_xxx的命名方式，自定义名称在xxx部分，禁止使用驼峰、$开口命名方式，防止跟默认及本地全局型变量冲突，使用大些命名。

js规范

使用let命名变量，
私有变量使用xx前后加下划线的方式命名
使用帕斯卡命名
公共变量使用$开头命名如$http
server文件命名使用与接口名称相同命名
vuex mutations使用M开头命名
vuex actions 使用A开头命名

less使用规范

简洁明了，驼峰命名，首字母小写
名称：总模块+父模块+自己、父模块+自己、简写总+父 +自己
使用scoped 控制当前域下less名称，嵌套使用加入/deep/ XXX来防止名称被修改后找不到类。
公共变量放入公共less文件夹declear.less下
animate动作放入统一文件下
如页面中存在大量的less比如大于100行则应该单独引入
单独引入less命名应放入当前模块文件less文件夹下名称应与模块名称相同或名称能概括与模块的关系。
按照模块结构写less机构，并增加是模块中某个功能说明

示例

/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
   {
    transform: translateX(10px);
    opacity: 0;
  }

component模块规范

名称采用帕斯卡命名规范
公共模块注释使用vscode中Document注释规范
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
在单文件组件中没有内容的组件应该是自闭合的。
事件命名示例：EventClickOpenFile 以Event+事件+作用名帕斯卡命名方式命名
模块函数，帕斯卡命名方式
所有函数必须添加注释及参数说明，使用vscode的Document插件或手写规范。
外部ui组件引入应按需引入，避免全部引入造成打包过大。
外部ui组件引入应统一使用其他component组件引入方式：例如includeComponent.jsn内统引入并export所有已用ui组件，方便统一管理及二次封装。
props 必须强制使用默认值设置，并在文件头部说明使用方式

props 设置

 props:{
      name:{
         type:String,
         default:"name",
         required:false,
         validator: function (value) {
          return true
        }
      }
    },

注释文档

/**
 * @name 刷新模块
 * @param {name} String 名称设置
 * @template <PullRefreshList 
 *            name="name"
 *            ></PullRefreshList>
 */

vuex 规范

除非全局通用或多模块交互，其他无需求不使用vuex，组件间非复杂传值使用.sync / emit / props / inject 方式交互。
mutations 使用M开头命名
actions 使用A开头命名
必须设置 namespaced:true,
建议使用 MPSet(state,data){state[data.state]=data.data}方式通用处理对应state，复杂业务逻辑除外。

示例

//岗位
import $http,{URL} from "@/service/Service";

export default {
    namespaced:true,
    state: {
       List:[], //列表数据
       CurretIndex:1//初始值
    },
    getters:{

    },
    mutations:{
       MPSet(state,data){
            state[data.state]=data.data
       }
    },
    actions:{
        /**
         * @name 获取tabs列表
         * @parma {params} Array 设置xxxx
         */
        AGetTabsList({dispatch,commit,state,computed},params){

         return $http.GetTabsList("/GetTabsList")
                     .then(data=>{
                         commit("MPSet",{state:"List",data})

                        return data;
                     })
       }
    }
}

vue-router路由设置规范

router组件应区分各个频道，框架要清晰明了，不在一个页面内引入过多对象，造成页面不易阅读，
模块引入方式使用webpack异步引入方式import( /* webpackChunkName: "AppMenu" */ '@/components/Layout/xxx')。webpackChunkName不应出现重复
使用exact:true 做精确匹配。

示例

import Vue from 'vue'
import Router from 'vue-router'
import pubIndex from "./index";
import pubVideo from "./video";
import pubMall from "./mall";
import pubMe from "./my";

Vue.use(Router)
const Routers = new Router({
    mode: "hash",
    routes: []
})

Routers.addRoutes(pubIndex);
Routers.addRoutes(pubVideo);
Routers.addRoutes(pubMall);
Routers.addRoutes(pubMe);
export default Routers;

ts 规范

使用'vue-property-decorator'组件开发
interface 需加注释说明哪个模块使用及功能说明
decorator 装饰器语法必须增加模块说明

git规范

在本地建立以自己名称命名的分支
切换到master分支后应该先pull服务器数据，防止后面到代码冲突和覆盖。
git commit 必须清晰描述当前任务
git stash 暂存前清除当前history 暂存后list查看是否存储，防止任务丢失。
git merge后查看是否有冲突并处理冲突后运行看下涉及冲突页面。
非必须不实用push -f 强制提交覆盖服务器仓库。

马贞晓 / templateVUE

Home

VUE项目前端规范

模块目录

文件引入规范

文件名、模块名，命名规范

环境变量名称规范

js规范

less使用规范

component模块规范

vuex 规范

vue-router路由设置规范

ts 规范

git规范

Home

VUE项目前端规范

模块目录

文件引入规范

文件名、模块名，命名规范

环境变量名称规范

js规范

less使用规范

component模块规范

vuex 规范

vue-router路由设置规范

ts 规范

git规范

New Wiki Page