Vue
npm create vue@latest 创建一个新项目
这条命令会从npm仓库下载最新版本的CLI(Command-Line Interface),也就是我们俗称的脚手架，同时呢，会启动一个交互式引导，配合我们创建并配置一些工具。当然，对于我们萌新来说，一路false(否)就好了。
初始项目目录
assets
assets目录是Vue项目中默认的静态资源目录，用于存放项目的图片、样式、字体等资源文件。在assets目录中，通常按照功能或类型进行组织，比如将图片放在assets/images目录下，样式文件放在assets/styles目录下。这样的组织方式有助于项目的结构清晰和维护。
components
这个文件夹用于我们存放一些可复用的组件
App.vue
根组件, Vue应用的入口，在开发中, 我们会创建很多组件, 最终都会在根组件通过路由进行引入
index.html
嗯 这个我们熟悉，入口文件，初始项目采用SPA（单页面应用，也就是整个应用只有一个html）架构，所以index.html就是我们整个应用的入口。其他文件都会经过打包处理成资源文件注入到此。
main.js
实际上就是js入口文件，主要作用是初始化vue实例，挂载根组件。
import './assets/main.css'引入了一个CSS文件，用于全局样式设置。import { createApp } from 'vue'从Vue库中导入了createApp函数，这是Vue 3中创建应用实例的方法。import App from './App.vue'导入了根组件App.vue。createApp(App).mount('#app')创建了一个Vue应用实例，并将其挂载到index.html中ID为app的元素上。
这里就不进行过多的解释有兴趣可以了解这位朋友的文章 理解vue项目结构
npm run dev 运行项目
不出意外的话，应该没有意外，你可以在某个端口上运行你的Vue项目了。
在index.html文件中，我们可以在body标签中看见这些代码。
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
那么既然导入了main.js，我们可以看看main.js干了些什么事：
// main.js
import { createApp } from 'vue'; // 从 vue 包中导入 createApp 函数
import App from './App.vue'; // 导入根组件 App
const app = createApp(App); // 创建一个 Vue 应用实例并将其赋值给常量 app
app.mount('#app'); // 将该应用实例挂载到具有 id="app" 的 DOM 元素上
所以，我们这个简单的vue项目也就是这样运行的。
Vue Router
我们可以看见，这是一个单页项目，但是我们大部分项目如果单单只有一个页面，是很难满足需求的，那么我想，是不是可以写多个页面，利用点击跳转呢？ 应该是可以的，但是，既然如此，我们又为何选择vue3呢？
其实呢，vue为我们提供了一种和以前不同的方法来实现模拟多页应用的方法———路由:
Vue Router 是 Vue 官方的客户端路由解决方案。
客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。
Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。
Router
npm install vue-router@4
要使用Router，根据官方库的引导，我们需要安装路由，当然，在创建项目的时候，交互式引导中我们就可以进行安装，脚手架会帮我们创建好。
现在，我们也可以手动来安装，
- 执行
npm install vue-router@4 - 在
src目录新建文件夹router - 新建
index.js文件
//导入路由
import { createMemoryHistory, createRouter } from 'vue-router'
//引入组件
import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'
//定义一个路由数组，其中每个对象表示一个路由规则
const routes = [
{ path: '/', component: HomeView },
{ path: '/about', component: AboutView },
]
// 创建路由实例
//history使用内存历史记录模式，这种模式适用于服务端渲染 (SSR) 或测试，不依赖浏览器的地址栏。
//routes指定路由规则数组，即const routes中定义的路由规则。
const router = createRouter({
history: createMemoryHistory(),
routes,
})
//抛出路由
export default router
- 在js入口文件
main.js中导入并使用路由
//添加代码
import router from './router'
app.use(router)
Tip：在运行项目时，为了优化性能，避免一次性导入所有路由规则，可以使用component:()=>import('@/views/index.vue') 来导入路由规则，这样只有在路由跳转时才会导入。
RouterLink 和 RouterView
Vue Router为我们提供了两个组件RouterLink 和 RouterView。
-
RouterLink
不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能。
"to" 属性
相当于a标签中的herf属性，后面跟跳转链接所用，这个链接也是对应的path
-
用法
<router-link :to="/home">Home</router-link>或
<RouterLink :to="/home">Home</RouterLink>
"tag" 属 性
具有tag属性的router-link会被渲染成相应的标签
-
RouterView
RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西。我们可以把它当做成一个入口，如果有路由跳转，就可以从这里进入。
-
用法
<router-view> </router-view> 或 <RouterView />
