「Vue3系列」Vue3简介及安装

文章目录

一、Vue3简介

Vue3是Vue.js框架的第三个主要版本,于2020年9月18日发布,代号为"One Piece"。Vue3在性能、体积、TypeScript支持、API设计等方面都有显著的提升和改变。

  1. 性能提升:Vue3通过源码的升级,如使用Proxy代替defineProperty实现响应式,重写虚拟DOM的实现和Tree-Shaking,使得打包大小减少了41%,初次渲染速度提升了55%,更新渲染速度提升了133%,内存减少了54%。
  2. 体积更小:Vue3通过优化和减少不必要的代码,使得其体积更小,更适合现代前端项目的需求。
  3. 更好的TypeScript支持:Vue3可以更好的支持TypeScript,使得开发者能够更方便地使用类型检查和自动补全等功能,提高开发效率和代码质量。
  4. 新的API设计:Vue3引入了新的Composition API,使得代码更加灵活和可维护。同时,Vue3也保留了Options API,使得开发者可以根据自己的需求选择使用哪种API。
  5. 其他改变:Vue3还引入了一些其他的改变,如新的生命周期钩子、data选项应始终被声明为一个函数等。这些改变都是为了更好地满足现代前端项目的需求和提高开发效率。

二、Vue3安装

Vue3的安装可以通过以下步骤进行:

  1. 安装Node.js:首先,你需要在你的计算机上安装Node.js。你可以在Node.js的官方网站(https://nodejs.org/)上下载并安装适合你操作系统的版本。请注意,Vue3需要Node.js 16.17.0或更高版本,因此请确保你安装的是兼容的版本。
  2. 使用npm或yarn安装Vue3:在你的项目目录中,打开终端或命令提示符,然后运行以下命令来安装Vue3:
  • 使用npm:npm install vue@next
  • 使用yarn:yarn add vue@next

这些命令将下载并安装Vue3及其相关依赖项。

  1. 创建一个Vue3项目:你可以使用Vue CLI来创建一个新的Vue3项目。首先,你需要全局安装Vue CLI。在终端或命令提示符中运行以下命令:
  • 使用npm:npm install -g @vue/cli
  • 使用yarn:yarn global add @vue/cli

安装完成后,你可以使用Vue CLI来创建一个新的Vue3项目。在终端或命令提示符中导航到你想要创建项目的目录,然后运行以下命令:vue create my-project。这将创建一个名为"my-project"的新Vue3项目。

  1. 启动项目:进入你的项目目录,然后运行以下命令来启动开发服务器:
  • cd my-project
  • npm run serveyarn serve

这将启动一个本地开发服务器,你可以在浏览器中访问http://localhost:8080来查看你的Vue3应用程序。

三、Vue3应用案例

首先,确保你已经安装了 Node.js 和 Vue CLI。然后按照之前的步骤创建一个新的 Vue3 项目,或者直接在你现有的 Vue3 项目中进行操作。

  1. 创建计数器组件

src/components 目录下创建一个名为 Counter.vue 的文件,并输入以下代码:

vue 复制代码
<template>
  <div>
    <p>当前计数:{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
};
</script>
  1. 在 App 组件中使用计数器组件

打开 src/App.vue 文件,并更新它以包含 Counter 组件:

vue 复制代码
<template>
  <div id="app">
    <Counter />
  </div>
</template>

<script>
import Counter from './components/Counter.vue';

export default {
  name: 'App',
  components: {
    Counter
  }
};
</script>
  1. 运行你的 Vue3 应用

回到你的项目根目录,并运行以下命令来启动开发服务器:

bash 复制代码
npm run serve

或者如果你使用的是 yarn:

bash 复制代码
yarn serve

浏览器将自动打开,并显示你的 Vue3 应用。你应该会看到一个带有"当前计数:0"和两个按钮(增加和减少)的界面。点击这些按钮,计数将相应地增加或减少。

这个案例演示了如何在 Vue3 中创建一个简单的组件,并在父组件中使用它。它还展示了如何在组件中定义数据和方法,以及如何在模板中使用它们。

四、package.json详解

package.json 是 Vue3 项目(以及其他 Node.js 项目)中的一个核心文件,它位于项目的根目录下。这个文件定义了项目的基本配置信息以及项目所依赖的各种模块。当你运行 npm install 命令时,npm 会根据 package.json 文件中的信息来下载和安装所需的依赖包。

以下是 package.json 文件中的一些重要字段和它们在 Vue3 项目中的常见用法:

  1. name : 这是你的项目的名称。例如:"name": "my-vue3-project"
  2. version : 这是你的项目的版本号。通常,在开发过程中,你会不断地更新和发布新的版本,例如:"version": "1.0.0"
  3. description: 项目的简短描述。
  4. scripts : 这里定义了各种 npm 脚本命令,用于执行常见的开发任务。例如:
    • "serve": "vue-cli-service serve":运行项目的开发服务器。
    • "build": "vue-cli-service build":构建用于生产环境的项目版本。
    • "lint": "vue-cli-service lint":检查项目中的代码规范。
  5. dependencies : 这里列出了项目运行所依赖的模块。在 Vue3 项目中,你可能会看到像 "vue": "^3.0.0" 这样的依赖项,表示项目依赖于 Vue 3.x 版本。
  6. devDependencies: 这里列出了项目开发所需的模块,但这些模块在生产环境的运行时不是必须的。例如,各种开发工具、编译器、测试框架等。
  7. main : 指定了项目的入口文件。在 Vue3 项目中,这通常是 main.jsmain.ts
  8. keywords: 与项目相关的关键词列表,有助于在搜索时找到你的项目。
  9. author: 项目的作者信息。
  10. license: 项目使用的许可证类型。

此外,package.json 文件中还可能包含其他字段,如 engines(指定项目运行的 Node.js 版本)、Browser(指定供浏览器使用的模块版本)等。

五、相关链接

  1. Vue3官方地址
  2. Vue3中文文档
相关推荐
_Legend_King4 分钟前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
爱吃青椒不爱吃西红柿‍️5 分钟前
华为ASP与CSP是什么?
服务器·前端·数据库
一棵开花的树,枝芽无限靠近你8 分钟前
【PPTist】添加PPT模版
前端·学习·编辑器·html
陈王卜11 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
景天科技苑19 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
SameX20 分钟前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
小行星12530 分钟前
前端预览pdf文件流
前端·javascript·vue.js
join831 分钟前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf
小行星12537 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun0011 小时前
[less] Operation on an invalid type
前端·vue·less·sass·scss