首页 > 其他 > 详细

饿了么vue-cli3.0+cube-ui笔记

时间:2018-11-18 18:07:50      阅读:1380      评论:0      收藏:0      [点我收藏+]

1、目录结构

技术分享图片

模板文件是public里的index.html,运行项目的时候,会引用src/main.js(入口文件)

详细文档在这里:https://cli.vuejs.org/zh/config/#pwa

public:放着html模板和静态资源,public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中,资源链接会被自动注入。

.browserslistrc 指定浏览器版本。不同的浏览器会有兼容性问题,比如css,我们会给它们加上前缀,这个文件是为postcss的Autoprefixer 插件使用的

postcss.config.js 里的autoprefixer就是依据.browserslistrc文件加前缀

.eslintrc.js  eslint的相关配置

babel.config.js  预设

package.json 各种依赖

package-lock.json 锁版本 管理版本的文件

 

cube-ui插件

https://github.com/didi/cube-ui

后编译:就是我们做项目的时候使用的是 源代码,只有打包运行后,才会进行编译。好处是节省构建包的体积,做完项目后,可以把不用的引入删掉,这样打包的时候,就指挥

打包那些我们使用的模块

在vue-cli3.0的项目里,直接使用vue add cube-ui 就可以安装

是否使用后编译

技术分享图片   

是用部分引入还是全部引入,上面的选择是部分引入

技术分享图片 

自定义主题是否需要(选择是,因为我们的项目的颜色一般都与插件的不一样)

技术分享图片

安装完以后,下面是修改和添加的文件

技术分享图片

cube-ui.js 管理cube-ui模块的引入

 theme.styl 管理cube-ui的颜色(修改颜色可以在这里面进行修改)

 技术分享图片

表示可以直接引入cube-ui的源码

vue.config.js  类似以前的webpack.js文件,进行一些配置

饿了么vue-cli3.0+cube-ui笔记

原文:https://www.cnblogs.com/zhaobao1830/p/9978505.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!