下一代vue项目搭建

参考链接：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之类的，这里就不再多啰嗦了。
起飞

下一代vue项目搭建