创建 Vue 应用实例

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

创建一个 vue 应用需要先去创建一个 Vue 应用实例,在项目的 src 下面新建一个 main.ts,这个文件是应用的入口文件,在这里可以创建一个 vue 实例。先从 vue 里面,导入 createApp 这个方法,来自 vue。

下面用这个方法创建一个 vue 应用实例,添加一个 app,执行一下 createApp。提示我们要给 createApp 提供一个 rootComponent,也就是根组件或者叫主组件。

在 src 的下面,新建一个组件,放在 app 目录的下面,文件的名字可以是 app.vue, 组件文件的后缀一般就是这个 .vue,组件的名字可以首字母大写,也可以全部小写。

在这个组件里面,暂时只用一组 template 设置一下组件的模板,一组 h3 标签,包装的是一个标题,比如 NINGHAO。

这个 app 组件可以作为应用的 rootComponent,回到 main.ts,先在文件顶部导入刚才创建的 App 组件,它来自当前目录下面的 app 目录里的 app.vue 。然后把导入进来的 App 交给 createApp 这个方法。

让应用显示出来需要再挂载一下,用的是 app 这个实例上的 mount 方法,把要挂载的位置告诉给这个方法,#app 指的是页面上带 app 这个 id 的元素。这里说的页面指的是 public 下面的 index.html 这个文档。 在这个 html 文档里,有一个带 id 是 app 的元素。

在终端,项目所在目录的下面,启动一下项目的开发服务,执行一下 npm run serve 或者 yarn serve。 启动以后,打开浏览器,访问一下 localhost:8080 ,你会发现,在页面上会显示一个 NINGHAO,这个标题就是 App 这个组件里的内容。

创建 Vue 应用实例《 Vue.js 前端应用 #2:组件基础 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点