PS:之前通过前几章节的学习,介绍了vue-cli的使用,大家可以根据项目iv2下载,逐步理解vue-cli
通过vue项目实战iv3,深入理解vue-cli
喜欢就记得start一下,不胜感激!
风格
项目启用了eslint,主风格eslint配置使用了standard。
自定义:
- 项目使用tab(4个字符)进行缩进;
- 语句结尾必须使用分号。
UI组件库
本项目UI组件库使用element-ui
组件
命名规范:组件名称首字母必须大写,如果是多个单词组成,请使用驼峰法命名。
字体图标
项目中使用到的小图标,如果不是多色的,一律使用公司统一的字体图标iconfont。
引入方式,在index.html使用link方式直接引入alicn上的在线链接。
注意:如果设计师更新了UI图标后,需要更新链接,更新后链接地址会发生变化,需要重新更改。
换肤
目前支持三套风格:绿、红、蓝;
通过给html标签添加class类名来进行主题的切换;
绿:<font color="#01AE79">skin-01</font>
红:<font color="#FF6666">skin-02</font>
蓝:<font color="#0076FF">skin-03</font>
主题主要切换的就是一些字体颜色和背景颜色,在需要改变字体颜色的元素上添加类名theme-color,在需要改变背景颜色的元素上添加类名theme-bg。如果有主题图片的,需要另行处理。
整站更换字体
目前可更换的字体为宋体和黑体。
任何元素标签皆不可再单独设置字体,统一给body元素设置字体,子元素全部来继承body的字体样式。
通过给html元素添加类名来控制宋体的切换:
- font-simsun: 宋体
- font-simhei: 黑体
注意
- 项目打包过后的dist目录不需要提交;
- 不再使用npm run build来打包,请使用npm run deploy来打包并部署。
构建步骤
# 安装依赖
npm install | cnpm install
# 打开开发环境
npm run dev
# 打包
npm run build
# 打包并部署到tomcat目录
npm run deploy
项目目录
|- build webpack配置文件
|- config 项目打包配置
|- node_modules 项目依赖模块
|- src 项目源码目录
|----- assets 项目静态资源目录(图片资源、公共样式文件、公共js文件)
|----- components 组件
|----- router 路由配置
|----- App.vue 页面入口组件
|----- main.js 程序入口文件
|- static
|- .babelrc babel配置文件
|- .editorconfig 代码风格配置
|- .eslintignore eslint校验屏蔽设置
|- .eslintrc.js eslint配置文件
|- .gitignore git屏蔽设置
|— .postcssrc.js
|- index.html 入口html文件
|- package.json
|- README.md
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。