安装vue-cli 3或者最新版本搭建vue项目(1)

标签: vue

本人小菜鸟,升级全为学习使用,如有问题请指正。
项目为vue2
想要升级vue3 或者以上版本需要卸载vue2 不会对原项目造成影响(脚手架,生成本地文件后就没啥关系了)。

1.准备工作卸载

如果之前是vue1.x 或者 vue2.x的需要先卸载,后才能下载vue3及以上版本

  • 注意:如果卸载不了,就直接安装vue cli3,包直接安装就能覆盖掉
npm uninstall vue-cli -g 
//或者 
yarn global remove vue-cli
2.安装 vue cli3
npm install -g @vue/cli

官方建议,node.js的版本,需要是8.9或者以上(推荐是8.11.0+)
下载完成后 输入一下命令就可查阅版本:

vue -V
vue --version
3.创建项目
输入:vue create "项目名"
4.配置
  • 上一步操作回车后,它就开始问你很多问题:
    1.原来使用的源下载慢,是否切换为taobao,我选了Y
    2. defult  |  默认是vue2 的配置(babel eslint);
       Defult(vue 3 Preview)  | vue3 默认的配置;
       Manually select features | 手动配资;
       选择手动,回车 (按键盘的上下箭头)
    

在这里插入图片描述

勾选(按空格,再次按取消选中,A键是全选),切换按键盘的(箭头)
3.
	(*) Choose Vue version
	(*) Babel   解析es6,vue
	( ) TypeScript   开发语言
	( ) Progressive Web App (PWA) Support  离线应用的开发模式  可以不选
	(*) Router  需要勾选,vue路由  勾选
	(*) Vuex   状态管理 勾选
	(*) CSS Pre-processors  css预处理器  要否用sass/less 
	(*) Linter / Formatter  eslint 团队开发风格一致规范
	( ) Unit Testing 支持单元测试。
    ( ) E2E Testing 支持 E2E 测试
	确认勾选没问题,回车

在这里插入图片描述

路由模式 YES

在这里插入图片描述

4.是否使用history路由:n
5.选择css处理器:sass/scss
6.eslint  : 选择第三个标准的配置文件
何时检测:(*) Lint on save
 自动修复:(*) Lint and fix on commit

在这里插入图片描述

7.选择lint的配置文件如何存放:
(第一个是独立文件夹位置,第二个是在package.json文件里):In dedicated config files
8.是否保存本次创建项目的配置项,用于下次快速创建项目 :y
Save this as a preset for future projects? (y/N)
9.回车确定等待下载

在这里插入图片描述

** node-sass在下载中可能会出错,需要单独处理,如果出错使用命令:cnpm install node-sass 下载一遍 **
下载完成后如图:
在这里插入图片描述

5.启动

根据提示 先cd 到刚才创建的项目中
然后执行 yarn serve(我按装了yarn 选择时也选择的是yarn),即可启动项目

或是执行 vue ui 利用项目仪器表进行创建项目
看到如下界面就成功了:
启动成功界面

版权声明:本文为rbgg_mp原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/rbgg_mp/article/details/109623074

智能推荐

fluent-ffmpeg在electron框架中实现推流

需要准备这几个东西 electron框架 ffmpeg.exe应用程序 链接:https://pan.baidu.com/s/1TyzYlWG0p7cxpqrzziVRCA  提取码:ofd2(也可自行去官网下载) fluent-ffmpeg插件 一个rtmp流地址 首先要做以下几步操作 1.将ffmpeg.exe文件放到electron项目文件夹中 2.安装插件和electron框架并...

bireme数据源同步工具--debezium+kafka+bireme

1、介绍 Bireme 是一个 Greenplum / HashData 数据仓库的增量同步工具。目前支持 MySQL、PostgreSQL 和 MongoDB 数据源 官方介绍文档:https://github.com/HashDataInc/bireme/blob/master/README_zh-cn.md 1、数据流 Bireme 采用 DELETE + COPY 的方式,将数据源的修改记...

一致性hash算法

散列(hash)在我看来就是一个数组,而与数组不同的点在于数组是按顺序写入的,而hash是按照一定的hash算法确定元素在数组中的位置的。hash最难的问题在于会有冲突出现,如果两个object根据相应的hash算法得出的值一样便产生了hash冲突。在所有解决hash冲突的方法中,我最欣赏的是链式解决法,即将hash到同一位置的元素用链表连接。当然还有其它几种处理hash冲突的算法,比如建立公共溢...

OpenCV-Python learning-1.安装,图片读取显示

1. OpenCV与OpenGL区别 https://www.zhihu.com/question/20212016 一个是让机器识别东西的,OpenCV是给电脑做眼睛的。 一个是让机器计算出更好画面的,OpenGL用在游戏渲染方面很多。 OpenCV(Open Source Computer Vision Library)是一个基于(开源)发行的跨平台计算机视觉库,OpenGL(全写Open G...

Mycat+Mysql分布式架构改造和性能压力测试

架构实现 Mycat作为数据库高可用中间件具备很多的功能,如负载均衡,分库分表,读写分离,故障迁移等。结合项目的实际情况,分库分表功能对于关联查询有很高的要求,需要从业务角度考虑分库分表后的关联查询SQL的分析,业务代码动作较大,所以在此方案中我们不考虑分库分表。主要应用Mycat的负载均衡及故障迁移的功能即可。 整个架构改造包括两个部分,第一是单例Mysql改为多个Mysql,同时负载均衡,并且...

猜你喜欢

人脸识别之疲劳检测(二)阈值法、KNN分类和K-means聚类

Table of Contents 1、均值法 2、中值法 3、KNN 4、K-means 结合上一节在获得人眼特征点后需要对睁眼闭眼状态做出判断,方法的选择需要经验结合公平的评价方法,使用大量测试集得到不同方法下的精确度并做出比较: 1、均值法 50帧睁眼数据取均值,得到不同阈值下精确度。 2、中值法 50帧睁眼数据取中值,得到不同阈值下精确度。 3、KNN KNN是一种ML常用分类算法,通过测...

CodeForce Tic-Tac-Toe

Two bears are playing tic-tac-toe via mail. It's boring for them to play usual tic-tac-toe game, so they are a playing modified version of this game. Here are its rules. The game is played on the foll...

Python雾里看花-抽象类ABC (abstract base class)

首先认识模块 abc,python中没有提供抽象类与抽象方法,然而提供了内置模块abc来模拟实现抽象类,例如提供泛映射类型的抽象类 abc.MutableMapping 继承abc.MutableMapping构造一个泛映射类型(类似python中的dict) 当然继承abc.Mapping 也可以,毕竟MutableMapping是其子类 dict是python中典型的映射类型数据结构,其接口的...

python 文件操作

2, with open (‘xx.txt’,‘w’,encoding=‘utf-8’) as f: f.write(‘文件内容或对象’)...

【Python基础】使用统计函数绘制简单图形

机器学习算法与自然语言处理出品 @公众号原创专栏作者 冯夏冲 学校 | 哈工大SCIR实验室在读博士生 2.1 函数bar 用于绘制柱状图 2.2 函数barh 用于绘制条形图 2.3 函数hist 用于绘制直方图 直方图与柱状图的区别 函数pie 用于绘制饼图 2.5 函数polor 用于绘制极线图 极线图是在极坐标系上绘出的一种图。在极坐标系中,要确定一个点,需要指明这个点距原点的角...