vue-cli3.0 下cube-ui的使用一

首先使用Vue-cli 3.0搭建Vue项目
一.环境安装

1. 安装Node.js(可以去官网下载:node.js下载地址）
2. 安装yarn
   npm i yarn -g
3. 安装vue-cli 3.0
   npm i @vue/cli -g
4. 最后一步安装vue-cli3.0
   npm i @vue/cli -g

二.Vue-cli3.0创建项目和配置选择

1. 使用Vue-cli3.0创建项目
   vue create vue-cube
   在这里我以vue-cube项目名为例
2. 选择配置项，我是选择自己配置的（第一个是默认，第二个是自己配置）

   

3. 选择项目需要的一些特性（此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试，暂时不考虑端到端测试(E2E Testing)

   

4. 选择Vue-router模式

   

   避免后期麻烦 我选择no,即是hash模式。

5. Css预处理器选择

   

   我选择了less

6. 选择ESLint的代码规范，此处使用 Standard代码规范

   

7. 选择何时进行代码检测，此处选择在保存时进行检测

   

8. 选择单元测试解决方案，此处选择 Jest

   

9. 选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择在package.json中保存

   

10. 将项目保存下来

    

三、安装cube-ui脚手架（参考：cube-ui Git Hub ）
cd vue-cube
vue add cube-ui

1. 是否后编译

   

2. 按需引入组件还是全部引入

   
   我选择了按需的

3. 是否自定义主题，使用后编译的情况下可用

   
   我选择更改主题 把主题的颜色改成自己产品设计主题色

4. rem 布局，使用后编译的情况下可用

   
   我选择rem弹性布局 直接上手px 就好了

5. 可选的 amfe-flexible, 也就是 lib-flexible 动态计算更新 rem 的值（注 2.x 版本）
   
6. cube-ui脚手架 搭建完成
   
   我们打开看一下文件结构吧

   
   可以直接在上面写页面了