vue的挂载

//index.html
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>

div的id为app,在script的引入文件中,将vue实例将被挂载到这个id为app的div元素上。

//main.js
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

const app = createApp(App): 使用createApp函数创建了一个Vue应用实例。App是作为根组件的组件对象,这里表示整个应用的根组件。

app.use(createPinia()): 使用createPinia函数创建了Pinia的实例,并通过app.use方法将Pinia插件注册到Vue应用中。Pinia是一个Vue状态管理库,用于管理全局状态。

app.use(router): 使用app.use方法注册Vue Router插件到Vue应用中。router是一个Vue Router的实例,包含了应用的路由配置。

app.mount('#app'): 最后,使用app.mount方法将Vue应用挂载到DOM元素上。'#app'是挂载点的选择器,表示Vue应用将被挂载到具有id="app"的DOM元素上。这个步骤启动了Vue应用,使其开始监听和响应用户交互,并在挂载点上渲染应用的内容。

相关推荐
bug总结8 分钟前
新学一个JavaScript 的 classList API
开发语言·javascript·ecmascript
网络安全-老纪23 分钟前
网络安全-js安全知识点与XSS常用payloads
javascript·安全·web安全
yqcoder31 分钟前
Express + MongoDB 实现在筛选时间段中用户名的模糊查询
java·前端·javascript
十八朵郁金香1 小时前
通俗易懂的DOM1级标准介绍
开发语言·前端·javascript
计算机-秋大田1 小时前
基于Spring Boot的兴顺物流管理系统设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·spring·课程设计
GDAL2 小时前
HTML 中的 Canvas 样式设置全解
javascript
GDAL2 小时前
HTML Canvas clip 深入全面讲解
前端·javascript·canvas
禾苗种树2 小时前
在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时,若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预,可以通过以下步骤实现:
前端·vue.js·echarts
GISer_Jing2 小时前
Javascript排序算法(冒泡排序、快速排序、选择排序、堆排序、插入排序、希尔排序)详解
javascript·算法·排序算法
JustHappy2 小时前
「我们一起做组件库🌻」做个面包屑🥖,Vue的依赖注入实战💉(VersakitUI开发实录)
前端·javascript·github