内容概览
0. 开发工具准备
0.1 IDE还是编辑器？
-
webstorm： 专为前端服务的IDE（学生可凭教育邮箱免费使用） -
vscode： 一款好用的免费轻量编辑器（需要自己做一些配置）Vue2：vscode+veturVue3：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>
关于config对象可以看这篇文章 ： config对象
4. 使用构建工具创建项目
1. 创建Vue3项目
构建工具
vite+node（版本至少是15)