创建并使用Vue项目

1. vite构建vue项目

首先进入要创建的项目的目录下，输入cmd进入dos窗口

这里在vue目录下的vuefile目录下创建项目

输入 pnpm create vite 文件名 --template vue 创建vue项目

创建后先进入该项目 ：cd 文件名

安装相应的组件：
pnpm install

运行项目：
pnpm run dev

安装router ：
pnpm add vue-router@4

安装element-plus：pnpm install element-plus

2. 美化页面，首页、关于我们

使用element-plus按钮组件

首先引入路由并使用

//引入element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

在组件库中挑选组件并复制代码，这里使用的是el-button

<template>
	<div class="mb-4">
    //这里把组件放到router-link中，
		<router-link to = "/">
            <el-button type="primary" plain>首页</el-button>
        </router-link>
        
		<router-link to = "/about">
            <el-button type="success" plain>关于</el-button>
        </router-link>
	</div>
	<Router-view></Router-view>
</template>

<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>

直接运行

3. vite项目的结构和加载的原理

3.1.1. 结构

用vite成功构建项目后项目的目录结构如下图：

1. node_modules: 这个文件夹存放了项目所依赖的 Node.js 模块和第三方库。
2. public: 这个文件夹包含了一些公共资源,如 HTML 模板、静态资源等,通常用于构建项目时的引用。
3. src: 这个文件夹包含了项目的源代码,通常包括组件、页面、服务等文件。
4. index.html: 这是项目的主 HTML 文件,通常作为应用程序的入口点。
5. package.json: 这个文件定义了项目的依赖关系、脚本命令等。
6. vite.config.js: 这个文件配置了 Vite 构建工具的选项,如开发服务器、构建输出等。

3.1.2. 加载过程

1. 首先在src目录下创建pages目录，用于存放页面

1. 然后在src目录下创建router目录，用于创建路由

import { createWebHashHistory,createRouter } from "vue-router";
//注册路由
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
//路由表
const routes = [
	{path: '/',component: Home},
	{path: '/about' , component: About},
]
//创建路由对象
const router = createRouter({
	history: createWebHashHistory(),
	routes,
})

//导出
export default router

1. 在src下的main.js文件中引入并注册路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

//引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

//引入路由
import router from './router/index.js'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

1. 在src下的App.vue文件中编写首页面

<style>
  body{
	  background-color: cornsilk;
  }
  .mb-4 .el-button{
	margin: 0 1rem;
	padding: 0.75rem 1.5rem;
	font-size: 1.1rem;
	height: 50px;
	width: 200px;
  }
</style>
<template>
	<div class="mb-4">
		<router-link to = "/"><el-button type="primary" plain>首页</el-button></router-link>
		<router-link to = "/about"><el-button type="success" plain>关于</el-button></router-link>
	</div>
	<Router-view></Router-view>
</template>

<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>

index.html文件为程序的如口，程序运行后 Vite 会即时编译和加载 main.js 模块,并将 Vue 应用渲染到 #app 容器中，然后在App.vue文件中启动和挂载 Vue 应用,并将 App.vue 组件渲染到页面上。

在App.vue文件中用router-link控制页面的跳转，用router-view动态渲染对应的页面组件。

运行效果如下

4. 相关技术简介

4.1. nodejs

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境,它允许 JavaScript 在服务器端运行。Node.js 采用事件驱动、非阻塞 I/O 模型,非常适合开发 I/O 密集型的实时应用程序,如 Web 服务器、即时通讯应用等。Node.js 可跨平台运行,并拥有一个庞大的开源生态系统,开发者可以下载和共享大量高质量的第三方模块和库。Node.js 的主要优势包括高性能、易于扩展,以及全栈 JavaScript 的优势。

4.2. npm

npm（Node Package Manager）是 Node.js 的包管理器，它是 Node.js 生态系统中的一个核心部分。npm 允许你安装、共享和管理 Node.js 项目中的代码库（称为“包”或“模块”）。这些包可以是其他开发者编写的，用于执行各种任务的库和框架，比如 Web 服务器、测试框架、前端工具等。

4.3. pnpm

pnpm（Performant npm）是一个快速的、节省磁盘空间的包管理器，它类似于 npm（Node Package Manager），但提供了一些额外的功能和优化。pnpm 通过使用硬链接和符号链接来避免重复安装相同的依赖包，从而节省了大量的磁盘空间，并提高了安装速度。

4.4. vite

Vite 是一个现代化的前端构建工具，它利用原生 ES 模块导入（ESM）的特性来提供极速的冷启动（即项目初始化时的启动速度）和即时的模块热更新（HMR, Hot Module Replacement）。Vite 主要由两部分组成：一个开发服务器和一个构建命令，特别适合于需要快速启动和高效开发的现代前端项目。

4.5. vue

Vue.js（通常简称为 Vue）是一个用于构建用户界面的渐进式JavaScript框架。它旨在通过简洁的API实现响应式的数据绑定和组合的视图组件。Vue 的核心库只关注视图层，不仅易于上手，而且便于与第三方库或既有项目整合。如果需要，Vue 生态系统中的官方路由管理器 Vue Router、状态管理库 Vuex 和 Vue CLI 等插件也可以提供单页应用（SPA）开发的高级功能。

4.6. vuerouter

Vue Router 是 Vue.js 官方提供的路由管理库,它为 Vue.js 应用程序提供了强大的路由功能。开发者可以使用声明式的方式定义应用程序的路由，Vue Router 支持动态路由匹配,开发者可以定义带有参数的路由，除了声明式的路由链接,Vue Router 还提供了一组 API 供开发者以编程方式控制路由跳转。