基于vue cli 3.0建立前端项目并安装cube-ui

前提条件：
安装node.js。
国内的开发者最好先配置淘宝镜像。
以后用cnpm来代替npm命令。

项目建立过程：
打开cmd，输入命令进入目标工做空间，以本机项目为例：
cd /d d:
cd D:\workplace
输入全局安装vuecli的命令：cnpm install -g @vue/cli
输入检查vue版本的命令：vue --version
若是版本为3.0+，则继续。
输入建立项目的命令：vue create vue-sell-cube

会看到
? Your connection to the default npm registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? (Y/n)
就是问你要不要用淘宝镜像，国内的开发者输入y。

下一步配置预设，会看到可选择的界面
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features
按↓键选择手动设置，变成下图
? Please pick a preset:
default (babel, eslint)
> Manually select features

按回车进入设置，会看到可选择的界面，按空格勾选或取消勾选。
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
>( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
咱们要选中css pre-processors，babel，linter这三个预设

回车进入下一步选择css预处理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS
Less
> Stylus
选择stylus

选择eslint规则
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
选择标准配置

保存时lint仍是提交时lint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit (requires Git)
选择保存时

把预设配置存入相应文件仍是放入package.json
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
选择相应文件

是否保存预设配置，保存下次就不会再问你配置预设了
? Save this as a preset for future projects? (y/N)
输入n，不保存。

等待自动建立完毕。

进入建立好的项目文件夹，输入命令cd vue-sell-cube
测试是否正常可运行，输入npm run serve。打开浏览器输入（默认的端口）http://localhost:8080/
出现
Welcome to Your Vue.js App
For a guide and recipes on how to configure / customize this project,
check out the vue-cli documentation.
说明项目已经建立成功了。

 

cube-ui安装

输入命令安装 ：vue add cube-ui

是否进行后编译
? Use post-compile? (Y/n)
选择是，输入y

导入类型
? Import type (Use arrow keys)
> partly, import component on demand, which makes the size of imported code lighter
fully, import all the components
选择部分引用。

自定义主题？
? Custom theme? (Y/n)
选择是

使用rem？
? Use rem layout? (y/N)
选择否

使用vw？ ? Use vw layout? (y/N) 选择否