前提条件:
安装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)
选择否