轻编程的博客

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。是vuex的同类产品也是vue3官方推荐的默认全局状态管理包！发挥一下阅读理解能力，我们完全可以从他的字面意思去理解，无需想的过于复杂，全局状态应该说的就是某一组数据或某一个数据的变化是不属于某一个具体的组件，而是属于全局层面的，再进一步的理解其实就是每个组件都可以访问到改数据并且可以修改该数据，应用到全局，也就是组件共享数据！

在src目录下新建一个api的目录，这个目录统一管理向服务器请求的接口方法，在其内部创建一个index.js的文件,我们上一节的分类请求接口进行改造。在layout目录下的。

axios库的使用非常简单，简单浏览一下官网即可了解个大概。组件中来处理关于导航的业务。

其中导出函数的两个参数分别对应的值为： - command为当前项目的运行模式，开发模式它返回的值是serve,而在生产环境下为 build. - mode读取的是.env文件的后缀，默认： 'development' 用于开发，'production' 用于构建，这也就是他为什么会自动读取开发环境变量配置文件的原因！的方式导入环境变量，但是你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。文件，分别用来存放打包时环境变量配置和开发时环境变量配置！1、Vite 在一个特殊的。

回到我们这个组件，用一个简单的复用来说明这个需求的实际使用场景，当我们多次引入这个search组件之后，我们就会发现每次修改传值的业务操作，我们都要回到子组件中去操作，那如果父组件中的两个搜索框要执行不一样的业务操作，那么将会出现一个严重的冲突，只能绑定一个回调！为什么会产生这样一个需求，我们先来看看我们已经封装好的search类型的组件，在其内部有一个搜索框，当他被引入父组件之后，其组件内部的事件和值就必须要传递到父组件，才能进一步操作，和完成需求，也才能称其为真正的复用组件！子组件中绑定响应式的值。

参考文档：https://cn.vuejs.org/guide/components/events.html#usage-with-v-model。侧边栏主要由 搜索、最新文章、标签、归档四个基础模块构成，通过观察我们可以发现一个共性，就是样式基本一致，只是对应的相关内容略有区别。那么我们是否可以考虑，将这四个模块封装到一个组件当中，根据在父组件传入的类型显示不同的布局和内容。该代码中最重要的知识点是搜索框子组件向父组件传值的基本用法！在src/components目录下创建一个。

全局组件我们说了，统一放在src/components目录中，这里边的组件我们全部作为全局组件注册使用。1、新建一个ArticleItem.vue的文件，首先我们将Layout.vue组件中，重复出现的文章列表的区块代码全部拿到这个组件中。2、通过局部组件引入的方式使用组件。3、注册全局组件，做到一次注册全局使用，无需再次引入组件。在src/base.js中引入如下代码，这就是全局注册组件的方式。官方文档// 挂载全局对象// 挂载全局组件。

思考：我们已经安装了一个ant-design-vue的组件库，是否还可以安装其他的UI组件库混合使用？答案是可以的，比如这个组件库没有要用到的组件，但另外一个组件有，我们完全可以再安装，单独将某一个使用到的组件引入即可，当项目打包的时候也不会说把所有的安装的都打包进去，只会打包我们是用的组件，前提是，没有全局引入相关UI组件库！

这个在官方文档被称作组件作用域css，意思是带有scoped的样式块中定义的样式只会作用于当前组件，不会影响到全局或者其他组件，即使是同名的class也不会影响！这里我们引入ant的button组件来验证是否自动引入生效，如果不出问题打开页面将会正常看见button组件的正常显示！这样子就不需要手动再去引入相关提示组件了，直接通过proxy来调用挂载的全局对象来调用该组件！那么用到这两个组件的时候，我们只需要在组建中引入vue相关的接口即可！之后清空 App.vue文件中的内容，只留下如下所示的内容。

拓展：assets目录中可以自己分化出不同地子目录，用来根据自己的需求存放文件。如assets/util/可以用来存放工具类js，assets/api/可以用来存放业务接口js等等。Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。执行完以上步骤之后，我们会得到如下所示的一个目录结构：目录结构说明。此时，我们就可以直接访问。

本教程命名为，本课程融合了Vue3组件化开发相关几个技术栈，相关案例全部采用Vue3提供的组合式 API (Composition API)进行讲解， 并且不会涉及选项式API，这对刚开始学习Vue的同学非常友好，不会有固有思维的限制，上手更加容易！本课程作为前端组件化开发的入门实战课程，力求精简，将通过一个博客的案例整合相关的技术点，以及每一个技术点在实战中的基础应用，以实战为最终目的，力求能带领大家快速上手。