项目说明
项目说明文档
项目目录
[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 add <package> // 开发环境 yarn add <package> -D // 移除依赖包 yarn remove <package> // 本地运行 yarn start
项目开发规范
- 使用
vsocde
做为开发工具,同时安装好vuter
和prettier
,eslint
三个插件 - 文件目录及文件均以驼峰命名,图片资源文件以小写字母+数字+下划线命名
- eslint 配置已经规定开发中的语法规范,因此严格遵循
eslint
语法检查 - 页面模块提供
index
,如PageA
下提供index
,在引用该页面模块时直接引用其文件名import PageA from './PageA'
,它会自动索引到PageA
下的index.vue
文件 vue
文件结构顺序为(使用文档最后的“vue 结构代码片断”创建)
<template> ... </template> <script> // 属性顺序 export default </script> <style> ... </style>
- vue 文件引入其他文件
js
、less
,均不要加后缀,如下
'./common/common';
- 路由 path 和 name 命名均用驼峰命名,如下
path: 'addMember' name: 'addMember' mate: '添加会员'
- 注释规范,属性或函数注释使用多行注释,代码中注释用单行注释,如下(函数写完后在函数上边用注释快捷键可快速生成)
/** * 属性说明 */ name:'' /** * 函数说明 * @param * @param * @param * @returns */ { // 打印a,b,c console }
vue 结构代码片断
打开 vscode-文件-首选项-用户代码片
,接着选择 vue.json
,回车打开,将以下内容完全复制进去,并保存。接下来在新建 vue
文件的时候,输入 'vuebody',然后按 tab
就会自动插入代码结构
单页面、多页面配置
通过配置 config/index.js
中的 moduleName
来选择单页面应用还是多页面应用。单页面、多页面可随时互相切换,两者互不影响,路由须分开设置
单页面
-
默认为单页面(即
moduleName
为null
) -
默认入口文件
src/main.js
多页面
-
设置多页面,须配置
moduleName
为项目页面所在文件夹,如设置为views
-
需要在每个页面添加以
entry-
为前缀的入口 js 文件(为了避开项目已有js
文件),还要添加与页面文件夹同名的html模板
-
代码示例(如 admin 文件下)
// 例:entry-admin.js// import ...el: '#admin'components:App// ...,template: '<App/>'<!-- 例:admin.html -->admin<!-- built files will be auto injected -->
四. 关于切换主题功能
使用方法
-
通过引入
ThemePicker
组件(组件后续根据项目需求调整样式及功能)添加切换主题功能(组件会列出当前提供的所有可切换主题) -
通过调用
utils/common.js
中的registerTheme
方法实现切换主题
主题添加、维护
-
主题统一存放于
static/theme
中,其中default.less
为通用设置,剩余其他即为主要主题样式(根据需求添加主题文件) -
通用设置
default.less
/** 例:default.less **//*** 通用设置* 必须是所有主题通用的,* 否则设置到对应主题中**/ -
主题设置
/** 例:dark.less & light.less **//*** 主题设置 -- dark.less**/// 主要@// 在变量声明后引入;// 布局/* ------ 分割线 ------ *//*** 主题设置 -- light.less**/// 主要@// 在变量声明后引入;// 布局