手把手教你用vite搭建vue3.0项目(一)：vue-router_vite 中是用vue-router

时间飞速流转，上一次尝试使用vite的时候，还是1.0版本，半年不到，已经更新到2.4版本了。

再看看网上的vite博客，竟然有种时光交错之感，心里感慨万千。

所以建议大家还是看官方文档，以文档为准：Vite官方中文文档

我在此也做一个记录，搭建一个vue3.0的全家桶项目。

话不多说，开整！

1. 创建项目

yarn create vite
1

注意这里的vite不是项目名，而是单纯地指vite构建工具。

然后会问项目名（demo），框架选择vue，再选择vue-ts的模板。

cd demo
1

打开文件夹可以看到目录里还没有node_modules，所以，进入下一步安装依赖。

2. 安装依赖

yarn
1

启动，在浏览器输入localhost:3000看看效果。

yarn dev
1

其实也没啥好看的，就一个HelloWorld的组件，点几下按钮数字会递增，以及，额，广告。

插一句，@vue/cli创建vue3.0项目的时候，就可以直接选择全家桶vue-rouer、vuex，但vite还是需要一步一步来配置。

先按ctrl c退出，再继续我们的配置。

使用vue最先想到也最实用的，那肯定是路由系统，所以先来引入vue-router。

3. 引入vue-router

yarn add vue-router@next
1

注意一定要加@next，不然就不是支持vue3.0的版本了

a. 为了方便查看路由跳转效果，可以先在src目录新建一个views文件夹，新建两个文件Home.vue和About.vue。

Home.vue

<template>
    <div>首页</div>
</template>
1
2
3

b. 新建src/router文件夹，新建index.ts文件

import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/home.vue";

const routes = [
  { path: "/", name: "Home", component: Home },
  {
    path: "/about",
    name: "About",
    component: () => import("../views/About.vue"),
  },
];

export default createRouter({
  history: createWebHashHistory(),
  routes,
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

c. main.ts中引入这个路由配置文件

main.ts

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

import router from './router/index'

const app = createApp(App)

app.use(router)
app.mount('#app')
1
2
3
4
5
6
7
8
9

d. 更改App.vue，加上router-view标签

<template>
  <router-link to="/">首页</router-link>
  <router-link to="/about">关于</router-link>
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  components: {}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

搞定了，来yarn dev打开浏览器看看效果吧。