Vue3教程 - 3 HelloWorld

news2024/11/26 16:33:16

更好的阅读体验：点这里（ www.foooor.com ）

3 HelloWorld

下面来正式进入 Vue3 的学习。先写一个 HelloWorld。

3.1 关于Vite

Vite 是一个新型前端构建工具。

在 Vue2 中，我们主要使用 vue-cli 来构建我们的前端项目，在 Vue3 中，我们将使用 Vite 来构建项目，它由Vue.js的作者尤雨溪开发。在开发 Vue 项目的时候，Vite 可以帮助我们创建项目，并对项目进行编译，提供开发服务器的支持，在本地启动前端服务，使用浏览器进行访问；同时提供高效的模块热替换（HMR）机制，使得在开发过程中，代码的改动可以立即反映在浏览器中，而无需手动刷新页面，提高开发效率和体验。

Vite 内置支持现代 JavaScript 特性，如 ES6/ES7+ 语法、TypeScript 等，使得开发者可以使用最新的语言特性而无需担心浏览器兼容性问题。

在将项目打包部署到生产环境中，Vite 使用 Rollup 进行打包和优化，生成高效的静态资源，减少打包体积，并支持代码分割，按需加载模块，提高加载速度。

所以后面将使用 Vite 来构建项目。

3.2 创建Vue项目

下面来创建 Vue3 项目。

首先在命令行进入到一个目录，这个目录作为项目所在的目录，待会在这个目录下创建项目。

然后使用如下命令创建基于 Vite 的构建设置：

# 使用npm创建
npm create vue@latest

# 或者使用yarn创建
yarn create vue@latest

执行后，会出现提示信息，填写和设置项目的相关配置，可以通过 tab 键或 左右键 切换 No / Yes：

# 填写项目名称
✔ Project name: hello-vue
# 是否使用TypeScript，Vue3拥抱TS了，所以选择Yes
✔ Add TypeScript? … No / Yes
# 添加JSX，不用，选择No
✔ Add JSX Support? … No / Yes
# 添加路由，现在没必要，后面再学习，选择No
✔ Add Vue Router for Single Page Application development? … No / Yes
# 添加Pinia状态管理，后面再学习，选择No
✔ Add Pinia for state management? … No / Yes
# 添加单元测试，选择No
✔ Add Vitest for Unit Testing? … No / Yes
# 添加端到端测试，选择No
✔ Add an End-to-End Testing Solution? › No
# 添加语法检查，我们是学习，语法检查有很多限制，选择No，实际开发选择Yes
✔ Add ESLint for code quality? … No / Yes
# 添加开发者工具扩展，选择No，也可以选择Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

上面这些选择都是可配置的，可以随时在项目的开发过程中更改它们。

3.3 运行项目

项目创建好了，可以使用 VSCode 打开项目。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

ctrl + 1左边的键 可以打开 VSCode 的命令行，首先运行如下命令安装项目依赖：

npm install

然后运行如下命令启动项目：

npm run dev

上面的命令是在项目的 package.json 中的 scripts下配置的：

{
  // ...其他
  "scripts": {
    "dev": "vite",   // npm run dev 开发环境，启动项目
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force"
  },
  // ...其他
}

运行后，显示如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

就可以在浏览器访问 http://localhost:5173/ 访问项目了。

访问项目显示如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

好像还不算 HelloWorld，只是跑起来项目，不急，慢慢推进。

下面来介绍一下 Vue3 的项目结构，以及项目为什么能显示上面的内容。

3.4 项目结构

下面介绍一下 Vue3 项目的结构：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

刚才显示的首页就是 index.html 的内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

也没看到刚才首页显示的一堆内容啊，其实 <div id="app"></div> 这个空的div元素，在Vue应用中被用作Vue实例的挂载点。Vue 会在这个div内部动态渲染出组件的模板。而这些工作就是通过 /src/main.ts 文件来完成的，它负责创建Vue实例并挂载到#app元素上。

查看 main.ts ，可以看到创建应用，并挂载到 id="app" 的 div 上：

import './assets/main.css'  // 引入css样式

import { createApp } from 'vue'    // 从vue引入引入一个创建app的方法
import App from './App.vue'    // 引入App组件

createApp(App).mount('#app')   // 以App组件为根组件，创建一个应用，挂载到id为app的元素上

所以刚才项目启动的时候，显示的内容都在 App 组件中，只不过在 App 组件中又引入了其他的组件，这些内容都在 src 目录下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在 Vue 中，页面显示的内容都是由组件构成，组件都是以 *.vue 结尾的文件，在 *.vue 文件中，可以编写页面结构、样式、脚本。

3.5 HelloWorld

为了从0开始编写一个 HelloWorld，我们将 src 目录下的内容删除，只保留 main.ts 内容如下：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')		// 创建应用并挂载

然后将 App.vue 中的内容全部删除，重新编写，内容如下：

<!-- 结构 -->
<template>
  <div class="my-app">
    {{ msg }}
  </div>
</template>

<!-- 脚本 -->
<script lang="ts">
  export default {
    name: "App",
    setup() {
      let msg = "Hello world";

      return {"msg": msg}
      // return {msg}  // 对象可以简写
    }
  }
</script>

<!-- 样式，scoped表示样式只对当前组件生效-->
<style scoped>
  .my-app {
    color: red;
    font-size: 18px;
  }
</style>

在 Vue 中，*.vue 组件文件的内容主要分为三部分：<template>、<script>、<style> ，分别对应组件的模板结构、脚本和样式。

下面来说说上面的三个部分：

<template>

<template> 用来定义 HTML 模板结构，当然会有一些 Vue 相关的指令。在 Vue2 中 <template> 中只能有一个根元素，在 Vue3 中没有这个要求了。在上面的代码中，使用插值表达式 {{ msg }} 读取 msg 的值，这 msg 的值哪来的？是下面脚本代码返回的。