创建 Vue 3.x 模板项目

2022年8月 · 预计阅读时间： 2 分钟

软件工程师 / B站UP主

我们在之前创建第一个 Vue 项目的时候，已经熟悉了 Vue 项目的开发流程，这节课我们再复习一遍 Vue 项目的创建和初始化过程，加深一下印象。

大体步骤

一个简单的 Vue 项目，就是从普通的 HTML 页面开发起步的，那么就需要约定俗成的一套文件：HTML、CSS 和 JavaScript：

├── index.html
├── index.js
├── lib
│   └── vue.global.js
└── style.css

之后在 index.html 中，引入 vue 库，vue 库可以通过 CDN 或者下载下来引入。
然后引入 css 文件。
再引入我们自己的 index.js 文件，用于编写 vue 代码。这里推荐在<head/>标签里引入 vue 库，在 <body/>结束前引入我们的 index.js 文件，重点是自己的 index.js 文件一定要在引入 vue 之后，这样才能使用 Vue 暴露出来的变量，否则会导致 undefined 错误。
1. 把 index.js 放到<body/>结束前是因为，这个时候 html 的 dom 结构已经被浏览器解析完了，可以直接获取 dom 元素了，如果在<head/>标签引入 index.js，那么浏览器会先解析 js 文件，再解析 html，这样会提示找不到元素，因为浏览器是按顺序解析 html 文件的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="lib/vue.global.js"></script>
    <link rel="stylesheet" href="style.css" />
    <title>Vue 应用</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="index.js"></script>
  </body>
</html>

然后在 index.js 中初始化并挂载 Vue。我们使用 vue 的 js 文件暴露出来的 Vue 对象，调用它的 createApp() 方法，它的参数接收 Vue 的配置对象，之后返回 Vue 应用的实例，这个实例包括配置对象中所有的内容，以及 Vue 所提供的一些方法和增强的特性。

const app = Vue.createApp();
app.mount("#app");

最后调用实例中的 mount 方法，来把 Vue 挂载到 html 中的某个元素上，这样 Vue 就接管了这个元素**以及它下面所有子元素。**整个这些元素就视为 Vue 应用了，在它们里边可以使用 Vue 的各种语法和功能特性。

实践

好了，在介绍完具体的步骤之后，我们看一下实际操作。

打开 VS Code，选择一个目录作为项目的工作空间。
新建 index.html、style.css 和 index.js 文件。
新建一个 lib 目录，把下载好的 vue 的 js 文件放到它里边。
打开 index.html，输入一个!然后按tab键，补全我们的 html 模板代码。
在<head/>标签里，<title/>标签的上方，引入 vue 的 js 文件。
再在它的下边引入 css 文件。
在 <body/>中定义一个 id 为 app 的 div，它会作为整个 Vue 应用的容器。
在 <body/>结束标签之前，引入 index.js 文件。
在 index.js 文件中，初始化 vue 实例，并挂载到 id 为 app 的 div 中。

小结

好了，现在这个 Vue 项目的基础结构就搭建好了。

大体步骤​

实践​

小结​

大体步骤

实践

小结