You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
160 lines
5.4 KiB
160 lines
5.4 KiB
2 years ago
|
## 运行步骤
|
||
|
- 安装共享目录下的node.js,一路下一步
|
||
|
- 配置环境变量。node -v正常显示版本即配置成功
|
||
|
- 配置淘宝镜像 npm config set registry https://registry.npm.taobao.org;
|
||
|
- 使用VsCode打开项目,执行npm i命令,待装包完成
|
||
|
- 执行npm run dev命令,启动项目
|
||
|
|
||
|
## 插件安装
|
||
|
- Chinese (Simplified) Language Pack for Visual Studio Code:中文插件。前端开发不要求全英文环境
|
||
|
- ESLint:js严格语法检查插件
|
||
|
- Vetur:vue语法 代码高亮插件
|
||
|
- vscode-icons:包结构插件
|
||
|
|
||
|
## 编辑器配置
|
||
|
-- 开启ESlint后,需要配置编辑器自动纠错功能。开发中禁止使用 alt+shift+f 进行代码格式化
|
||
|
```json
|
||
|
{
|
||
|
"vetur.format.defaultFormatter.js": "vscode-typescript",
|
||
|
"editor.tabSize": 2,
|
||
|
"files.associations": {
|
||
|
"*.vue": "vue"
|
||
|
},
|
||
|
"eslint.autoFixOnSave": true,
|
||
|
"eslint.options": {
|
||
|
"extensions": [
|
||
|
".js",
|
||
|
".vue"
|
||
|
]
|
||
|
},
|
||
|
"eslint.validate": [
|
||
|
"javascript",
|
||
|
{
|
||
|
"language": "vue",
|
||
|
"autoFix": true
|
||
|
},
|
||
|
"html",
|
||
|
"vue"
|
||
|
],
|
||
|
"search.exclude": {
|
||
|
"**/node_modules": true,
|
||
|
"**/bower_components": true,
|
||
|
"**/dist": true
|
||
|
},
|
||
|
"emmet.syntaxProfiles": {
|
||
|
"javascript": "jsx",
|
||
|
"vue": "html",
|
||
|
"vue-html": "html"
|
||
|
},
|
||
|
"git.confirmSync": false,
|
||
|
"window.zoomLevel": 0,
|
||
|
"editor.cursorBlinking": "smooth",
|
||
|
"editor.minimap.enabled": true,
|
||
|
"editor.minimap.renderCharacters": false,
|
||
|
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
|
||
|
"editor.codeLens": true,
|
||
|
"editor.snippetSuggestions": "top",
|
||
|
"git.autofetch": true
|
||
|
}
|
||
|
```
|
||
|
|
||
|
## git规范
|
||
|
* 项目中需自己创建分支,开发全部在自己的分支上进行开发
|
||
|
* 一个版本发布后,开发人员需要重新拉取master分支到自己分支进行开发
|
||
|
* 代码提交之前请自己测试至少两遍,确认代码无误之后进行提交。
|
||
|
* 每次提交必须说明本次提交所做了哪些东西,格式:新增|更新|删除|修复|临时|干了什么。如新增|添加了用户模块(格式不强制,能体现出干了什么就行)
|
||
|
|
||
|
## 参数规范
|
||
|
* 前端参数传递形式统一以json形式
|
||
|
* 后端统一以Result包装json格式
|
||
|
* 后端接口严格遵守RESTFUL规范。
|
||
|
|
||
|
## Page参数规范
|
||
|
* columns属性:为定制查询列的属性,是一个数组。前端通过传递columns属性,可以自定义需要查询的列。支持下划线规范和驼峰规范,建议使用驼峰规范。
|
||
|
* params属性:params参数为查询条件构造器。条件名_属性名(驼峰规则),如 **like_stuName:"杨"**,后台会处理拼接成 **stu_name like '%杨%'** 。如果没有前缀,则视为 **stu_name='杨'**。条件构造以及含义如下:
|
||
|
- in:值为数组或者英文逗号隔开的字符串,表示查询指定的值列表的数据
|
||
|
- gt:大于
|
||
|
- lt:小于
|
||
|
- gte:大于等于
|
||
|
- lte:小于等于
|
||
|
- eq:等于
|
||
|
- btw:使用~,-,/隔开,表示在这两个数值之间
|
||
|
- like:模糊查询
|
||
|
- null:true为空,false不为空
|
||
|
- not:不等于
|
||
|
- notin:相当于in的否定
|
||
|
- join:保留关键字,后续拓展连表查询
|
||
|
|
||
|
## 调试代码
|
||
|
- 浏览页面使用火狐浏览器或者谷歌浏览器
|
||
|
- 谷歌浏览器安装 [vue-devtool](https://www.cnblogs.com/alice-fee/p/8038367.html)
|
||
|
- 火狐浏览器安装 vue-devtool:直接上扩展组件搜索
|
||
|
|
||
|
## 相关文档
|
||
|
- [vue](https://cn.vuejs.org/v2/guide/),构建数据驱动的 web 界面的渐进式框架
|
||
|
- [vue-router](https://router.vuejs.org/zh-cn/),vue 路由管理
|
||
|
- [ECMAScript 6](http://es6.ruanyifeng.com/),JavaScript 语言的下一代标准
|
||
|
- [ESLint](http://eslint.cn/docs/user-guide/configuring),用于统一 JS 代码风格
|
||
|
- [JavaScript Standard Style](https://standardjs.com/readme-zhtw.html),JS 编码风格规范,用于 ESLint
|
||
|
- [element-ui](http://element.eleme.io/#/zh-CN/component/installation),UI 框架
|
||
|
- [Vuex](https://vuex.vuejs.org/zh-cn/),vue 状态管理
|
||
|
- [axios](https://github.com/mzabriskie/axios),ajax 库
|
||
|
- [webpack](http://webpack.github.io/),前端打包工具
|
||
|
|
||
|
## 发布
|
||
|
```bash
|
||
|
# 构建测试环境
|
||
|
npm run build:test
|
||
|
|
||
|
# 构建生产环境
|
||
|
npm run build:prod
|
||
|
```
|
||
|
|
||
|
## 其它
|
||
|
|
||
|
```bash
|
||
|
# 预览发布环境效果
|
||
|
npm run preview
|
||
|
|
||
|
# 预览发布环境效果 + 静态资源分析
|
||
|
npm run preview -- --report
|
||
|
|
||
|
# 代码格式检查
|
||
|
npm run lint
|
||
|
|
||
|
# 代码格式检查并自动修复
|
||
|
npm run lint -- --fix
|
||
|
```
|
||
|
|
||
|
## 项目结构
|
||
|
```bash
|
||
|
├─.env.development // 开发环境全局常量
|
||
|
├─.env.production //生产环境全局常量
|
||
|
├─.env.staging // 测试环境全局常量
|
||
|
├─.gitignore // git忽略文件
|
||
|
├─babel.config.js // babel
|
||
|
├─vue.config.js // vue-cli 3.x 配置文件
|
||
|
├─src
|
||
|
| ├─App.vue // 主组件
|
||
|
| ├─main.js // 入口文件
|
||
|
| ├─permission.js // 登录校验
|
||
|
| ├─settings.js // 系统配置文件
|
||
|
| ├─views // 页面组件
|
||
|
| ├─vendor //
|
||
|
| ├─utils // 工具
|
||
|
| ├─styles // 样式
|
||
|
| ├─store // vuex
|
||
|
| ├─router // 路由
|
||
|
| ├─layout // 项目布局
|
||
|
| ├─icons // 图标,已废弃
|
||
|
| ├─filters // 过滤器
|
||
|
| ├─directive // 自定义指令
|
||
|
| ├─components // 供复用的组件
|
||
|
| ├─assets // 资源文件
|
||
|
| ├─api // 接口
|
||
|
├─public // 公共目录
|
||
|
| ├─favicon.ico
|
||
|
| └index.html
|
||
|
├─build // 打包脚本
|
||
|
| └index.js
|
||
|
```
|