Vue3系列文章 —（1）怎么在项目中使用Vue3?

柳衣白卿

已于 2022-09-20 10:08:48 修改

阅读量445

点赞数 1

分类专栏： Vue 文章标签： vue

于 2022-09-19 16:16:34 首次发布

本文链接：https://blog.csdn.net/qq_50864152/article/details/126935734

版权

Vue 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

✅作者简介：大三学生，专注分享所学知识
✨个人主页：个人主页
🔥系列专栏：Vue3

内容概览

0. 开发工具准备

0.1 IDE还是编辑器？

webstorm ：专为前端服务的IDE（学生可凭教育邮箱免费使用）
vscode ：一款好用的免费轻量编辑器（需要自己做一些配置）
- Vue2 ： vscode + vetur
- Vue3 ： vscode + volar
volar优于vetur，且两者不能同时使用
总结：追求轻量或者免费用vscode，否则用webstorm

0.2 在浏然器上安装开发者工具

在谷歌上安装开发者插件：在谷歌上安装开发者插件
官方教程：全！！！（翻到浏然器开发者插件这一节）：官方指南

1. 相关知识补充

单文件组件

是*.vue 文件，简称为SFC或者组件
是将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件

<script>
  export default {
    data() {
      return {
        count: 0
      }
    }
  }
</script>

<template>
<button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
  button {
    font-weight: bold;
  }
</style>

`API`风格

Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API

选项式 `API` (`Options API`)

当使用选项式API时，我们只需要将在创建组件时传入一个配置对象，Vue使用这个配置对象来描述组件的逻辑。

这个配置对象包含许多配置项，例如 data、methods 和 mounted，这些配置项所定义的属性都会暴露在函数内部的 this 上，它会指向当前创建的组件实例。

<script>

//语法糖 : 用配置对象来创建组件并暴露出去
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

}
</script>

<template>
  <button>Count is: {{ count }}</button>
</template>

组合式 `API` (`Composition API`)

当使用组合式 API，我们使用导入的 API 函数来描述组件逻辑

在使用组合式API编写组件时，通常会与<script setup>搭配使用

这个案例与选项式API的哪个组件是一样的：

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

`<script setup>`

该标签中的setup是一个标识，它告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。因此<script setup> 标签中的导入和变量/函数都能够在模板中直接使用。
只有通过使用构建工具构建的项目才能使用这个
关于<script setup>的更多介绍，看下面这篇文章

2. 在项目中使用Vue的两种方式

在项目渐进使用Vue

推荐采用选项式 API

这种编码方式简单易学，但不要混合两种编码方式来开发！！

使用构建工具创建Vue项目

推荐采用组合式 API + 单文件组件

3. 在项目渐进使用`Vue`

基本步骤

在这里插入图片描述

案例讲解

Vue实例服务的容器称为模板

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <!--步骤一: 声明一个id为app的容器-->
    <div id="app"></div>
  </body>
</html>

<!--步骤二: 引入Vue.js-->
<script type="text/javascript" src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
const { createApp } = Vue
//步骤三: 创建Vue实例  
const config = {}  
const app1 = createApp(config)
//步骤四 : 指定实例app1为id为app的这个容器服务
app1.mount('#app')
</script>