PS：之前通过前几章节的学习，介绍了

vue-cli的使用，大家可以根据项目 下载，逐步理解vue-cli

通过vue项目实战 ，深入理解

vue-cli

喜欢就记得

start一下,不胜感激！

风格

项目启用了eslint，主风格eslint配置使用了。

自定义：

• 项目使用tab（4个字符）进行缩进；
• 语句结尾必须使用分号。

UI组件库

本项目UI组件库使用

组件

命名规范：组件名称首字母必须大写，如果是多个单词组成，请使用驼峰法命名。

字体图标

项目中使用到的小图标，如果不是多色的，一律使用公司统一的字体图标。

引入方式，在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