饿了么项目使用cube-ui升级(1-2)

先看一下项目的目录结构,和之前的cli有比较大的差别,精简了很多

饿了么项目使用cube-ui升级(1-2)

 

 具体这个文档怎么修改项目配置可以参照文档

其中main.js还是项目的初始化js

postcss.config这个插件会根据.browserslistrc下面的配置决定给那些版本浏览器加前缀

饿了么项目使用cube-ui升级(1-2)

 

 .editorconfig 配置了eslink代码风格检查相关的配置

package.json和之前一样存放了项目的依赖,可以看出比之前精简

饿了么项目使用cube-ui升级(1-2)

 

 package-lock是版本管理所用的json文件

首先先安装cube-ui

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

官方文档:https://didi.github.io/cube-ui/#/zh-CN

由于cube-ui配置比较复杂,所以使用vue-cli自带的vue-cli-plugin-cube-ui来安装这个插件

使用vue add cube-ui来安装插件

 饿了么项目使用cube-ui升级(1-2)

 

 是否使用后编译:(可以减少体积,所以选择Y)

饿了么项目使用cube-ui升级(1-2)

 

选择部分引用

 饿了么项目使用cube-ui升级(1-2)

 

 饿了么项目使用cube-ui升级(1-2)

 

 安装完可以看到项目依赖已经添加cube-ui相关

饿了么项目使用cube-ui升级(1-2)

 

 饿了么项目使用cube-ui升级(1-2)

 

 在这里可以修改webpack的配置

饿了么项目使用cube-ui升级(1-2)

 

 到现在已经安装完CUBE-UI了,接下来可以正式开发项目了

 

和之前一样,首先引入mock数据

饿了么项目使用cube-ui升级(1-2)

 

在vue.config.js中配置

 饿了么项目使用cube-ui升级(1-2)

 

 最后重启服务器,拿到数据

饿了么项目使用cube-ui升级(1-2)

 

上一篇:Kylin的概述与架构


下一篇:饿了么项目使用cube-ui升级(1-1)