起步

快速基于 html 页面创建 vue3 的应用。

TIP

本小节学习中用到的资料，可以去 刘龙彬/vue3-base-code-pages 仓库中下载。

创建一个 vue3 的应用

1. 创建 html 页面，在 body 下新增 <div id="app"> 的 div：

   <div id="app">
     <h3>First vue3 application.</h3>
   </div>

2. 以原生模块化的方式，引入 ES 版本的 vue3，并创建 vue3 的 SPA 单页面应用程序实例：

   <script type="module">
     // 1. 导入 createApp 函数
     import { createApp } from './lib/vue-3.4.29.js'
   
     // 2. 创建 app 应用
     const app = createApp({})
   
     // 3. 把应用挂载到页面的指定区域
     app.mount('#app')
   </script>

3. 注意：在导入 vue 时，可以使用 importmap 简化导入的路径（JSON 语法）。示例代码如下：

   <script type="importmap">
     {
       "imports": {
         "vue": "./lib/vue-3.4.29.js"
       }
     }
   </script>
   
   <script type="module">
     // import { createApp } from './lib/vue-3.4.29.js'
     import { createApp } from 'vue'
   </script>

使用组合式 API 定义数据

1. 使用组合式 API 定义数据，并把数据暴露给模板：

   // 导入 ref 函数
   import { createApp, ref } from 'vue'
   
   const app = createApp({
     // setup 函数是组合式 API 的入口
     setup() {
       // 定义数据
       const name = ref('liulongbin')
       // 暴露数据给模板使用
       return { name }
     }
   })

2. 在模板中使用 setup 暴露的数据：

   <div id="app">
     <h3>first application.</h3>
     <p>姓名：{{name}}</p>
   </div>

绑定事件修改响应式数据

1. 在模板中添加 <button>change name</button> 按钮，并使用 @click 指令，为按钮绑定 vue 的鼠标单击事件处理函数：

   <div id="app">
     <h3>first application.</h3>
     <p>姓名：{{name}}</p>
     <button @click="changeName">change name</button>
   </div>

2. 在 setup 中定义 changeName 处理函数，并 return 给模板使用：

   const app = createApp({
     setup() {
       const name = ref('liulongbin')
       // 1. 在处理函数中，通过 .value 修改 ref 的值
       const changeName = () => (name.value = 'escook')
   
       return {
         name,
         changeName // 2. 把函数暴露给模板使用
       }
     }
   })

Why not SFC + <script setup>

SFC 和 <script setup> 需要结合 vite/webpack 等构建工具使用，对于初学者来讲学习曲线较为陡峭。

所以本套课程先从 HTML + Vue3 讲起，等同学们熟悉了 Vue3 的基本语法之后，再慢慢过渡到构建工具 + SFC + <script setup> 的用法。这也契合了 Vue 所谓的渐进式框架的学习特点。