《Vue3 一》Vue 基础

Vue：是一套用于构建用户界面的渐进式 JavaScript 框架。

引入 Vue 的方式：

1. 在 HTML 页面中通过 CDN 的方式引入。

   // 引入 Vue
   <script src="https://unpkg.com/vue@3.5.13/dist/vue.global.js"></script>
   
   <div id="app"></div>
   <script>
   	// 创建 app
       const app = Vue.createApp({
           template: '<h1>Hello Vue</h1>',
       })
       // 挂载 app
       app.mount('#app')
   </script>
   

2. 下载 Vue 的 JavasScript 文件放到项目中，手动引入。

   // 引入 Vue
   <script src="../lib/vue.js"></script>
   
   <div id="app"></div>
   <script>
   	// 创建 app
       const app = Vue.createApp({
           template: '<h1>Hello Vue</h1>',
       })
       // 挂载 app
       app.mount('#app')
   </script>
   

3. 通过 Vue CLI 脚手架创建项目并使用，底层是基于 Webpack 进行打包。

   脚手架：其实是建筑工程中的一个概念，在软件工程中会将帮助开发人员搭建项目的工具称为脚手架。

4. 通过 create-vue 工具创建项目并使用，底层是基于 Vite 进行打包。

通过 Vue CLI 脚手架创建项目并使用：

1. 全局安装 Vue CLI：npm install @vue/cli -g。
2. 使用 Vue CLI 创建 Vue 项目：vue create vue-demo。
3. 运行 Vue 项目：npm run serve。
4. 在 .vue 单文件中编写代码。

   <template>
   	<div class="text">{{message}}</div>
   </template>
   
   <script>
   export default {
   	data: {
   		message: 'Hello Vue',
   	}
   }
   </script>
   
   <style>
   .text{
     text-align: center;
     color: #2c3e50;
   }
   </style>
   

基于 Vue CLI 5.0.8 创建的 Vue 项目的目录文件：

1. node_modules：依赖包目录。
2. public：打包后的文件目录。
3. src：编写的源代码文件目录。
4. .browserslistrc：对编写的代码进行转化时要适配的浏览器的配置文件。
5. .eslintrc.js：ESLint 配置文件。
6. .gitignore：Git 忽略配置文件。
7. babel.config.js：Babel 配置文件。
8. jsconfig.json：给 VScode 读取的配置文件，以便 VScode 能够给开发者更好的代码提示。

   //  jsconfig.json
   {
     "compilerOptions": {
       // 打包出来的 JavaScript 版本
       "target": "es5",
       // 开发时采用的模块化的规范
       "module": "esnext",
       // src 文件夹相对的文件目录
       "baseUrl": "./",
       // 模块的查找顺序
       "moduleResolution": "node",
       // 配置的路径别名
       "paths": {
         "@/*": [
           "src/*"
         ]
       },
       // 开发中可能会用到的库
       "lib": [
         "esnext",
         "dom",
         "dom.iterable",
         "scripthost"
       ]
     }
   }
   

9. package-lock.json：NPM 配置文件。
10. package.json：NPM 配置文件。
11. README.md：项目描述文件。
12. vue.config.js：Vue 配置文件。Webpack 等打包工具的配置默认是对开发者隐藏的，可以在 vue.config.js 进行配置，Vue 将会对其与默认的配置进行合并。

    // vue.config.js
    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
    	transpileDependencies: true,
    	// 对 Webpack 进行配置
    	configureWebpack: {
    	
    	}
    })
    

通过 create-vue 工具创建项目并使用：

1. 运行 npm init vue@lastest，这个命令会做两件事，一是安装一个本地工具 create-vue，二是使用 create-vue 创建一个 Vue 项目。
2. 安装项目依赖： npm install 。
3. 运行 Vue 项目：npm run dev。
4. 在 .vue 单文件中编写代码。

使用 Vue 的方式：

Vue 中的 template 模板首先会转成 createVNode() 函数（这一步也就是对模板进行编译）；然后 createVNode() 函数会创建出对应的 VNode 虚拟节点，一堆的 VNode 虚拟节点会生成 VDom 虚拟 DOM；最后 VDom 虚拟 DOM 会生成真实 DOM。

1. 以构建步骤方式使用 Vue：模板写在 .vue 单文件中。模板首先会经过 babel-loader 提前进行编译，因此 Vue 代码在浏览器中运行时就无需再编译模板了。因此在使用 Vue 时， 可以使用前缀为 vue.runtime.* 的文件，其中只包含运行时的版本，不包含编译器，当使用这个版本时，所有的模板都必须由构建步骤预先编译。

   默认的 VUE CLI 中使用的就是仅含运行时的版本，因为所有单文件组件中的模板都已经被预编译了。如果因为某些原因需要浏览器内进行模板编译，可以 将 vue 改为相应的版本 vue/dist/vue.esm-bundler.js。

   <!-- 模板写在 .vue 文件中-->
   <template>
   	<div class="text">{{message}}</div>
   </template>
   

2. 以无构建步骤方式使用 Vue：模板要么是写在页面的 HTML 中，要么是内联的 JavaScript 字符串。模板不会被提前编译， 因此 Vue 代码在浏览器中运行时就需要动态编译模板。因此在使用 Vue 时，必须使用名称中不包含 .runtime 的文件，其中既包含了运行时，也包含了编译器，支持在浏览器中直接编译模板。

   <!-- 模版写在 HTML 中>
   <template id="product-item-template">
       <div>我是一个组件</div>
   </template>
   

   // 模版写在内联的 JavaScript 字符串中
   const productItem = {
   	template: '<div>我是一个组件</div>'
   }
   

h() 函数：

Vue 推荐在大多数情况下使用 template 模板来创建 HTML，但是如果有一些特殊的场景真的需要使用 JavaScript 来创建 HTML，可以使用 h() 函数。

h() 函数：更准确的命名是 createVNode() 函数，h() 函数是它的简称。是一个用于创建 VNode 的函数。h() 函数接收三个参数，第一个参数是标签名；第二个参数是一个可选的对象，包含各种属性；第三个参数可以是一个表示内容的字符串，也可以是一个包含 h() 函数生成的 VNode 的数组。

h() 函数比 template 模板更接近编译器。因为 template 模板中的 HTML，也是会转成 createVNode() 函数生成 VNode 的。

<script>
// 1. 导入 h() 函数
import { h } from 'vue'
import Home from './components/Home.vue'

export default {
  // 2. 在 render() 选项中返回 h() 函数创建的 VNode。
  render() {
    return h('div', {class: 'container'}, [
      h('p', {}, 'Hello Vue'),
      h(Home)
    ])
  }
}
</script>

<style scoped>
</style>  

Vue 安装插件：

通过 app.use() 安装插件，可以传入一个对象，但必须包含一个 install 的函数，该函数会在安装插件时自动执行；也可以传入一个函数，该函数会在安装插件时自动执行。
对在插件中可以完成的功能没有限制。例如可以添加全局属性或方法，通过将它们添加到 app.config.globalProperties 上实现；可以添加全局资源（指令、过滤器、混入、过渡等）；可以实现一个库来提供自己的 API 等。

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 当传入一个对象时，必须有一个 install 的函数，Vue 底层会拿到这个对象的 install 函数执行并接收 app 作为参数
app.use({
    install: function(app) {
        console.log('传入对象的 install 函数被执行', app)
    }
})

// 当传入一个函数时，传入的函数会直接被执行并接收 app 作为参数
app.use(function(app) {
    console.log('传入函数被执行', app)
})

app.mount('#app')