vue3入门03 - 不使用脚手架怎么玩vue3？

星河boy
2,883 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

前言

  • 在工作中，我们开发的项目，一般都是使用脚手架来初始化一个项目，比如创建一个vue2的项目，现在就是执行
  • vue create my-project来创建项目。
  • 脚手架创建的项目除了有vue2核心的源码包，还有webpack、babel、eslint等等依赖包工具，不利于我们从根本学习vue2api。
  • 我第一次学习vue2的时候，是没有通过脚手架来创建项目的，而是通过类似于jquery在html中引用，进行实例话使用的。这样的使用方式可以帮助我更好的理解vue2的使用。
  • 对于vue3也是一样的，vue3也是一个框架库，不依赖构建工具也是可以直接在html中进行引用使用的。那么接下来我们看下怎么直接在html中使用vue3

在html中引用vue3

  • 在vue3的文档中，有一节不使用构建工具来使用vue3的介绍，我们要做的和这个一样。

引用umd格式的vue3库

umd格式是类似于jquery这样的库打包方式，可以直接在浏览器中引用运行。 我们可以使用文档中给的在线链接

<script src="https://unpkg.com/vue@3"></script>

也可以到GitHub中，将vue3源码克隆下来，执行打包命令，找到packages/vue/dist/vue.global.js，放到我们自己的项目中进行使用 image.png

通过原生 ES 模块使用 Vue

vue3也支持使用原生ES模块进行引用，这种方式需要标记script的类型为importmap来使用,我们可以使用文档中的在线链接

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

或者使用源码打包后的packages/vue/dist/vue.esm-browser.js文件进行使用。 image.png 需要注意的是我红框标记位置的写法。 使用了es-module模式，就要标注script为module才能识别es模块，并且引用方式改为import方式

创建vue实例

我们准备好了基本的html页面，也把vue3引入了，接下来我们就可以来创建我们的vue3实例了 image.png 首先需要准备一个dom元素来承载我们的vue实例。

<div id="app"></div>

然后通过createApp来创建一个vue3实例,并挂载到id为app的这个dom元素上

<div id="app">{{msg}}</div>

<script>
    const { createApp } = Vue
    const app = createApp({
      setup() {
        return {
          msg: 'hello world'
        }
      }
    }).mount('#app')
  </script>

这里有几个需要注意的点。

  • createApp：每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例
  • 应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串
  • 当在未采用构建流程的情况下使用 Vue 时，我们可以在挂载容器中直接书写根组件模板。此时根组件没有设置 template 选项时，Vue 将自动使用容器的 innerHTML 作为模板（也就是id为app目前为根组件模版）。
  • setup(): 此钩子作为组件中使用组合式api的入口（关于组合式api后面会讲），所有需要在页面上渲染的内容都需要在此进行返回，比如上述代码中在页面上显示msg的内容。

vue实例返回了什么？

我们可以打印下crateaApp返回的值，看看里面有什么东西。 image.png

  • 根据上面的图我们可以看到，vue3的实例返回的是一个代理对象，里面包含了我们定义的msg，由于我们的msg没有定义响应式，修改此值页面不会刷新。
  • 其中还定义了一系列的$开头的变量，后面我们在实例上定义的内容变多以后，会回过头来再查看下这些变量里内容的变化。

总结

  • 可能更多的时候我们都是通过脚手架来创建项目，开发项目，很少会注意到不使用脚手架的情况。
  • 当我们有在项目中创建多个vue实例的需求时，此时所学就很有用了。
  • 我的团队项目有很多需要调用全局vue实例和创建多个vue实例的地方，还有就是单独引入一个vue组件的需求(后面会讲)。
  • 所以简单学习下不使用脚手架如何使用vue3还是很有必要的。
avatar
文章
阅读
粉丝