前言

一、重新安装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-projectyarn serve

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

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

4. 使用typescript 形式编写项目

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

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

vue add @vue/typescript

5. 启动typescript项目

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

三、总结

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

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

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

vue2.0 项目搭建和vue 2.0 electron 项目搭建
1.关于electron vue 项目的搭建全局或者局部安装项目vue:脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electron ...
vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
vue简易微前端项目搭建（一）：项目背景及简介
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
超详细！！vue、vue-cli脚手架项目使用prerender-spa-plugin，解决SEO并为其添加title，keyWords，descript
vue.vue-cli脚手架项目使用prerender-spa-plugin,解决SEO并为其添加title,keyWords,descript 注意注意注意:本文章所有例举内容,页面均为纯静态页 ...
Vue 3.0 企业级项目实战
目录小册介绍 Vue 3.0 + Element Plus + Spring Boot 前后端分离实践,你不能错过! 小册须知你会学到什么? 适宜人群作者介绍小册介绍基于真实项目的实战开发, ...
vue+node.js+mysql项目搭建
前言用vue搭建前端页面.用node开发后端接口.数据库用mysql 可行性分析缺点: nodejs单线程,不能做cpu密集型操作,导致时间片不能释放,阻塞后面的任务. nodejs可靠性比较低, ...
GIT将本地项目上传到Github（两种简单、方便的方法）
GIT将本地项目上传到Github(两种简单.方便的方法) 一.第一种方法: 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安 ...
git学习（10）:Git的使用--如何将本地项目上传到Github（两种简单、方便的方法）
将本地项目上传到Github(两种简单.方便的方法) 一.第一种方法: 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装gi ...
在IIS上部署.net core的webapi项目以及502.5错误的两种解决方法
在IIS上部署.net core的webapi项目以及502.5错误的两种解决方法参考文章: (1)在IIS上部署.net core的webapi项目以及502.5错误的两种解决方法 (2)ht ...

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

前言

一、重新安装vue/cli

二、创建项目

1.创建空白项目

2.选择vue版本

3.启动项目

4. 使用typescript 形式编写项目

三、总结

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

最新文章

热门文章