创建vue3vite项目

### 使用 Vue 3 和 Vite 创建新项目 #### 初始化项目 要创建一个新的 Vue 3 项目并使用 Vite 构建工具，可以执行以下命令： ```bash npm init vite@latest my-vue-app --template vue ``` 这会初始化一个名为 `my-vue-app` 的新项目，并选择 Vue 模板[^1]。 #### 进入项目目录 完成初始化后，进入刚刚创建的项目文件夹： ```bash cd my-vue-app ``` #### 安装依赖包 接下来，安装所需的依赖项。如果使用的是 npm，则运行： ```bash npm install ``` 对于 pnpm 用户来说，应该使用如下命令代替： ```bash pnpm install ``` #### 启动开发服务器 安装完成后，可以通过下面的命令启动本地开发服务器： ```bash npm run dev ``` 或者如果是通过 pnpm 来管理项目的依赖关系的话， ```bash pnpm run dev ``` 这样就可以在浏览器中访问 http://localhost:3000 查看正在运行的应用程序了。 #### 添加 Vue 路由器支持 为了让应用具备导航功能，还需要引入 `vue-router` 库。为此，在终端里输入下列指令来下载该库及其必要的 peer dependencies: ```bash npm install vue-router@4 ``` 之后按照官方文档中的说明设置路由配置[^3]。 ```javascript // src/router/index.js import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'home', component: Home, }, ] const router = createRouter({ history: createWebHistory(), routes, }) export default router ``` 最后一步是在主入口文件(main.js 或 main.ts) 中导入刚定义好的路由器实例，并将其传递给 Vue 实例： ```javascript // src/main.js or src/main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') ``` 现在这个基于 Vue 3 和 Vite 的项目已经成功集成了 vue-router 功能[^4]。