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

转载于:https://www.cnblogs.com/Dark-fire-liehuo/p/10469370.html

基于vue cli 3.0创建前端项目并安装cube-ui相关推荐

  1. 【哈士奇赠书活动 - 24期】-〖前端工程化:基于Vue.js 3.0的设计与实践〗

    文章目录 ⭐️ 赠书 - <前端工程化:基于Vue.js 3.0的设计与实践> ⭐️ 内容简介 ⭐️ 作者简介 ⭐️ 精彩书评 ⭐️ 赠书活动 → 获奖名单 ⭐️ 赠书 - <前端工 ...

  2. linux 使用ssr客户端_【第一期】基于 @vue/cli3 与 koa 创建 ssr 工程

    什么是基于同构代码的 SSR 服务(Server-side rendering based on isomorphic code) 首先,我们需要先明白什么是 spa (single page app ...

  3. Vue Cli 3.0打包生成app

    1.vue cli 3.0创建新工程,添加依赖mint-ui  ​ 2.项目配置中,公共路径设置为./,(注意,这一步非常重要,否则打包后项目找不到项目中文件) 修改保存后,可以看到vue.confi ...

  4. 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

  5. Vue CLI 3.0 正式发布,Vue.js 开发标准化工具

    Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时: 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践. V ...

  6. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  7. Vue CLI 3.0脚手架如何在本地配置mock数据json

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  8. 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因

    1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...

  9. Vue CLI 3.0正式发布!

    web前端教程 用大白话,来讲编程 网友们纷纷点赞,也有网友调侃学不动了! 尤雨溪表示,Vue CLI 3.0 与其他的版本完全不同,它经历了重构,目的是: 1.尽可能减少现代前端工具在配置上的烦恼, ...

最新文章

  1. 序列比对软件/比对工具的比较
  2. np.zeros(shape) 注意shape的规范格式为元组,不是list
  3. 爬取jd商城手机类商品图片
  4. PHP的异常处理异常捕获错误类
  5. php 自动验证类,Thinkphp实现自动验证和自动完成
  6. Java异常处理: 缺包 ClassNotFound javax/xml/bind/JAXBException
  7. 润乾报表鼠标移动行、单元格变色
  8. 对《构建之法——现代软件工程》13-17章的困惑与思考
  9. 淘宝客APP源码 社交电商uniapp开发源码 前端源码自营商城
  10. 获取抖音无水印视频地址
  11. 旋转变换(二)欧拉角
  12. source 还原数据库
  13. 计算机从外部世界接收信息和向外部世界反馈运算结果的手段
  14. excel 职位分析
  15. 既然选择了远方,便只顾风雨兼程
  16. windows PC/SC 常用Scard前缀函数说明
  17. kafka comsumer消费消息后不commit offset的情况分析
  18. 程序员公众号用什么工具写?
  19. 概率论的学习和整理8: 几何分布
  20. 小议移动订货之南北厂商

热门文章

  1. 记一次关于MySQL与PHP的蠢事
  2. Java程序员的日常—— 《编程思想》关于类的使用常识
  3. C++实现求解最大公约数和最小公倍数
  4. java uml 为什么_Java开发为什么需要UML
  5. 李进良/丁守谦:希望TD-LTE成为4G的统一标准
  6. [CF843D]Dynamic Shortest Path
  7. Linux内存初始化(一)
  8. 学习笔记:vsphere6 迁移物理机,指定被迁移的IP报错
  9. 《软件建模与设计: UML、用例、模式和软件体系结构》一一2.10 UML扩展机制
  10. [Eclipse] - Eclipse空格替换tab