首页 > 其他分享 >vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建

vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建

时间:2024-10-31 15:48:16浏览次数:4  
标签:vue cli 版本号 创建 版本 vite

@

目录

一、vue2、vue3、vue-cli版本、vue-router版本的关联关系

1.说明

1. Vue CLI 4.5以下,对应的是Vue2;Vue CLI 4.5及以上,对应的是Vue3,当然,创建项目的时候可以选择Vue2
2. Vue2最老的版本是含index.html的,通过“yarn global add vue-cli”安装,得到的最新版本号是2.9.6
3. 只有Vue2不含Vue3的版本范围是3.3.0~4.4.6,通过“yarn global add @vue/cli”安装,生成的项目不含index.html
4. Vue3版本最低版本号是4.5.0,通过“yarn global add @vue/cli”安装,可以选择创建vue2.x还是vue3.x

2.不同版本的vue对应的vue-router版本和vuex版本

  • vue版本是2.9.6时,对应的vue-router版本是3.0.1、vuex版本号是未知
  • vue版本是3.11.0时,对应的vue-router版本号是3.5.1、vuex版本号是3.6.2
  • vue版本是4.4.6时,对应的vue-router版本号是3.2.0、vuex的版本号是3.4.0
  • vue版本是4.5.0时,创建的vue2项目对应的vue-router版本号是4.0.0-0、vuex的版本号是4.0.0-0;创建的vue3项目对应的vue-router版本号是3.2.0、vuex的版本号是3.4.0。
  • vue版本5.0.8

二、创建Vue3.0工程

1.使用 vue-cli 创建

官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

2.使用 vite 创建

官方文档:https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网:https://vitejs.cn

  • 什么是vite?—— 新一代前端构建工具。
  • 优势如下:
    • 开发环境中,无需打包操作,可快速的冷启动。
    • 轻量快速的热重载(HMR)。
    • 真正的按需编译,不再等待整个应用编译完成。
  • 传统构建 与 vite构建对比图

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

标签:vue,cli,版本号,创建,版本,vite
From: https://www.cnblogs.com/bigcat26/p/18517997

相关文章

  • Ant Design Vue 的 a-table 行选择分页时bug处理
    有bug的伪代码如下(示例以id来作为rowKey):<a-table:row-selection="{selectedRowKeys:selectedRowKeys,onChange:onSelectChange}":columns="columns"rowKey="id":pagination="pagination":data-source=&q......
  • Vue组件化-插槽Slot
    认识插槽Slot如何使用插槽slot?插槽的默认内容多个插槽的效果具名插槽的使用◼事实上,我们希望达到的效果是插槽对应的显示,这个时候我们就可以使用具名插槽:具名插槽顾名思义就是给插槽起一个名字,<slot>元素有一个特殊的attribute:name;一个不带name的slot,会带有隐......
  • 阿里云 K8S ACK服务 创建使用教程
    目录1.1  阿里云容器服务ACK介绍和创建1.1.1 什么是容器服务Kubernetes版?1.1.2 创建专有版Kubernetes集群1.1.3 访问专有版Kubernetes集群1.1.4在专有版ACK集群创建资源并访问通过百度网盘分享的文件:第12章-阿里云托管k8s集群ACK创建和使用链接:https://pan.ba......
  • python 自动将歌曲按照歌手分类创建软链接
    要使用Python获取MP3文件的信息,可以使用pymediainfo包。首先,你需要安装pymediainfo。下面是获取一首歌曲信息的例子"""Moduletodemonstratehowtouse`pymediainfo`toreadmetadatafromamediafile.Inthismodule,wereadthemetadataofagivenMP3fileand......
  • Vue3+Elementplus+Univer-Sheet实现在线excel及其需要注意的点
    1、准备项目环境Vue3自行准备node.js环境2、ElementPlus官网官网安装教程自行参照官网3、Univer插件官网1)官网网址2)开始直接点击GetStarted侧边栏点击  后面直接按照教程走即可 4、配置插件需要注意如果上述插件包已经下载并成功引入vue......
  • 基于SpringBoot+MySQL+SSM+Vue.js的交友系统(附论文)
    获取见最下方名片信息获取见最下方名片信息获取见最下方名片信息演示视频基于SpringBoot+MySQL+SSM+Vue.js的交友系统(附论文)技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoo......
  • 基于SpringBoot+MySQL+SSM+Vue.js的宠物猫售卖管理
    获取见最下方名片获取见最下方名片获取见最下方名片演示视频基于SpringBoot+MySQL+SSM+Vue.js的宠物猫售卖管理技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoot文字描述基......
  • Adobe Acrobat Pro 2024 v24.3.20180 (macOS, Windows) - 创建、转换和编辑 PDF
    AdobeAcrobatPro2024v24.3.20180(macOS,Windows)-创建、转换和编辑PDFAdobeAcrobatPDFsoftware请访问原文链接:https://sysin.org/blog/adobe-acrobat查看最新版。原创作品,转载请保留出处。作者主页:sysin.orgAcrobat:创建、转换和编辑PDF借助Acrobat实现各种......
  • 基于node.js+vue基于Android的中学生成绩管理系统前(开题+程序+论文)计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于中学生成绩管理系统的研究,现有研究主要以传统的桌面应用或网页端应用为主,专门针对Android平台的中学生成绩管理系统的研究较少。在国内外,教育信息化......
  • 基于node.js+vue基于Android平台的上门诊疗app前(开题+程序+论文)计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景随着移动互联网技术的飞速发展,智能手机在人们生活中的普及程度越来越高。在医疗领域,利用移动平台改善医疗服务的需求日益增长。关于医疗服务的信息化研......