Vue3实践-项目构造原理1
文件main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' //导入路由模块 router，通常在 Vue 应用程序中用于管理页面导航。
import store from './store' //导入状态管理模块 store，通常使用 Vuex 或其他状态管理库来存储和管理应用程序的状态。
import ElementPlus from 'element-plus'//从 ElementPlus 库中导入 ElementPlus 组件库，ElementPlus 是一个基于 Vue 3 的 UI 组件库，提供了许多常用的 UI 组件。
import 'element-plus/dist/index.css'//导入 ElementPlus 的样式文件，确保在应用程序中可以使用 ElementPlus 提供的样式。const app = createApp(App)
//使用 use 方法将路由模块注册为全局插件
app.use(router)
app.use(store)
app.use(ElementPlus)
app.mount('#app')
main.js文件包含了以下几个关键部分:
- 从Vue库中导入 createApp 函数，这个函数用于创建一个新的 Vue 应用程序实例
- 导入根组件 App.vue，这是应用程序的主要入口点。
app.mount('#app')：使用createApp创建Vue应用实例,并将其挂载到id为’app’的DOM元素上，’#app’ 是一个选择器。
文件App.vue
<template><div id="app"><h1>{{ title }}</h1><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld},data() {return {title: 'My Vue Application'}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
App.vue文件包含了以下几个部分:
<template>: 定义了组件的HTML结构。
<script>: 包含了组件的逻辑代码。
<style>: 定义了组件的样式。Vue.js 应用程序的入口组件，通常命名为 `App.vue`。以下是详细的解释：1. `<template>`：定义了组件的 HTML 结构。- `<div id="app">`：根元素，包含整个应用程序的内容。- `<h1>{{ title }}</h1>`：显示标题，内容来自 `data()` 中定义的 `title` 属性。- `<HelloWorld msg="Welcome to Your Vue.js App"/>`：引入并渲染一个名为 `HelloWorld` 的子组件，传递了一个名为 `msg` 的属性。2. `<script>`：定义了组件的逻辑部分。- `import HelloWorld from './components/HelloWorld.vue'`：导入一个名为 `HelloWorld` 的组件。- `export default { ... }`：导出组件的配置对象。- `name: 'App'`：定义组件的名称为 `App`。- `components: { HelloWorld }`：注册 `HelloWorld` 组件，使其可以在当前组件中使用。- `data() { ... }`：定义组件的数据对象，其中包含一个名为 `title` 的属性，初始值为 `'My Vue Application'`。3. `<style>`：定义了组件的样式部分。- `#app { ... }`：选择器为 `#app` 的样式规则，设置了字体、抗锯齿、颜色和外边距等样式。HelloWorld.vue文件包含以下几个部分:
<template>: 定义了组件的HTML结构,显示一个标题和一段文字。
<script>: 包含了组件的逻辑代码。这里我们定义了一个名为'HelloWorld'的组件,并声明了一个名为'msg'的prop。
<style scoped>: 定义了组件的样式。'scoped'属性确保这些样式只应用于当前组件。
这个组件可以在App.vue中使用,就像您之前的App.vue文件中那样。它接受一个'msg'属性作为输入,并在模板中显示这个消息。src/components/HelloWorld.vue:
这是一个简单的Vue组件。
<template> 部分定义了组件的HTML结构,显示一个标题和一段文字。
<script> 部分定义了组件的逻辑。它导出一个Vue组件对象,名为'HelloWorld',并接受一个名为'msg'的String类型prop。
<style scoped> 部分定义了组件的样式,只应用于这个组件。
src/App.vue:
这是应用的根组件。
<template> 部分定义了应用的主要结构,包含一个标题和HelloWorld组件。
<script> 部分导入HelloWorld组件,定义了App组件的逻辑。它包含一个data属性,返回标题文本。
<style> 部分定义了应用级的样式。
3. src/main.js:
这是应用的入口文件。
导入必要的模块:Vue、App组件、路由、状态管理、Element Plus UI库。
创建Vue应用实例。
使用路由、状态管理和Element Plus。
最后将应用挂载到DOM上。
这三个文件共同构成了一个基本的Vue应用结构:
main.js 创建和配置Vue应用
App.vue 作为根组件定义整体布局
HelloWorld.vue 作为子组件被App.vue使用
index.html 文件（通常在 public 目录下）是否有一个 id 为 “app” 的 div：
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Vue App</title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>
router.js 文件正确配置了路由
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'const routes = [{ path: '/', name: 'Home', component: Home },{ path: '/about', name: 'About', component: About }
]const router = createRouter({history: createWebHistory(),routes
})export default router
创建了 Home.vue 和 About.vue 组件
<template><div class="home"><h1>Welcome to the Home Page</h1></div>
</template><script>
export default {name: 'Home'
}
</script>
<template><div class="about"><h1>This is the About Page</h1></div>
</template><script>
export default {name: 'About'
}
</script>