安装vue-cli3.x版本步骤以及怎么使用vue-cli3.x创建项目

最新推荐文章于 2024-12-17 11:34:29 发布

原创最新推荐文章于 2024-12-17 11:34:29 发布 · 2.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5 #node.js

本文详细介绍了如何安装vue-cli3.x及其卸载、安装步骤，并演示了使用vue-cli3.x创建项目的过程，包括手动配置项目选项，如路由模式、CSS预处理和配置文件位置的选择。创建完成后，提醒读者在正确目录下启动项目并访问localhost:8080进行查看。

如何安装vue-cli 3.x以及怎么使用vue-cli3.x创建项目

安装vue-cli3.x步骤

安装vue-cli3.x版本前，先查看下你的电脑是否安装过vue-cli或是安装过vue-cli2.x版本

```
  	vue --version / vue -V
```

如果有vue-cli2.x版本，需要先卸载才能安装vue-cli3.x，卸载完成后就可以安装vue-cli3.x版本咯

```
  	npm uninstall vue-cli -g
```

安装vue-cli3.x版本

```
  	npm install -g @vue/cli 
```

查看下是否安装成功

```
  	vue --version / vue -V 
```

安装完vue-cli3.x版本vue-cli2.x版本就被覆盖掉了

使用vue-cli3.x创建项目

打开命令行窗口

```
 	window+R 
```

如果是在桌面创建项目就cd Desktop 进入桌面输入

```
 	vue create 项目名称
```

如果是在已经创建好的目录中cd 加目录名，进入到项目的目录中输入

```
 	vue create .
```

输入命令按回车键，这里会让你选择是默认的(default)还是手动的(Manually) ,按键盘上的上下键就可以选择默认的(default)还是手动的(Manually)
如果选择默认的(default)，一直回车执行下去就可以了
选择手动的(Manually)回车:
按键盘上的上下键，选择手动的(Manually)
在这里插入图片描述

选项配置看个人项目的需求

	空格键是选中与取消，A键是全选
	TypeScript 支持使用 TypeScript 书写源码
	Progressive Web App (PWA) Support PWA 支持。
	Router 支持 vue-router 。
	Vuex 支持 vuex 。
	CSS Pre-processors 支持 CSS 预处理器。
	Linter / Formatter 支持代码风格检查和格式化。
	Unit Testing 支持单元测试。
	E2E Testing 支持 E2E 测试。

根据项目我选择下面这样的
在这里插入图片描述
回车后，告诉router路由是使用history模式还是hash模式，这里我选择hash模式，所以我输入no

之后是css的预处理，我选择的是sass

这个是配置文件存放的地方，第一个是独立的文件夹位置，第二个是是在package.json文件里
这里我选择第一个
在这里插入图片描述
回车后有个选择Y/N，这步是告诉你是否保存这次所选好的步骤，输入y就是保存，那么下次再创建项目时直接回=会有个选项，选择那个选项直接回车就可以，输入n就是不保存这次的选择步骤，在下次创建项目时，要自己重新选择配置
这里我选择n，然后直接回车就安装成功啦

在这里插入图片描述
安装成功后，启动项目

注意：启动项目时，一定要注意是否在项目目录中启动的

  	cd my-project //进入到项目目录
  	yarn serve  //启动项目

在这里插入图片描述
在浏览器访问localhost：8080即可

vue-cli3.0的目录比2.0简洁了很多，没了build和config等目录。若需要其他配置则需要自己手动配置了呢

如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具
npm install -g @vue/cli-init
vue init webpack my-project