马上精通 Vue：第 13 章——单文件组件和 main.js

前端

2024-01-06 01:25:15

单文件组件：组件化开发的基础

在 Vue.js 中，单文件组件（SFC）是一种强大的工具，它允许您将 HTML、CSS 和 JavaScript 封装到一个文件中。这极大地简化了组件开发，并促进了组件的重用性和可维护性。

理解 Vue.js SFC

SFC 由三个部分组成：

<template>：包含组件的 HTML 结构。
<script>：包含组件的 JavaScript 逻辑。
<style>：包含组件的 CSS 样式。

这些部分共同构建了一个自包含的组件，它可以轻松地导入和导出到其他 Vue.js 组件中。

在 Vue 项目中使用 SFC

建议使用脚手架（如 Vue CLI）来设置 Vue 项目，它将自动为您创建 SFC。例如，在 Vue CLI 生成的项目中，您可以在 src/components 目录下找到 SFC。

main.js：Vue 项目的入口

main.js 文件是 Vue 项目的入口点。它负责创建 Vue 实例、配置路由并挂载应用程序。

在 main.js 中创建 Vue 实例

main.js 文件中最重要的部分是创建 Vue 实例：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

这行代码将导入 Vue.js 框架，创建 App 组件，并将其挂载到 #app DOM 元素上。

配置路由

如果您使用 Vue Router，您可以在 main.js 文件中配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './Home.vue'
import About from './About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ]
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')