前言：创建空白新项目，知道下面这些几个步骤就够了，本文将详细介绍vue3新项目搭建的三种方式以及页面路由的相关配置，让你快速的实现新项目的开发
一、环境准备
- 先保证安装 Node.js -->网址 Node.js --- Download Node.js®
命令提示符
下载安装 Node.js 18（或以上版本）+ LTS 版本（根据node.js官网支持的版本自行选择）
//验证node安装：
//打开命令提示符 输入命令行验证安装
node -v # 需显示 v18.x 或更高
npm -v # 需显示 9.x 或更高
//国内用户还是要先配置镜像加速-->提升后面开发时依赖的下载速度：
npm config set registry https://registry.npmmirror.com二、提供三个创建方案
方案一：Vite 交互式创建（推荐）
- 初始化创建项目
命令提示符
npm create vue@latest-
自定义配置选项
根据命令行提示选择：
命令提示符
//根据项目需求自定义输入和选择
✔ 项目名称: my-vue3-demo
✔ 是否使用 TypeScript? Yes
✔ 是否添加 JSX 支持? No
✔ 是否引入 Vue Router? Yes
✔ 是否引入 Pinia 状态管理? Yes
✔ 是否引入单元测试? No
✔ 是否引入 E2E 测试? No- 安装依赖并启动
命令提示符
cd my-vue3-demo //快速进入创建项目
npm install //安装项目依赖时运行此命令
npm run dev //运行项目特点：默认集成组合式 API、TypeScript 支持，冷启动速度极快
方案二：Vue CLI 传统方案
- 全局安装 CLI
命令提示符
npm install -g @vue/cli- 创建项目
命令提示符
vue create my-vue3-app-
手动选择配置
-
选择
Manually select features -
按需勾选需要功能：
命令提示符◉ Choose Vue version ◉ Babel ◉ Router ◉ Vuex ◉ Linter- 选择 Vue 3.x 版本
-
-
启动开发服务器
终端cd my-vue3-app npm run serve适用场景：需要 Webpack 深度定制或旧项目迁移
方案三：Vite 非交互式创建（快速模板）
-
直接生成基础模板
命令提示符npm create vite@latest my-app --template vue -
安装依赖并启动
终端cd my-app npm install npm run dev特点：生成最小化模板，适合快速验证功能
三、项目结构对比
Vite 生成结构
perl
my-vue3-demo/
├── src/
│ ├── assets/ # 静态资源
│ ├── components/ # 组件目录
│ ├── router/ # 路由配置
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件（TypeScript）
├── package.json # 依赖管理
└── vite.config.ts # Vite 专属配置Vue CLI 生成结构
csharp
my-vue3-app/
├── public/ # 静态资源 -->打包时不经过 Webpack 处理
├── src/
│ ├── assets/ # 资源-->打包时由 Webpack 处理--解析为模块依赖
│ ├── components/ # 公共组件
│ ├── router/ # 路由配置
│ ├── views/ # 页面组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── babel.config.js # Babel 配置
└── vue.config.js # Webpack 配置扩展四、自定义路由时的相关配置（通常会根据创建时的选择自动生成）
-- 首先
-
安装路由库
终端npm install vue-router@4注意 ：
@4是 Vue 3 专用版本 -
创建路由配置文件
js
//在 `src` 目录下新建 `router` 文件夹
//创建 `index.js`（或 `index.ts`）文件：
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue' // 页面组件需提前创建
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import('@/views/AboutView.vue') // 懒加载
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
export default router关键点：
createWebHistory用于 HTML5 模式路由（需服务器支持）- 路由懒加载语法
() => import()提升加载性能
-- 挂载路由到应用
- 在入口文件注册路由
js
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 自动识别 index.js
const app = createApp(App)
app.use(router)
app.mount('#app')- 在 App.vue 中添加路由视图
vue
<!-- src/App.vue -->
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/> <!-- 路由出口 -->
</template>说明 ：<router-view> 是动态路由组件加载容器
-- 路由进阶配置
场景 1：动态路由
js
// 路由配置中添加动态参数
{
path: '/user/:id',
name: 'user',
component: () => import('@/views/UserView.vue')
}
// 组件内获取参数
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id) // 输出动态 id场景 2：嵌套路由
js
const routes = [
{
path: '/dashboard',
component: () => import('@/layouts/DashboardLayout.vue'),
children: [
{ path: '', component: () => import('@/views/DashboardHome.vue') },
{ path: 'settings', component: () => import('@/views/DashboardSettings.vue') }
]
}
]场景 3：导航守卫
js
// 全局前置守卫 -->例如登录拦截功能-->需在路由文件里配置单个路由的mata
router.beforeEach((to, from) => {
if (to.meta.requiresAuth && !isAuthenticated) {
return { name: 'login' }
}
})五、注意事项
-
版本兼容性
- Vue 3 需搭配
[email protected]和[email protected] - CLI 创建的旧项目升级时可能需手动调整配置
- 若使用
createWebHistory模式，需服务器配置支持（如 Nginx 需添加try_files规则）
- Vue 3 需搭配
-
可能遇到的问题
- 依赖安装失败 ：检查镜像配置或使用
npm cache clean --force - TypeScript 报错 ：确认
.ts文件声明规范或禁用严格模式
- 依赖安装失败 ：检查镜像配置或使用
-
路径别名冲突
- 推荐使用
@代替../相对路径（需在vite.config.js或vue.config.js中配置）
- 推荐使用
通过上面几个步骤就能快速完成 Vue3 的新项目搭建，配置路由时建议优先采用模块化路由文件管理可提高项目后期的可维护性。