vue 3.0 脚手架项目搭建(含javascpt和typescript两种)

目录

前言

一、重新安装vue/cli

二、创建项目

1.创建空白项目

2.选择vue版本

3.启动项目

三、总结

---

前言

提示：vue已经进入了3.0的时代，具体的优点大家可以自行百度搜索，相关UI框架也已经升级了其3.0的版本。官网文档地址：安装 | Vue.js

一、重新安装vue/cli

打开控制台，先执行清理缓存命令，防止发生异常错误，命令如下:

npm cache clean --force 

若不执行缓存清理命令可能会出现下面错误：

info There appears to be trouble with your network connection. Retrying...

执行后执行安装vue/cli命令，注意若为mac系统，请在yarn或npm前加sudo 以便获取系统权限。

windows系统下执行下面命令： 

yarn global add @vue/cli
# 或
npm install -g @vue/cli

mac系统执行下面命令：

sudo yarn global add @vue/cli
# 或
sudo npm install -g @vue/cli

执行命令后，等待几分钟后即可安装完成，推荐使用yarn，更方便快捷，安装完成后如下提示。

然后执行vue -V 查看一下脚手架版本，确定版本是4.5。

二、创建项目

1.创建空白项目

使用vue命令在指定项目目录下执行下面命令，创建vue项目：

vue create hello-project
# OR
vue ui

2.选择vue版本

这里我们选择vue3，使用键盘上下左右的下按键选中vue3，如图：

选中后按下回车键，等待项目创建完成，出现如下图所示则创建完成。

3.启动项目

控制台切换到项目目录并运行项目，依次执行下面命令：

 cd hello-project

 yarn serve

启动成功出现如下图所示：

---

浏览器中访问地址：http://localhost:8080/ ，页面如下：

4. 使用typescript 形式编写项目

在使用上述步骤后搭建的项目是使用javascript 形式来编写项目的，那么我们也可以选择使用typescript的形式来编写项目。

切换到项目根目录，执行命令

vue add @vue/typescript

5. 启动typescript项目

同样使用命令yarn serve启动即可

三、总结

到此，我们已经完成了vue3.0脚手架形式搭建项目的过程，只要按照我们的操作步骤一步一步执行即可。

提醒：对于小白来说脚手架搭建可能会存在问题，小白请确定已经安装了nodejs后再按照本教程操作。