项目创建
在创建项目之前我们应该在终端中输入
node -v 和 npm -v
只有它们都能正常查看版本号才说明我们之前是已经安装完成的。
接下来我们在合适的目录下输入npm create vite@latest
它会要求你输入项目的名称，这个名称和我们之前通过cil创建的命名规则一样。完成之后会要求我们选择合适的框架
我们这里选择vue，然后会让我们选择语言，我们选择JavaScript
完成之后我们通过 cd 目录 进入然后输入npm install进行依赖安装。之后通过npm run dev运行项目。如果要结束运行就按住CTRL+c退出
路由配置
路由设置之前我们需要安装vue-router
在项目根目录下输入：npm install vue-router@4
完成之后我们找到src目录，在这个目录下创建一个router目录，在router目录中创建一个index.js文件我们的路由就是写在这个地方
在index.js文件中，我们需要提前从vue-router里面导入createRouter和createWebHistory
然后把需要创建路由的组件导入。（组件：每一个.vue文件都是一个组件）
我们需要把路由存储到一个对象里面，多个对象存储到数组内部：
const routerArr =[{path:"路径（相对路径）",component:组件}]
每一个路径都是单独的一个对象，如果存在一个路由包含多个子路由的时候我们就需要给这个路由所在的对象添加一个children属性，children属性对应的值其实就是一个新的包含多个对象的数组（嵌套）为了方便理解我们来看一个非常简单的嵌套路由实例
javascript
const routes = [
{
path: "/",
component: () => import("./views/Home.vue"),
children: [
{
path: "home",
component: () => import("./views/Home.vue"),
}
]
}
]最后我们新建一个路由
const router =[{
history：createRouter（）,
routes,
}]
然后export default router到此为止我们的index文件就编写完成了，后续我们只需要根据需要的路由进行相应的导入以及路由设置即可
接下来就是最后一步：在main.js里面加载路由
打开main.js文件。import router from "./router"根据相对目录导入，我们之前在index.js里面写了一句export default router 这个语句的作用就是让router作为默认的导出。
然后在createApp(App).mount('#app')里加上.use(router)
有的时候他可能不是一条语句，而是被拆开了：
const app = createApp(App)
app.mount('#app')这个时候我们需要在中间加上app.use(router)即可
到这个时候路由系统就算是完成了，剩下的路由的渲染之类的就不多说了。
element ui
使用之前还是需要先下载
我们在项目根目录下输入：npm install element-plus --save 就可以下载安装了
使用的方法也分为两种：完全引入 按需导入（推荐）
完全引入
我们先来讲完全引入，这个相对来说是比较简单的
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
一共就这三句，然后我们如果想用element的样式。我们只需要
Overview 组件总览 | Element Plus打开这个官方网站
在对应的样式之下找到代码，复制，粘贴到需要用到的位置即可
按需导入
按需导入需要在项目根目录下输入：npm install -D unplugin-vue-components unplugin-auto-import以支持我们的需求
然后打开vite.config.js文件，把下面代码插入
javascript
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})完成之后就可以了。为什么我们会推荐使用按需导入的方法呢？
是因为完全引入占空间大于按需导入。
指定端口运行vite项目
如果需要在特定的端口运行项目，我们需要找到vite.config.js文件
在里面找到export default{
server:{
port:8081,
}
}
这样就可以指定运行端口了
vite组件问题
当我们用vite创建一个项目的时候，如果需要用到别的组件（比如你自己写了一个组件，想使用它）的时候我们是不能按照之前的步骤直接加载挂载的。因为vite本身是没有支持.vue解析的
使用之前我们需要下载组件：npm install @vitejs/plugin-vue --save-dev
然后我们需要在vite.config.js文件里面导入：import vue from '@vitejs/plugin-vue'; // 引入插件
然后再export default defineConfig{}里面找一个plugins的属性，这个属性对应的key值是一个数组，我们在数组内添加元素vue()就可以了
这样我们就可以在这个里面使用vue模块了呢~