项目运行的时候，浏览器自动打开。
在package.json中修改代码如下：
"serve": "vue-cli-service serve --open",
eslint校验功能关闭
在vue.config.js文件中的module.exports中添加如下代码：
module.exports = defineConfig({
transpileDependencies: true,
//关闭eslink
lintOnSave:false
})
在关闭eslint校验功能后，重启项目才会关闭校验。
@
在jsconfig.json中有给src文件夹配置别名：@
即@代表src文件夹
"paths": {
"@/*": [
"src/*"
]
},
项目路由的分析：
可以将其理解为键值对。
key是URL，value是相应的路由组件。
先分析部分结构：上中下
上：头，logo，搜索
中：实际发生改变的
下：导航，二维码
路由组件：
home首页
search路由组件
login登陆路由
register注册
非路由组件：
header（首页，搜索页）
footer（首页，搜索页，登录页没有）
路由&非路由组件
在Web应用程序开发中，有两种常见的组件类型：路由组件和非路由组件。它们在功能和用途上有所不同。
-
路由组件（Route Components）： 路由组件用于处理应用程序中的路由和导航。它们负责渲染特定路径或URL的内容，并管理页面之间的导航。典型的例子是使用React Router或Vue Router等路由库实现的组件。
特点：
- 响应URL或路由的变化，根据当前的URL或路由来决定渲染哪个组件。
- 通常作为应用程序的一部分，用于定义不同路径对应的内容。
- 可以接收URL参数或查询参数，并在组件中使用。
- 可以实现路由导航、嵌套路由等高级功能。
例子：在一个电子商务应用中，有一个路由组件负责渲染产品列表页面（例如
/products路径）和单个产品页面（例如/products/:id路径）。 -
非路由组件（Non-Route Components）： 非路由组件是用于应用程序中除了路由和导航之外的其他功能的组件。它们通常用于展示静态内容、处理业务逻辑、封装可重用的UI组件等。
特点：
- 独立于应用程序的路由和导航逻辑。
- 可以接收父组件传递的属性（props），并根据属性渲染内容。
- 主要关注展示数据和处理逻辑，而不涉及页面导航或路由切换等功能。
- 可以被其他组件引用和重用。
例子：在一个博客应用中，有一个非路由组件负责渲染文章列表，它可以接收从父组件传递的文章数据，并展示每篇文章的标题和摘要。
对比/router
1，路由组件一般放置在pages|views文件夹中，非路由组件一般放置在components文件夹下。
2，路由组件一般需要在router文件夹下进行注册（使用的即为组件的名字），非路由组件在使用的时候一般都是以标签的形式使用。
3，注册完路由后，不管是路由组件还是非路由组件都会有router属性
1，$route 一般用于获取路由信息（路径，query,params等）
2，$router 一般进行编程式导航进行页面跳转[push|replace]
项目的顺序
- 书写静态页面
- 拆分组件
- 获取服务器的数据动态展示
- 完成相应的业务动态逻辑
注意1:创建组件的时候，组件结构+组件的样式+图片资源
less
欲使用less需要通过npm安装less&less-loader，并在style标签上加上lang=less
使用非路由组件（全局组件）
清除默认样式
index.html:<link rel="stylesheet" href="./reset.css">
