vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具，它具有以下特点：

  1. 快速的冷启动

  2. 即时的模块热更新

  3. 真正的按需编译

一、全局安装vite-create-app

yarn global add vite-create-app

二、使用cva创建项目

cva vue3-example  或者
create-vite-app vue3-example

三、进入项目并启动

cd vue-example
yarn dev

 

 

 我们可以进入src目录查看当前代码，vue3和vue2有一个很明显的区别就是,template模板可以多个根节点

 

 

 ps:由于vetur暂时还没有很好的支持vue3，所以提示错误暂时不管……

第二个是main.js里面

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";

const app = createApp(App);

app.mount("#app");

不过一般应该不会去修改

 

四、引入vue-router

npm info vue-router versions
yarn add vue-router@4.0.0-beta.6

新建router/index.js

import { createRouter, createWebHistory } from "vue-router";

const history = createWebHistory();
// 4.0的router api也有部分修改，如果是hash路由应该为createWebHashHistory

export default createRouter({
  history,
  routes: [
    {
      path: "/",
      component: () => import("../pages/home.vue"),
    },
    {
      path: "/hello-world",
      component: () => import("../components/HelloWorld.vue"),
    },
  ],
});

main.js添加

import router from "./router";

app.use(router);

五、引入ts

全局和项目里面分别安装typescript

yarn add typesrcipt
yarn global add typescript
tsc --init

然后把js文件名修改为ts，记得index.html里面引入的main.js也应该修改为main.ts

 

因为ts文件无法识别vue后缀的文件，所以需要写一个声明文件src/shims-vue.d.ts

declare module "*.vue" {
  import { Component } from "vue";
  const component: Component;
  export default component;
}

 

添加一些路由测试代码，大功告成