脚本宝典收集整理的这篇文章主要介绍了vue2.0学习笔记(九):vue项目实战--持续更新(1),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
PS:之前通过前几章节的学习,介绍了vue-cli的使用,大家可以根据项目iv2下载,逐步理解vue-cli
通过vue项目实战iv3,深入理解vue-cli
喜欢就记得start一下,不胜感激!
项目启用了eslint,主风格eslint配置使用了standard。
自定义:
本项目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元素添加类名来控制宋体的切换:
# 安装依赖
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
以上是脚本宝典为你收集整理的vue2.0学习笔记(九):vue项目实战--持续更新(1)全部内容,希望文章能够帮你解决vue2.0学习笔记(九):vue项目实战--持续更新(1)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。