Login
Admin
# d.在 main.ts 文件中加载路由配置
import { createApp } from ‘vue‘
import App from ‘@/App.vue‘
import router from ‘./router/index‘
createApp(App).use(router).mount(‘#app‘)
# e.修改App.vue，添加路由映射
APP Module
Login
Vue3开发入门
### 1、基础环境相关版本信息
```
C:\Users\xxxxx>node -v
v14.17.0
C:\Users\xxxxx>npm -v
7.18.1
```
### 2、新建vue3项目
```
# a.切换到项目代码目录
cd /d D:\Development\Vue
# b.新建项目
D:\Development\Vue>npm init @vitejs/app
Need to install the following packages:
@vitejs/create-app
Ok to proceed? (y)
√ Project name: ... study-admin
√ Select a framework: ? vue
√ Select a variant: ? vue-ts
Scaffolding project in D:\Development\Vue\study-admin...
Done. Now run:
cd study-admin
npm install
npm run dev
# c.安装依赖，运行项目，运行时会有一个报错，解决办法是手动执行node脚本安装spawn
D:\Development\Vue>cd study-admin
D:\Development\Vue\study-admin>npm install
added 91 packages in 4s
D:\Development\Vue\study-admin>npm run dev
> dev
> vite
events.js:353
throw er; // Unhandled ‘error‘ event
^
Error: spawn D:\Development\Vue\study-admin\node_modules\esbuild\esbuild.exe ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
at onErrorNT (internal/child_process.js:467:16)
at processTicksAndRejections (internal/process/task_queues.js:82:21)
Emitted ‘error‘ event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
at onErrorNT (internal/child_process.js:467:16)
at processTicksAndRejections (internal/process/task_queues.js:82:21) {
errno: -4058,
code: ‘ENOENT‘,
syscall: ‘spawn D:\\Development\\Vue\\study-admin\\node_modules\\esbuild\\esbuild.exe‘,
path: ‘D:\\Development\\Vue\\study-admin\\node_modules\\esbuild\\esbuild.exe‘,
spawnargs: [ ‘--service=0.12.9‘, ‘--ping‘ ]
}
# 解决errno: -4058,code: ‘ENOENT‘,spawn 相关报错
D:\Development\Vue\study-admin>node D:\Development\Vue\study-admin\node_modules\esbuild\install.js
D:\Development\Vue\study-admin>npm run dev
> dev
> vite
Pre-bundling dependencies:
vue
(this will be run only when your dependencies or config have changed)
vite v2.3.7 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 693ms.
```
### 3、修改vite启动参数相关配置，vite.config.ts
> 参考文档：https://cn.vitejs.dev/config/
```
import { defineConfig } from ‘vite‘
import vue from ‘@vitejs/plugin-vue‘
// 需要安装 @types/node -> npm i @types/node -D
import { resolve } from ‘path‘
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
‘@‘: resolve(__dirname, ‘src‘) // 设置 `@` 指向 `src` 目录
}
},
server: {
port: 4000, // 服务端口号
open: true, // 启动时自动打开浏览器
cors: true // 允许跨域访问
}
})
```
### 4、集成vue-router路由模块
> 参考文档：https://next.router.vuejs.org/zh/introduction.html
```
# a.安装vue-router v4.x，只有v4版本支持vue3
D:\Development\Vue\study-admin>npm i vue-router@4
added 2 packages in 2s
# b.创建 src/router/index.ts 文件
import { createRouter, createWebHashHistory, Router, RouteRecordRaw } from ‘vue-router‘
import Login from ‘@/views/Login.vue‘
const routes: Array = [
{
path: ‘/‘,
name: ‘Login‘,
component: Login
},
{
path: ‘/admin‘,
name: ‘Admin‘,
component: () => import(‘@/views/Admin.vue‘) // 懒加载 Admin 组件
}
]
const router: Router = createRouter({
history: createWebHashHistory(),
routes: routes
})
export default router
# c.在 src 下创建 views 目录，用来存储页面组件。在 views 目录下创建 Login.vue 、Admin.vue。
# Login.vue
登陆
# Admin.vue
登陆
```