This package has been deprecated

Author message:

'no

doone

项目说明

项目说明文档

项目目录

• [dist] 项目打包输出目录
• [build] 项目自动化配置目录
  • build.js 生产环境资源打包
  • check-version.js 检查 node、npm 等版本
  • utils.js 构建工具相关
  • vue-loader.conf.js vue 文件配置
  • webpack.base.conf.js webpack 基础配置
  • webpack.dev.conf.js webpack 开发环境配置
  • webpack.prod.conf.js webpack 生产环境配置
• [config] 项目全局变量配置
  • index.js 项目配置文件
  • dev.env.js 开发环境变量
  • prod.env.js 生产环境变量
  • test.env.js 测试环境变量
• [src] 项目源码目录
  • [api] 请求接口目录
    • marketApi.js api 市场类接口
    • authApi.js 认证类接口
    • api.js 接口入口
  • [assets] 静态资源文件
    • [icons] 图标
    • [images] 页面图片
    • [styles] 样式
    • [common] 自定义公用样式组件目录
      • basic.less 公用基础类
      • import-lib-color.less 颜色变量
      • import-lib-var.less 全局变量
      • transition.less 动画过渡相关
      • my-elementui.less element 组件样式覆盖
    • [common] 后台公用样式类
  • [components] 公共组件目录 UI 组件
  • [directives] 自定义指令
  • [examples] 语言包
    • [components] 文档路由
    • [docs] md 文档内容
  • [lang] 语言包
  • [lib] 第三方按需引入包
  • [router] 路由配置，按钮模块配置路由
    • [admin] admin 模块，管理后台模块
    • [index] index 模块，即系统前台功能模块
    • [index.js] 路由主文件入口
  • [utils] 工具方法目录
    • fetch.js axios 请求拦截器
    • utils.js 工具方法封装
  • [views] 页面目录
    • [admin] 管理后台模块目录
    • [error] 异常提示页面
      • [404] 404
    • [index] 前台页面模块目录，按各功能分成子模块目录，目录中是页面对应的文件
      • [index] 首页
        • [images]
        • [less]
        • [vue]
  • [vuex] 项目数据状态管理目录
    • store.js
  • App.vue 根组件
  • main.js 入口 js 文件
• [statics] 纯静态资源，不会被 wabpack 构建。
• .editorconfig
• .eslintignore js 语法检查要排除的配置
• .eslintrc.js js 语法检查配置
• .gitignore.js git 文件排除同步配置
• .postcssrc.js
• index.html 入口页面
• package.json 项目打包描述文件
• readme.md 项目说明
• yarn.lock yarn 统一依赖包文件

为了在不同机器上得到一致的安装结果，yarn 需要比你配置在 package.json 文件中的依赖列表更多的信息。 yarn 需要知道每个安装的依赖包的准确的版本号。

项目相关命令

  // 安装全部依赖
  yarn (yarn install)
 
  // 添加依赖包
  // 生产环境
  yarn add <package>
  // 开发环境
  yarn add <package> -D
 
  // 移除依赖包
  yarn remove <package>
 
  // 本地运行
  yarn start (or yarn run dev)

项目开发规范

1. 使用 vsocde 做为开发工具，同时安装好 vuter 和 prettier，eslint 三个插件
2. 文件目录及文件均以驼峰命名，图片资源文件以小写字母+数字+下划线命名
3. eslint 配置已经规定开发中的语法规范，因此严格遵循 eslint 语法检查
4. 页面模块提供 index ，如 PageA 下提供 index ，在引用该页面模块时直接引用其文件名 import PageA from './PageA'，它会自动索引到 PageA 下的 index.vue 文件
5. vue 文件结构顺序为（使用文档最后的“vue 结构代码片断”创建）

    <template>
    ...
    </template>
 
    <script>
    // 属性顺序
    export default {
    name
    components
    props
    vuex
    data
    computed
    watch
    methods
    beforeCreate
    created
    beforeMount
    mounted
    }
    </script>
 
    <style>
    ...
    </style>

1. vue 文件引入其他文件 js、less，均不要加后缀，如下

import api form './api/api'

@import './common/common';

1. 路由 path 和 name 命名均用驼峰命名，如下

{
    path: 'addMember',
    name: 'addMember',
    mate: '添加会员',
    component: resolve =>require(['@/views/index/addMember'], resolve)
}

1. 注释规范，属性或函数注释使用多行注释，代码中注释用单行注释，如下（函数写完后在函数上边用注释快捷键可快速生成）

{
  /**
  * 属性说明
  */
  name:'',
  /**
  * 函数说明
  * @param {Number} a 参数说明
  * @param {Object} b 参数说明
  * @param {String} c 参数说明
  * @returns {String} 
  */
  func:function(a,b,c){
    // 打印a,b,c
    console.log(a,b,c)
  },
}

vue 结构代码片断

打开 vscode-文件-首选项-用户代码片，接着选择 vue.json，回车打开,将以下内容完全复制进去，并保存。接下来在新建 vue 文件的时候，输入 'vuebody'，然后按 tab 就会自动插入代码结构

{
  "vueBody": {
    "prefix": "vuebody",
    "body": [
      "<template>",
      "$1",
      "</template>",
      "<script>",
      "export default {",
      "  name:\"\",",
      "  componets:{",
      "",
      "  },",
      "  props:{",
      "",
      "  },",
      "  vuex:{",
      "",
      "  },",
      "  data(){",
      "",
      "  },",
      "  computed:{",
      "",
      "  },",
      "  watch:{",
      "",
      "  },",
      "  methods:{",
      "",
      "  },",
      "  beforeCreate(){",
      "",
      "  },",
      "  created(){",
      "",
      "  },",
      "  beforeMount(){",
      "",
      "  },",
      "  mounted(){",
      "",
      "  }",
      "}",
      "</script>",
      "<style lang=\"less\">",
      "",
      "</style>",
      ""
    ],
    "description": "vue结构，不需要的属性需删除"
  }
}

单页面、多页面配置

通过配置 config/index.js 中的 moduleName 来选择单页面应用还是多页面应用。单页面、多页面可随时互相切换，两者互不影响，路由须分开设置

单页面

• 默认为单页面（即 moduleName 为 null）

• 默认入口文件 src/main.js

多页面

• 设置多页面，须配置 moduleName 为项目页面所在文件夹，如设置为 views

• 需要在每个页面添加以 entry- 为前缀的入口 js 文件（为了避开项目已有 js 文件），还要添加与页面文件夹同名的 html模板

• 代码示例（如 admin 文件下）

  // 例：entry-admin.js
   
  import Vue from 'vue'
  import App from './index/index'
  // import ...
  new Vue({
    el: '#admin',
    components: {
      App
    },
    // ...,
    template: '<App/>'
  })

  <!-- 例：admin.html -->
   
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="shortcut icon" href="static/faviconsg.ico" type="image/x-icon">
  <title>admin</title>
  </head>
  <body>
  <div id="admin"></div>
  <!-- built files will be auto injected -->
  </body>
  </html>

四. 关于切换主题功能

使用方法

• 通过引入 ThemePicker 组件（组件后续根据项目需求调整样式及功能）添加切换主题功能（组件会列出当前提供的所有可切换主题）

• 通过调用 utils/common.js 中的 registerTheme 方法实现切换主题

主题添加、维护

• 主题统一存放于 static/theme 中，其中 default.less 为通用设置，剩余其他即为主要主题样式（根据需求添加主题文件）

• 通用设置 default.less

  /** 例：default.less **/
   
  /**
  * 通用设置
  * 必须是所有主题通用的，
  * 否则设置到对应主题中
  **/
  ::-webkit-scrollbar-thumb{background: @primaryColor}

• 主题设置

  /** 例：dark.less & light.less **/
   
  /**
  * 主题设置 -- dark.less
  **/
  // 主要
  @primaryColor: #000000;
   
  // 在变量声明后引入
  @import './default';
   
  // 布局
  .sidebar {
    width: 400px;
  }
   
  /* ------ 分割线 ------ */
   
  /**
  * 主题设置 -- light.less
  **/
  // 主要
  @primaryColor: #ffffff;
   
  // 在变量声明后引入
  @import './default';
   
  // 布局
  .sidebar {
    width: 200px;
  }