这是我参与「第五届青训营 」伴学笔记创作活动的第 九 天
配置环境
全局安装总报错，后来在项目里面安装，发现可以
安装less sass npm install -g less
安装vite-plugin 未安装时项目运行报错。
cnpm i vite-plugin-vue-setup-extend -D
因为我配置的cnpm ,没配置的也可以使用
npm i vite-plugin-vue-setup-extend -D
一开始看网上说命令输入
cnpm i unplugin-auto-import
感觉有点问题
项目中显示安装好了但项目还是无法识别到此插件。
如果插件项目识别不到你安装了，就会在调用此插件的地方爆红，原先这里是爆红的。
然后我们去使用此插件 VueSetupExtend()
运行pnpm的项目
pnpm i，生成node_module文件夹，这里提交项目可以把此文件夹删掉，节省git上传的文件大小。
pnpm dev这里vite去跑此项目。
全局注册
这里在main.js中导入，全局注册组件，那么我们就不需要在某个vue文件中单独引入。这里使用main.ts `import { createApp } from 'vue'; import App from './app.vue'; const app = createApp(App);
app.use(...);
app.mount('#app');
进行全局注册 在panel子组件直接触发父组件的tooggle,这样做的好处就是可以把当前点击panel对象的状态传递到父组件，有父组件去完成切换的逻辑。 进行测试 <Collapse v-model="value1" @on-change="changFun">
标题1
标题1的内容
标题2标题2的内容
标题3标题3的内容
</Collapse>
` 在里面进行内部嵌套，把数据和组件抽离开
