xiaopaopao_tianbo

A Vue.js project

Usage no npm install needed!

<script type="module">
  import xiaopaopaoTianbo from 'https://cdn.skypack.dev/xiaopaopao_tianbo';
</script>

README

项目介绍

这是一个基于elementui、vue-cli、axios的sass系统平台, 同时兼容IE9+,谷歌, 火狐等浏览器,

项目目录

在新建目录时请在开发规范中的项目目录上添加目录和目录备注.

APP-|
    |---build: 打包文件

    |---config: 配置文件
        |---dev.env.js:
        |---index.js:
        |---prod.env.js:

    |---src: 核心目录
        |---App.vue:    入口文件
        |---main.js:    全局配置
        |---api:        接口统一请求管理
        |---assets:     静态资源
        |---components: 公共组件
        |---router:     路由统一管理
        |---view:       视图文件

    |---static:

    |---.babelrc:

    |---.editorconfig:

    |---.gitignore:

    |---index.html:

    |---package.json:

      |---README.md:

项目资源

elementUI : 项目的UI框架

vue: vuejs

axios : AJAX

scss : SCSS

vuedraggable : 拖拽插件

开发约定

  1. components 必须是全局组件, 公共组件, 高复用性

  2. css统一使用scss

  3. 公共js必须在头部注释文件作用

  4. 公共js方法封装 必须简要注释作用

  5. 公共Scss写到"@/assets/style"中

  6. 字体图标使用</i>

  7. vue中的定义data必须写注释

命名规则

  1. js函数用小驼峰命名,比如: "getUser"

  2. scss命名用“-”分割,比如: "var-class"

  3. class命名为了方便后期的阅读,不要超过四个词, 比如:recom-footer-name-nav

  4. 所有字段命名必须以后端返回的字段为先,没有字段名前端才能自己命名

视图view目录创建规范

  view-|
       |---模块
            |---index.vue:组件
            |---components:组件
            |---目录
                 |---index.vue:组件
                 |---components:组件
                 |---目录
                      |---index.vue:组件
                      |---components:组件
                      |---目录
  1. 目录有视图, 组件, 目录组成, 不能超过三级目录

  2. 目录必须符合语义

开发格式

渲染 如 {{ item.name }}

变量赋值 var _that = this; 如

_that xxx = xxx;

1 for 循环 如 for (let i = 0; i < xx; i++) {

}

2判断 语句  	

if () {

} else {

}

3结束符号统一加 ; 
如 let token = localStorage.getItem('token');

4 循环渲染

{{ item.name }}

5 假数据 tab:[ { name: '费用&开票' }, { name: '开票记录' } ],

mounted() {

}