1、Vue 3 - Vue Router 使用实录 : 创建 Vue 3 项目与安装 Vue Router

创建项目时，只选择 TypeScript 语法，后续需要什么我们就安装什么。

Vue Router 文档：https://router.vuejs.org/zh/introduction.html

1、创建项目

$ pnpm create vue@latest
.../share/pnpm/store/v3/tmp/dlx-24439    |   +1 +
.../share/pnpm/store/v3/tmp/dlx-24439    | Progress: resolved 1, reused 0, downloaded 1, added 1, done

Vue.js - The Progressive JavaScript Framework

✔ 请输入项目名称： … learn-vue3-router
✔ 是否使用 TypeScript 语法？ … 否 / 是
✔ 是否启用 JSX 支持？ … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
✔ 是否引入 Pinia 用于状态管理？ … 否 / 是
✔ 是否引入 Vitest 用于单元测试？ … 否 / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › 不需要
✔ 是否引入 ESLint 用于代码质量检测？ … 否 / 是
✔ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) … 否 / 是

正在初始化项目 /home/web/vue/2024/learn-vue3-router...

项目初始化完成，可执行以下命令：

  cd learn-vue3-router
  pnpm install
  pnpm dev

2、删除不必要的文件

$  cd learn-vue3-router

$ rm -rf src/components/*.vue
$ rm -rf src/components/icons/
$ rm -rf src/assets/*.css

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

scr/App.vue

<template>
  <h3>Vue Router</h3>
</template>

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

<style scoped></style>

3、安装 vue router

$ pnpm i vue-router

$ pnpm add -D sass
$ pnpm i bootstrap

4、修改 main.ts

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'

// 引入样式
import 'bootstrap/scss/bootstrap.scss'

createApp(App).mount('#app')

5、启动项目

$  pnpm install
$  pnpm dev