添加路由 Vue Router

视频演示

环境准备

• 安装 Git
  • 设置换行符为 lf

  $ git config --global core.autocrlf input
  $ git config --global core.eol lf
• 安装 Node.js
• 安装 VSCode

拉取项目

# 从 GitHub 拉取项目（存在网络限制）
$ git clone --branch v0.0.1 https://github.com/geenln/vue3-elemnt-plus-ts.git

# 或者从 Gitee 拉取项目
$ git clone --branch v0.0.1 https://gitee.com/genin/vue3-elemnt-plus-ts.git

安装项目依赖

$ npm install

启动开发服务器

$ npm run dev

更新配置 settings.json

.vscode/setting.json

{
  "editor.fontSize": 18,
  "files.autoSave": "afterDelay",
  "files.eol": "\n",
  "editor.formatOnSave": true,
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.quickSuggestions": {
+   "strings": "on"
+ }
}

设置路径别名

安装 node 类型提示库

npm install -D @types/node

tsconfig.json 设置路径别名

tsconfig.json

{
  "compilerOptions": {
    //...

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

+   "baseUrl": ".",
+   "paths": {
+     "@/*": ["./src/*"]
+   }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{"path": "./tsconfig.node.json"}]
}

vite.config.ts 设置路径别名

vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
+import {fileURLToPath} from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
+ resolve: {
+   alias: {
+     '@': fileURLToPath(new URL('./src', import.meta.url)),
+   },
+ },
  plugins: [vue()],
})

src/vite-env.d.ts 添加 .vue 文件提示

src/vite-env.d.ts

/// <reference types="vite/client" />

+ declare module '*.vue' {
+   import {DefineComponent} from 'vue'
+   const component: DefineComponent<{}, {}, any>
+   export default component
+ }

添加路由 Vue Router

安装 Vue Router

npm install vue-router

创建文件 src/views/TestA.vue，src/views/TestB.vue

src/views/TestA.vue

<template>
  <h1>TestA.vue</h1>
</template>

src/views/TestB.vue

<template>
  <h1>TestB.vue</h1>
</template>

创建文件 src/router/index.ts

src/router/index.ts

import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'

const defaultRouter: RouteRecordRaw[] = [
  {
    path: '/t1',
    component: () => import('@/views/TestA.vue'),
  },
  {
    path: '/t2',
    component: () => import('@/views/TestB.vue'),
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...defaultRouter],
})

export default router

更新文件 src/main.ts

src/main.ts

import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
+import router from './router'

-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(router)
+app.mount('#app')

覆盖文件 src/App.vue 查看效果

src/App.vue

<script setup lang="ts"></script>

<template>
  <h1>Vue3 Element Plus Ts</h1>
  <RouterLink to="/t1">TestA.vue</RouterLink>
  |
  <RouterLink to="/t2">TestB.vue</RouterLink>
  <RouterView />
</template>

运行开发服务器查看效果

$ npm run dev

添加 css 框架 Tailwind CSS

安装 Tailwind CSS

$ npm install -D tailwindcss postcss autoprefixer

初始化配置

$ npx tailwindcss init -p

更新文件 tailwind.config.js

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
- content: [],
+ content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

覆盖文件 src/style.css

src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

安装 css 框架提示插件 Tailwind CSS IntelliSense

覆盖文件 src/App.vue

src/App.vue

<script setup lang="ts"></script>

<template>
  <h1>Vue3 Element Plus Ts</h1>
  <div class="flex gap-2">
    <RouterLink to="/t1" class="underline text-teal-600">TestA.vue</RouterLink>
    |
    <RouterLink to="/t2" class="underline text-teal-600">TestB.vue</RouterLink>
  </div>
  <RouterView />
</template>

重启项目查看效果

$ npm run dev