vue2.0学习笔记（九）：vue项目实战--持续更新（1）

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