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

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文件,进行一些配置

猜你喜欢

转载自www.cnblogs.com/zhaobao1830/p/9978505.html