基于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)
选择否
 

猜你喜欢

转载自blog.csdn.net/qq_37828633/article/details/85276685