参考链接：https://blog.csdn.net/weixin_44897255/article/details/109119336
一直被vue项目的启动等待，和webpack打包卡慢所困扰，现在有了新技术，就赶紧来体验一波。新技术如下：
yarn + vite + vue 3 + ts + vue-router 4
yarn是比npm好用的包管理工具，更快，更简洁，更好看，自从用上yarn之后，就没再敲过npm。
vite是一种全新的前端构建工具，是扬言要替代webpack的存在，特点是快，快得离谱。
vue 3是vue的最新版本，相比较vue 2，特点是更小，更快，反正就是比你聪明比你强。
ts是js的类型控制系统，比js更严谨更规范，类似于stylus、sass这样的css预处理器，ts是js的预处理器。
vue-router 4是vue的路由系统，单页面应用的好伴侣，这是适配了vue 3的新版本。
1.创建项目
yarn create vite-app demo
cd demo
yarn
yarn dev
创建项目的时候vite没有像vue-cli那样，有那么多问题问你，要不要使用css预处理器啊，要不要使用history模式啊。
vite人狠话不多，直接给你安装个最基本的只包含了vue3.0的项目，后面的你自己玩吧。
这里我认为是新东西还不完善，各方面适配兼容配置还有点问题，还没法像vue-cli4那样，一口气搞定。
2.配置ts
yarn add typescript -D
npx tsc --init
将main.js改完main.ts，记得把index.html的引入也改为main.ts。
然后在根目录添加shim.d.ts文件，内容如下：
declare module "*.vue" {
import { Component } from "vue";
const component: Component;
export default component;
}
3.配置vue-router
yarn add vue-router@next
在src目录新建router文件夹，在router文件夹里新建index.ts，内容如下：
// 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"),
},
];
// Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
// 指定路由的模式,此处使用的是hash模式
history: createWebHashHistory(),
routes, // short for `routes: routes`
});
然后在main.ts中引入
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')
为了更好地切换路由查看效果，我在src目录新建了views目录，新建了home.vue和about.vue。
home.vue
<template>
<div class="home">
<h1>This is an home page</h1>
</div>
</template>
同时在app.vue中做了相应的修改:
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
<router-link to="/">home</router-link>
<router-link to="/about">about</router-link>
<router-view></router-view>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
a{
margin: 10px;
}
</style>
启动看看
yarn dev
这样一顿操作下来，类似于原来vue-cli4搭建的项目的vue3新项目就搭建好了。
后面可以再加上axios和element-ui之类的，这里就不再多啰嗦了。
起飞
