vuecli30-下cubeui的使用一

首先使用 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 脚手架 搭建完成
   
   我们打开看一下文件结构吧

   
   可以直接在上面写页面了