vue 项目的创建 | 江离书生

# 1 下载vscode

点击进入 vscode 官网 (opens new window)

# 2 安装扩展

注：以下是我推荐的扩展，可自由选择是否安装

# 安装简体中文包

vscode扩展-简体中文包

# 安装 Live Server

vscode扩展-liveserver

# 安装 Material Icon Theme

vscode扩展-materialicontheme

# 安装 Vetur

vscode扩展-vetur

# 3 hello vue

# 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">
    <title>学习 vue</title>
</head>
<body>
    <h1>Hello Vue :)</h1>

    <!-- 应用程序挂载处 -->
    <div id="app"></div>

    <script src="https://unpkg.com/vue@3.0.2"></script>
    <script src="app.js"></script>
</body>
</html>

注：这里我使用的是vue的3.0.2版本，后面所有的代码也都将使用该版本的vue。

# app.js

// 首先我们要想的是：如何创建一个视图应用程序
// 创建视图应用程序，该视图应用程序的工作是控制整个网站或网站的某个部分
// Vue的createApp方法为我们创建了一个视图，我们将其保存到常量app中
const app = Vue.createApp()

// 接下来我们要想的是：如何告诉这个应用程序，我们希望它能够很好的控制这个应用程序上网页的某个部分
// 我们可以访问一个名为mount的方法，该方法告诉我们，应用程序在dom中的什么点或什么位置挂载
// 因此我可以使用app.mount并传入某种选择器，告诉应用程序在哪个位置挂载
// 这里的意思是将我们获取到的视图应用程序挂载到dom中的id为app的节点中
// 此时我们就可以说：“创建应用程序，然后将其安装到dom中的id为app的元素中，此时我们的视图应用程序控制整个id为app元素内部的任何内容，而不是它（id为app的元素）之外的任何内容”
// 这意味着，任何类型的动态数据，我们想要在此元素内输出或在其中发生的任何事件等，都将由我们的视图应用程序来控制
app.mount('#app')

运行以上代码，页面将显示 Hello Vue 😃。至此，您已经成功入门vue3。