Vue2 Vue3快速搭建项目框架


前言

Vue 是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。


一、Vue CLI

CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目,或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

二、安装CLI

1、安装命令

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

在这里插入图片描述

2、版本查看

vue --version
# OR
vue -V

在这里插入图片描述

3、版本升级

npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

三、创建项目

1、创建【Vue2.0】项目

1.1 、创建命令

vue create vue2-demo

在这里插入图片描述

1.2 、选择默认【Vue 2】选项

![在这里插入图片描述](https://img-blog.csdnimg.cn/9bd26e03c5124368a8a2093f107ec358.png

1.3 、【Vue 2】项目创建完成

在这里插入图片描述

2、创建【Vue3.0】项目

2.1 、创建命令

vue create vue3-demo

在这里插入图片描述

2.2 、选择默认【Vue 3】选项

在这里插入图片描述

2.3 、【Vue 3】项目创建完成

在这里插入图片描述

3、Manually select features

3.1 、创建命令

vue create vue3-demo

3.2、【Manually select features】

在这里插入图片描述

3.3、按需选取features

在这里插入图片描述

3.4、选择Vue版本

在这里插入图片描述

3.5、配置

在这里插入图片描述

3.6、项目创建完成

在这里插入图片描述

4、启动项目

4.1、启动命令

npm run serve
#OR
yarn serve

4.2、本地启动

http://localhost:8080
在这里插入图片描述

总结:如上记录了通过官方Vue Cli搭建Vue项目过程,包括Vue2.0、Vue3.0项目的搭建过程以及详细截图。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李 元 芳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值