likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 70

内容概览

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

0. 开发工具准备

0.1 IDE还是编辑器？

  • webstorm ： 专为前端服务的IDE（学生可凭教育邮箱免费使用）

  • vscode ： 一款好用的免费轻量编辑器（需要自己做一些配置）

    • Vue3 ： vscode + volar

  • 总结 ： 追求轻量或者免费用vscode，否则用webstorm

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

  • 在谷歌上安装开发者插件

b23.tv/gbq8P5R

  • 官方教程 ： 全！！！（翻到浏然器开发者插件这一节）

staging-cn.vuejs.org/guide/scali…

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风格

Vue3 的组件可以按两种不同的风格书写：选项式 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编写组件时，通常会与 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>的更多介绍：cn.vuejs.org/api/sfc-scr…

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

  1. 在项目渐进使用Vue
  • 推荐采用选项式 API

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

  1. 使用构建工具创建Vue项目
  • 推荐采用 组合式 API + 单文件组件

3. 在项目渐进使用Vue

基本步骤

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

案例讲解

  • 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>

关于config对象可以看这篇文章 ： www.cnblogs.com/crazycode2/…

4..使用构建工具创建项目

1. 创建Vue3项目

工具：构建工具vite+ node（版本至少是15）

创建：只用看完前四步即可： blog.csdn.net/x550392236/…

2. Vue3项目结构解析

结构解析：www.bilibili.com/video/BV1Zy…

转载自:https://juejin.cn/post/7145015917808713736
评论
请登录