Vue视图和组件
前言
上次课，我们安装并部署了我们的第一个Vue项目。这节课我们来了解一下一个Vue项目是怎么渲染的，了解一下什么Vue的视图和路由并实现。
准备
安装扩展
在正式开始之前，你至少需要清楚有关Vscode的下列操作：
- 如何打开内置终端
- 如何安装扩展
假设你已经清楚vscode的基本操作。为了更好编写代码，提高开发开发效率，建议你在vscode里按照以下扩展：
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
- Vue 3 Snippets：代码片段自动补全
- vue：vue文件高亮
- Beautify：美化代码（右键菜单 > format …）
Vue的视图是如何渲染的
在开始编写代码之前，我们还需要熟悉项目的文件结构，了解项目文件之间是如何展开“分工合作”。
dingmac:Vue% tree ./ -L 4
./
└── my_first_vue
└── my-vue-app
├── .vscode # vscode 的配置文件
├── README.md # 自述文件
├── dist # 静态资源文件
│ ├── assets
│ ├── favicon.ico
│ └── index.html
├── index.html #入口文件 ❶
├── node_modules # npm安装的依赖包
│ └── ...
├── package.json # npm的packege文件
├── public # 公共的文件
│ └── favicon.ico
├── src # 资源文件夹
│ ├── App.vue # vue的入口文件 ❸
│ ├── assets # 资源
│ ├── components # 组件 ❹
│ │ └── HelloWorld.vue
│ └── main.js # 主要的js文件 ❷
├── .gitignore # git的忽略文件配置
└── vite.config.js # vite构建工具的配置文件
Vue是单页应用（SPA），第一次进入页面的时候会请求一个html文件。当需要进行页面切换的时候，javascript会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上。
多页应用（MPA）
传统的应用形式，即每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。
因此，当我们运行npm run dev以后，浏览器首先会请求index.html ❶ .
index.html的body标签里包含了一个id名为app的div，还有浏览器接下会就执行的 main.js ❷ .
<!-- ❶ index.html -->
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
在 main.js ❷ 里，首先导入从vue模块里导入了一个createApp函数，然后又导入了一个App.vue ❸文件，最后在使用createApp将这个vue文件挂载在id名为app的标签上，也就是前面index.html ❶ 文件。于是，前面的那个空的div标签接下来就会显示App.vue ❸文件的内容。
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
然后让我们来看 App.vue ❸ ,这是一个*.vue文件。这类文件分别由script,template,style三个标签以及他们包括的内容组成。这三个标签分别对应着javascript,html,css代码。
这里我们主要看script标签，在这个标签里导入了一个HelloWorld.vue ❹ 文件，紧接着，这个文件在template标签里面以标签的形式出现了，并且拥有一个msg属性。sytle标签和template标签的其他内容过于简单，这里不做解释。
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<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>
现在回顾一下，我们最开始是inde.html ❶ 文件，然后通过main.js ❷ 导入app.vue ❸ ,而在vue.app ❸ 里面则又包含了一个HelloWorld.vue ❹ 组件。不知道大家看到这里，有没有体会到一种循序渐进的感觉呢？接下来我们再来看Helloworld.vue.
Helloworld.vue文件位于components文件夹，这里我们可以理解成他是众多组件中的一个。同样，Helloworld.vue 也是由script,template,style三个标签以及他们包括的内容组成。
<script setup>
import { ref } from 'vue'
defineProps({
msg: String
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<p>
Recommended IDE setup:
<a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
</p>
<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank">
Vite Documentation
</a>
|
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
</p>
<button type="button" @click="count++">count is: {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</template>
<style scoped>
a {
color: #42b983;
}
</style>
如果大家细心一点，就可以发现，我们浏览器中看到的界面效果就是由这里的html文件生成。至此，vue项目文件之间是如何展开“分工合作”的内容就先告一段落。由于个人的能力和时间有限，无法详细展开什么是vue组件，感兴趣的同学可以自行查看官网的相关内容。
Vue的路由
对于Vue项目，这里推荐使用官方支持的 vue-router 库。
1. 安装
在你当前vue项目的目录下执行：
npm install vue-router@4
你可能会遇到这样的错误：This is related to npm not being able to find a file.
你只需要把node_modules文件夹删除，然后重新执行即可。
安装完成以后，你就可以在package.json里看到这样一条。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N9vNm7IW-1650845211222)(https://raw.githubusercontent.com/caesarding07/images/main/uPic/dMX9uI.png)]
2. 使用
我们这里通过一个简单的例子熟悉一些router的使用。
我们先来改写一下我们的App.vue文件，给我们的HelloWorld.vue添加一个路径，使它看起来像是这样/hello.然后我们点击Hello就能看到我们之前看到的HelloWorld页面。
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<!-- 定义路由链接 -->
<hr>
<router-link to="/hello">Hello</router-link>
<!-- router-view根据路由显示组件 -->
<router-view></router-view>
<!-- <HelloWorld msg="Hello Vue 3 + Vite" /> -->
</template>
然而，如果此时我们点击Hello，console的报错可能是这样的
所以接下来，我们需要给/hello添加一个路径指向的视图。在此之前我们需要先创建一个views文件夹，然后在里面新建一个Hello.vue文件作为视图。（我们可以输入vuein然后按下tap键快速构建vue文件模版）
<!--
* @Author: CaesarDing
* @Mail: caesarding07@gmail.com
* @Date: 2022-04-23 19:22:27
* @LastEditors: CaesarDing
* @LastEditTime: 2022-04-23 19:23:47
* @FilePath: /my_first_vue/my-vue-app/src/views/Hello.vue
* @Description: hello页面
-->
<template lang="">
<div>
<HelloWorld msg="Hello Vue 3 + Vite" />
</div>
</template>
<script>
//将HelloWorld组件导入视图
import HelloWorld from '../components/HelloWorld.vue'
export default {
components:{
HelloWorld,
}
}
</script>
<style lang="">
</style>
我们在src目录下新建一个routers文件夹，并在routers文件下新建一个index.js文件.
/*
* @Author: CaesarDing
* @Mail: caesarding07@gmail.com
* @Date: 2022-04-22 22:34:52
* @LastEditors: CaesarDing
* @LastEditTime: 2022-04-23 20:36:08
* @FilePath: /my_first_vue/my-vue-app/src/routers/index.js
* @Description:
*/
// 1. 导入模块
import { createRouter, createWebHashHistory } from 'vue-router'
//2. 创建一个vue.router实例对象
const router = createRouter({
history: createWebHashHistory(), // 实现前端路由功能，hash ？history ？
routes:
[
{ path: '/' },
{
path: '/hello',
name: 'helloworld',
component: () => import('/src/views/Hello.vue'), //导入视图
},
],
}
)
// 3. 将vue-router实例对象导出
export default router
现在我们已经创建并导出了一个vue-router实例对象，那么接下来就是在main.js里面导入以便他能够发挥作用。
/*
* @Author: CaesarDing
* @Mail: caesarding07@gmail.com
* @Date: 2022-04-21 22:01:42
* @LastEditors: CaesarDing
* @LastEditTime: 2022-04-23 20:39:12
* @FilePath: /my_first_vue/my-vue-app/src/main.js
* @Description:
*/
import { createApp } from 'vue'
import App from './App.vue'
import router from './routers' // 导入路由实例
// 创建应用实例并通过链条的方式调用方法
const app = createApp(App)
app.use(router)
app.mount('#app')
大功告成，让我们来一起看一下效果。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ZGUXtYO-1650845211223)(https://raw.githubusercontent.com/caesarding07/images/main/uPic/QQ20220423-204438.gif)]
界面调整
现在我们已经学会如何去使用路由，但是我们的界面还不够美观。所以我们接下来会对我们的界面进行一些调整，使他更像是一个正常的应用。
设计布局
相信大家都一定做过咖啡屋的实验。而我们的课程目标设计出一款布局和咖啡屋相似应用。如图，我们可以把咖啡屋的界面划分为标题、导航栏、主要内容和版权这五个部分。
首先，让我们按照这个五个部分，把我们界面的框架搭建起来。这里我简单说明一下设计思路、设计目标以及设计要求，就不提供源代码了，因为我需要大家课后去完成。
设计思路
仅供参考：
- 可以先在App.vue里面设计完成界面的框架
- 导航栏使用
router-link - 主要内容部分使用
router-view - 分别写好主要内容的所有视图
- 在路由里写好视图和url的对应关系并导出路由
- 在main.js里导入写好的路由文件
设计目标
设计要求
- 不能修改index.html文件
- 导航栏要求至少拥有两个选项，并且可以切换路由和主要内容显示
- 元素不能顶边，控制好边距
- 代码注意缩进等规范
扫一扫
2496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
