默认文件1612960239033.png
补充：
2021-02-19 又是好消息
image.png
vue-cli-plugin-vite vue-cli-plugin-vite

通过 vue add vite 一键启动，具体操作方法和我的文章一致。

也推荐 https://github.com/tnfe/wp2vite

0 按

最近 Vite 是相当火，尤大推Vite2、换新Logo，围绕vite发推又点赞，代码不停：可真是肝力十足！
image.png
image.png

Vite2 进一步和Vue解耦，变得越来越技术无关了，Vue3，React项目一样跑。

那问题来了，Vite2能不能跑Vue2全家桶？官方的vite 模板中没有vue2的身影。

经过试验，答案是能。这次分享不讲已经过时的 Vite1 原理，（真是学不动了要），讲应用：用 Vite2 搞 Vue2 全家桶。

本次分享思路大纲：

Vite2搞Vue2？这题我会（官方新动作） - 图5

1 起Vue2项目

话不多说，我们开搞。本次项目代码我建立了一个 Git 仓库，小伙们 —> 戳此查看 <—。

搭建项目这块比较简单:

Vue2 + router + vuex + + less + ts + prettier vue add element

image.png
最终项目通过 yarn serve 跑起来。

image.png

2 引入Vite依赖

得益于 vite 插件的机制，我们要从 vue-cli 迁移到 vite 只需要做下面的操作：

  1. npm i vite vite-plugin-vue2 -D

修改 package.json 中的 script.dev="vite" 。

接下来我们准备 src/index.html ，内容和 原来 public/index.html 的大致内容一致，只不过需要手动引入 src/main.ts 启动入口，设置 type=module ，如下图：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>vue2 vite2</title>
  8.   </head>
  9.   <body>
  10.     <div id="app"></div>
  11.     <script type="module" src="/src/main.ts"></script>
  12.   </body>
  13. </html>

我们需要准备配置文件了，可以参考我的配置文件 /vite.config.js 

  1. import { createVuePlugin } from "vite-plugin-vue2";
  2. import { defineConfig } from "vite";
  3. import path from "path";
  4. export default defineConfig({
  5.   resolve: {
  6.     alias: {
  7.       "@": path.resolve(__dirname, "src"),
  8.     },
  9.   },
  10.   base: "/",
  11.   plugins: [
  12.     // vue()
  13.     createVuePlugin()
  14.   ]
  15. });

这里我们设置了 base=/ 和 alias 两项配置。

还有一项配置需要处理，因为默认的 router/index.ts 用到了环境变量，根据vite文档，这里需要做修改

  1. const router = new VueRouter({
  2.   mode: "history",
  3.   base: import.meta.env.BASE_URL,
  4.   routes
  5. });

从 process.env 改成了 import.meta.env

万事俱备，试试吧：

  1. npm run dev

image.png

就，跑起来了：router 工作、element工作、Vue2 Devtools 工作、修改文件热更新工作。

image.png
那就完了呗。

等等，既然Vue3 的 composition API 这么火，也试试呗

3 试试CompositionAPI

参考文档 https://github.com/vuejs/composition-api

安装、配置、使用一条龙

  1. npm install @vue/composition-api

修改 src/main.ts 

  1. import VueCompositionAPI from '@vue/composition-api'
  3. Vue.use(VueCompositionAPI)

修改下页面

  1. <template>
  2.   <div class="about">
  3.     <h1>info</h1>
  4.     <p>{{ number }}</p>
  5.     <el-button @click="addCount" type="primary">add</el-button>
  6.     <p>我是{{ obj.name }}</p>
  7.     <p>今年 {{ prettyAge }}</p>
  8.   </div>
  9. </template>
  10. <script lang="ts">
  11. import { ref, reactive, defineComponent, computed } from "@vue/composition-api";
  12. interface TypeInfo {
  13.   name: string;
  14.   age: number;
  15.   hobby?: string[];
  16. }
  17. export default defineComponent({
  18.   setup() {
  19.     const number = ref(0);
  20.     const obj: TypeInfo = reactive({
  21.       name: "xinbao",
  22.       age: 18
  23.     });
  24.     const addCount = () => number.value++;
  25.     const prettyAge = computed(() => obj.age + "岁");
  26.     return {
  27.       number,
  28.       prettyAge,
  29.       obj,
  30.       addCount
  31.     };
  32.   }
  33. });
  34. </script>

再跑，就跑起来了

image.png

4 初步结论

理论可行，能跑。

我试着在我的其他项目中跑来着，还是有坑，等一个后续吧。

技术收益：

  • webpack dev模式

image.png

  • vite模式

image.png

4584/407 约等于 11.3 , 那你觉得我从webpack切换到vite是否提升了 10x 倍 的编译速度？

欢迎留言交流。