翼度科技»论坛 编程开发 .net 查看内容

02_使用Vite搭建Vue3项目

7

主题

7

帖子

21

积分

新手上路

Rank: 1

积分
21
首先插件添加:Live Server、Vue - Official、Vue VSCode Snippets、别名路径跳转
官网:Vite | 下一代的前端工具链 (vitejs.dev)
1.创建一个文件夹VueApp,运行cmd转到该目录下,执行命令:npm create vite@latest

2.然后转到vuedemo目录下命令:cd vuedemo,
3.执行命令:npm install。文件夹内会新添加node_modules文件夹和package-lock.json文件。
npm会根据项目根目录下的package.json文件中的dependencies和devDependencies字段来安装所需的包。这些包将被下载并安装到项目的node_modules目录中。
4.运行该项目:npm run dev
5.修改项目:
删除\vuedemo\src\style.css文件。
删除\vuedemo\src\components\<template>
<template>
Hello
</template>
</template>World.vue文件。
\vuedemo\src\main.js内的 “import './style.css” 删除掉。
\vuedemo\src\App.vue内的 script template  style内的东西都删除掉
 
6.修改Vue内容模板路径:C:\Users\Lua\.vscode\extensions\sdras.vue-vscode-snippets-3.1.1\snippets\vue.json
app.vue
  1. <template>
  2. <h3>{{web.show}}</h3>
  3. <p v-show="web.show"><template>
  4. <template>
  5. Hello
  6. </template>
  7. </template>....</p>
  8. <button @click="toggle">切换</button>
  9. </template>
复制代码
 
运行:npm run dev
 
导入组件
在线components文件内创建header.vue,footer.vue两个文件
app.vue
  1. <template>
  2. <<strong>Header</strong>/>
  3. <template>
  4. <Header <strong>PName="张三" Page="24"</strong>/>
  5. <template>
  6. <Header PName="张三" Page="24"/>
  7. <template>
  8. <Header PName="张三" Page="24"
  9. @getuser="getuserinfo" <strong>@useradd="getuseradd"</strong>/>
  10. <hr/>
  11. </template>
  12. <Footer<strong> v-bind="Pdata"</strong>/>
  13. </template>
  14. <Footer/>
  15. </template>
  16. <<strong>Footer</strong>/>
  17. </template>
复制代码
Header和Footer必须为大写
 
 
父传子 defineProps
app.vue是父组件,因为它包含了header.vue和footer.vue两个子组件
1.通过数组方式传递
app.vue
  1. <template>
  2. <<strong>Header</strong>/>
  3. <template>
  4. <Header <strong>PName="张三" Page="24"</strong>/>
  5. <template>
  6. <Header PName="张三" Page="24"/>
  7. <template>
  8. <Header PName="张三" Page="24"
  9. @getuser="getuserinfo" <strong>@useradd="getuseradd"</strong>/>
  10. <hr/>
  11. </template>
  12. <Footer<strong> v-bind="Pdata"</strong>/>
  13. </template>
  14. <Footer/>
  15. </template>
  16. <<strong>Footer</strong>/>
  17. </template>
复制代码
header.vue
  1. <template>
  2. <template>
  3. Hello
  4. </template>
  5. </template>
复制代码
 
2.通过对象方式传递
app.vue
  1. <template>
  2. <<strong>Header</strong>/>
  3. <template>
  4. <Header <strong>PName="张三" Page="24"</strong>/>
  5. <template>
  6. <Header PName="张三" Page="24"/>
  7. <template>
  8. <Header PName="张三" Page="24"
  9. @getuser="getuserinfo" <strong>@useradd="getuseradd"</strong>/>
  10. <hr/>
  11. </template>
  12. <Footer<strong> v-bind="Pdata"</strong>/>
  13. </template>
  14. <Footer/>
  15. </template>
  16. <<strong>Footer</strong>/>
  17. </template>
复制代码
footer.vue
  1. <template>
  2. 你好.....
  3. </template>
复制代码
 
3.传递响应式数据
app.vue
  1. <template>
  2. <<strong>Header</strong>/>
  3. <template>
  4. <Header <strong>PName="张三" Page="24"</strong>/>
  5. <template>
  6. <Header PName="张三" Page="24"/>
  7. <template>
  8. <Header PName="张三" Page="24"
  9. @getuser="getuserinfo" <strong>@useradd="getuseradd"</strong>/>
  10. <hr/>
  11. </template>
  12. <Footer<strong> v-bind="Pdata"</strong>/>
  13. </template>
  14. <Footer/>
  15. </template>
  16. <<strong>Footer</strong>/>
  17. </template>[b]ID自增[/b]
复制代码
footer.vue
  1. <template>
  2. <h3>fooooooooooooooooooter</h3><strong>
  3. age:{{ Pdata.id }}
  4. </strong></template>
复制代码
 
 
子传父 defineEmits
header.vue
  1. <template>
  2. <template>
  3. Hello
  4. </template>
  5. </template>
复制代码
app.vue
  1. <template>
  2. <<strong>Header</strong>/>
  3. <template>
  4. <Header <strong>PName="张三" Page="24"</strong>/>
  5. <template>
  6. <Header PName="张三" Page="24"/>
  7. <template>
  8. <Header PName="张三" Page="24"
  9. @getuser="getuserinfo" <strong>@useradd="getuseradd"</strong>/>
  10. <hr/>
  11. </template>
  12. <Footer<strong> v-bind="Pdata"</strong>/>
  13. </template>
  14. <Footer/>
  15. </template>
  16. <<strong>Footer</strong>/>
  17. </template>ID自增
复制代码
传递事件
header.vue
  1. <template>
  2. <button <strong>@click="add"</strong>>添加用户</button>
  3. </template>
复制代码
app.vue
  1. <template>
  2. <<strong>Header</strong>/>
  3. <template>
  4. <Header <strong>PName="张三" Page="24"</strong>/>
  5. <template>
  6. <Header PName="张三" Page="24"/>
  7. <template>
  8. <Header PName="张三" Page="24"
  9. @getuser="getuserinfo" <strong>@useradd="getuseradd"</strong>/>
  10. <hr/>
  11. </template>
  12. <Footer<strong> v-bind="Pdata"</strong>/>
  13. </template>
  14. <Footer/>
  15. </template>
  16. <<strong>Footer</strong>/>
  17. </template>
复制代码
 
生命周期函数
挂载阶段
       onBeforeMount
               在组件实例即将被挂载到DOM树之前调用
               此时模板还未编译或渲染到DOM,通常用于执行初始化操作,
               如:获取异步数据、设置初始属性值等
       onMounted
               在组件成功挂载到DOM并完成首次渲染后调用
               此时可以访问和操作DOM元素,
               并执行与页面交互相关的逻辑
更新阶段
       onBeforeUpdate (由于响应式数据变化)
               在组件更新之前即将重新渲染时调用
               可以根据新的参数判断是否需要进行特殊处理,
               甚至可以选择阻止此次更新过程
       onUpdated
               在组件完成更新并重新渲染后调用
               可以基于新的渲染结果处理更新后的数据
卸载阶段
       onBeforeUnmount
               在组件从DOM中销毁之前调用
               用于释放资源,如:清理计时器、解绑事件监听器等
       onUnmounted
               在组件已经从DOM中移除并销毁后调用
               确保组件所占用的所有资源都被正确释放
错误处理
       onErrorCaptured
               在捕获到组件中的错误时调用
               用于处理错误,如:记录错误日志等
 

来源:https://www.cnblogs.com/MingQiu/p/18122204
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具