共计 753 个字符,预计需要花费 2 分钟才能阅读完成。
首先使用 Vue-cli 3.0 搭建 Vue 项目
一. 环境安装
- 安装 Node.js(可以去官网下载:node.js 下载地址)
- 安装 yarn
npm i yarn -g
- 安装 vue-cli 3.0
npm i @vue/cli -g
- 最后一步安装 vue-cli3.0
npm i @vue/cli -g
二.Vue-cli3.0 创建项目和配置选择
- 使用 Vue-cli3.0 创建项目
vue create vue-cube
在这里我以 vue-cube 项目名为例 - 选择配置项,我是选择自己配置的(第一个是默认,第二个是自己配置)
- 选择项目需要的一些特性(此处我们选择需要 Babel 编译、使用 Vue 路由、Vue 状态管理器、CSS 预处理器、代码检测和格式化、以及单元测试,暂时不考虑端到端测试(E2E Testing)
- 选择 Vue-router 模式
避免后期麻烦 我选择 no, 即是 hash 模式。
- Css 预处理器选择
我选择了 less
- 选择 ESLint 的代码规范,此处使用 Standard 代码规范
- 选择何时进行代码检测,此处选择在保存时进行检测
- 选择单元测试解决方案,此处选择 Jest
- 选择 Babel、PostCSS、ESLint 等配置文件存放位置,此处选择在 package.json 中保存
- 将项目保存下来
三、安装 cube-ui 脚手架(参考:cube-ui Git Hub)cd vue-cube
vue add cube-ui
- 是否后编译
- 按需引入组件还是全部引入
我选择了按需的 - 是否自定义主题,使用后编译的情况下可用
我选择更改主题 把主题的颜色改成自己产品设计主题色 - rem 布局,使用后编译的情况下可用
我选择 rem 弹性布局 直接上手 px 就好了 - 可选的 amfe-flexible, 也就是 lib-flexible 动态计算更新 rem 的值(注 2.x 版本)
- cube-ui 脚手架 搭建完成
我们打开看一下文件结构吧
可以直接在上面写页面了
正文完