README
项目说明
项目说明文档
项目目录
[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)
项目开发规范
- 使用
vsocde
做为开发工具,同时安装好vuter
和prettier
,eslint
三个插件 - 文件目录及文件均以驼峰命名,图片资源文件以小写字母+数字+下划线命名
- eslint 配置已经规定开发中的语法规范,因此严格遵循
eslint
语法检查 - 页面模块提供
index
,如PageA
下提供index
,在引用该页面模块时直接引用其文件名import PageA from './PageA'
,它会自动索引到PageA
下的index.vue
文件 vue
文件结构顺序为(使用文档最后的“vue 结构代码片断”创建)
<template>
...
</template>
<script>
// 属性顺序
export default {
name
components
props
vuex
data
computed
watch
methods
beforeCreate
created
beforeMount
mounted
}
</script>
<style>
...
</style>
- vue 文件引入其他文件
js
、less
,均不要加后缀,如下
import api form './api/api'
@import './common/common';
- 路由 path 和 name 命名均用驼峰命名,如下
{
path: 'addMember',
name: 'addMember',
mate: '添加会员',
component: resolve =>require(['@/views/index/addMember'], resolve)
}
- 注释规范,属性或函数注释使用多行注释,代码中注释用单行注释,如下(函数写完后在函数上边用注释快捷键可快速生成)
{
/**
* 属性说明
*/
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; }