基于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)
选择否
基于vue cli 3.0创建前端项目并安装cube-ui的更多相关文章
- vue cli 3.0创建项目
.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- VUE CLI 3.0 安装及创建项目
一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/ 详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- Vue Cli 3:创建项目
一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- 基于Vue、web3的以太坊项目开发及交易内幕初探 错误解决总结
基于Vue.web3的以太坊项目开发及交易内幕初探 本文通过宏观和微观两个层面窥探以太坊底层执行逻辑. 宏观层面描述创建并运行一个小型带钱包的发币APP的过程,微观层面是顺藤摸瓜从http api深入 ...
- 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
- vue cli 4.0.5 的使用
vue cli 4.0.5 的使用 现在的 vue 脚手架已经升级到4.0的版本了,前两日vue 刚发布了3.0版本,我看了一下cli 4 和cli 3 没什么区别,既然这样,就只总结一下vue cl ...
随机推荐
- 新建swap分区的规划、挂载和自动挂载示例
注:来自Linux系统管理_磁盘分区和格式化的扩展 Linux系统管理_磁盘分区和格式化:http://murongqingqqq.blog.51cto.com/2902694/1361918 思路: ...
- Maven pom.xml中的元素modules、parent、properties以及import
前言 项目中用到了maven,而且用到的内容不像利用maven/eclipse搭建ssm(spring+spring mvc+mybatis)用的那么简单:maven的核心是pom.xml,那么我就它 ...
- Angular5 路由守卫
今年下半年一直很忙,没有多少时间来写博客,很多笔记都记在了本地一起提交到了git上边. 夏末的时候做的两个vue项目中有接触到vue的路由守卫,今天在另外一个angular上,发现路由守卫有异常,导致 ...
- 微信小程序支付,带java源码
先说下这个的背景吧... 本人是做java后端的,自认为还有很大的发展空间(嘻嘻,你懂的),看过一段时间的小程序可是没有支付成功...最近公司要做小程序项目,老大让我看下小程序,折腾了好几天,参照着h ...
- web框架开发-分页器(Paginator)
Django有自带的分页器,可以将数据分在不同的页面中,并提供一些属性和方法实现对分页数据的操作.分页功能的类位于django/core/paginator.py中. 常用方法 # 分页器 # pag ...
- [LeetCode] 7. 整数反转
题目链接:https://leetcode-cn.com/problems/reverse-integer/ 题目描述: 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 ...
- Linux实战教学笔记50:Zabbix监控平台3.2.4(二)深入理解zabbix
https://www.cnblogs.com/chensiqiqi/p/9162986.html 一,Zabbix Web操作深入 1.1 Zabbix Web下的主机和模版以及监控项的添加方式 ( ...
- Python两大佬互相撕逼 技术何苦为难技术?
最近两天 Python 圈发生了一件大事,两个 Python 大佬撕逼了起来了. 不,其实是一个大佬(刘志军)被怼. 事情是这样的. 背景 人物介绍: 董明伟:公众号「Python 之美」的作者,似乎 ...
- 通过secureCRT连接虚拟机VMware workstation问题记录
很急没有使用虚拟机了,今天再登录的时候,发现用secureCRT连接不上VMware workstation 1.连接步骤: 1)打开secureCRT,点击+ 新建一个连接 2)按照流程一步一步配置 ...
- PTA 天梯赛练习 7-11 玩转二叉树-二叉树重建
以前就思考过这个问题,但是没有深入的想过,这是一种叫二叉树重建的典型题目 如果给出中序和前序,求出后序遍历. 这道题则求的是交换儿子节点的层序遍历. 二叉树的重建应该怎么重建,首先我们知道,先根遍历, ...