创建vue项目

Vite 与WebPack的区别
1.构建速度：Vite在开发环境下具有更快的冷启动和热更新能力，因为它利用了现代浏览器对ES模块的原生支持，并使用了模块化的构建方式
2.开发体验：
3.社区和生态系统：WebPack已具有强大的生态系统和社区支持

npm，pnpm和yam的区别
npm是Node.js的官方包管理工具
pnpm是一个快速、零拷贝的包管理工具
yam旨在提供更快和可靠的依赖项管理
1、安装速度：
2、安装空间：pnpm采用共享的方式，可以显著减少磁盘存储空间
3、兼容性：npm兼容性更好，更全面

打包

pnpm run build
把整个项目进行编译，把vue处理和js结合，形成一个压缩加密后的文件。
压缩目的：加载速度更快，合并js，下载快，静态缓存。
加密目的：防止别人剽窃，把见名之意名称替换成n、y等，别人不知其意。

npm install -g serve
安装生产环境

serve -s dist
后续给他人使用只需要dist文件夹即可
注意：所在目录是你的工程。生产环境node.js，安装serve环境

安装路由Router组件

1、自定义新的组件About.vue
2、声明一个路由表routers
3、创建一个路由对象router，绑定路由表
4、把上面的内容放到src/自己创建router的目录，目录创建index.

5、在main.js中引用路由route/index.js
项目的结构

创建一个Vue3.0页面的步骤
1.安装环境
pnpm create vite book --template dev 创建一个vite版本的项目
pnpm install element-plus 安装elemetn-plus
pnpm install @element-plus/icons-vue 安装element-plus/icons
pnpm install vue-router@4 安装router路由，Vue3.0对应版本router4.0

2.项目配置环境

在项目的main.js配置

import Element-Plus from 'element-plus'
import * As ElementPlusIconsVue from '@element-plus'
import 'element-plus/dist/index.css

创建router路由
1、新建模板页面pages/login.vue
2、新建包router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Login from './pages/login.vue'

const routers = createRouter[{
	path: /login
	component: Login
}]

//创建路由
const router = [{
	history: createWebHistory(),
	routers
}]
export default router

3、main.js导入路由和工具

import { createApp } from 'vue'
import Element-Plus from 'element-plus'
import 'elemetn-plus/dist/index.css'
import * As ElemetnPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
//从这里开始
import router from './router'
const app = createApp(app)
app.use(router)
app.use(Element-Plus)

for(const [key, component] of Object.entires(ElementPlusIconsVue)){
	app.component(key, component)
}

app.mount('#app')