Vue3学习第一例：Vue3架构入门

入门

Vue3的教程很少，官方网站实例不好整，另外由于Python的Django也掌握了，学习这个有些让人眼乱。Vue项目创建后，在public目录下面自动生成了一个index.htm，里面有个div id="app"，这就是简单实例中需要mount的入口，整了半天才发现。

Vue程序的入口，是main.js文件，里面要完成以下工作。

导入createApp

import createApp from "vue"

注意这个vue，我的理解应该是js/vue.js这个文件。

导入待填充index.html中app标签的Vue文件

import App from "./views/Home.vue"

注意这个Home.vue就写全了，它在src/views目录下存放。

声明App并填充实例

createApp(App).mount("#app")

上面的命令很强大，一是声明用Home.vue文件中name:"App"的export default生成一个网页模块，并把它的内容填充到id="app"的div中，生成网页供用户使用。

实例：Vue模块嵌套

普通的Vue使用就不用说了，我们讲一个实际应用中采用模块化开发应用十分常见的方法：Vue文件嵌套使用。

场景

在主页上定制一个Button，点击后自动隐藏或显示一个区别内容，该区域可以是权限声明，也可以是其它信息。

定制Modal.vue

位置：src/views/Modal.vue

代码：

<template> <div class="modal"> <slot></slot> </div> </template>

注意事项：这里有个slot命令，是Vue中用以继承父模块待显示的内容，即这个modal的Div下面，需要显示的内容，我的理解，父级引用时，声明一个moda，然后加一个标签项，该项内容将会在Modal模块中继承和显示。

主界面的template

文件: src/views/Home.vue

<template> <button @click="onModalClick">{{modalFlag?"Close modal":"Open Modal"}}</button> <modal v-if="modalFlag"> <p>Modals would be appeared here when modalFlag is true.</p> </modal> </template>

注意：这里的moda，是Ｍｏｄａｌ。vue这个子组件中定义的，在主文件中使用时，并不需要再定义和引用。

主界面中的script声明

需要声明和引用以下部分内容：

import Modal from "./Modal.vue" import { ref } from "vue";

注意由于Modal.vue和Home.vue都是在一个views目录下，因此这个路径是当前目录，注意别路径错误提示找不到module了呢。

默认参数导出

//exports default export default { name:"Home", components:{ Modal }, setup(){ const modalFlag=ref(false); const onModalClick=()=>{ modalFlag.value=!modalFlag.value; } return { modalFlag, onModalClick } } }

上面一段代码中需要注意的是：

默认导出

export default声明，default是否能够修改，如何改，尚未获得相关信息。

name

name的值一定要有，这个是import 的对象，可以自定义，也可以与函数名称不一致，建议保持一致吧。

components声明

当使用嵌套时，必须将导入的组件作为子组件予以声明，这里有多少个可以导入多少个，比如常见的footer、nav、logo、copyright等。

setup()

一定不要太英语化思维，不是setups，注意这里面存储所有的页面数据元素，可以是简单数据ref，也可以是复杂的reactive，数据要交给template,必须return相应数据，只有return出的数据template才能正常使用。

箭头函数

这个是JS的坑，适应吧，可用于参数赋值，也可以无参函数声明。

总结

Vue3入门搞明白的流程基本上就是这些。要具体使用，还有很多事情要整，但起了第一步。