前言
我在写 demo 或者研究一些问题时，经常需要新建空项目。每次搭项目都要从头配置很麻烦，我决定做一个项目模板给自己用。按照我的习惯选型： vite+vue2+eslint。写篇 blog 记录一下这个过程。
碎碎念：
现在 vue3 已经是主主主主流了。我作为一个不得不使用 vue2 的遗老（？），在 vue3 浪潮下想要搜索 vue2 的内容真的有一点点麻烦——比如说，vite 的官网现在已经找不到 vue2 的痕迹了，你只能自己去社区模板中找。但是社区模板也没有适合我的，还是自己搞一个吧。
开始
初始化 package.json 和 git
新建文件夹 template_vite_vue2_eslint
git init
新建 .gitignore
npm init -y
vite + vue
在 vite 中使用 vue2.7+，要用 @vitejs/plugin-vue2
@vitejs/plugin-vue2 已经不再更新了，直接装最终版本 2.3.1。
vite 和 vue 的版本要看 @vitejs/plugin-vue2 的要求：
// @vitejs/plugin-vue2 的 package.json"peerDependencies": {"vite": "^3.0.0 || ^4.0.0 || ^5.0.0","vue": "^2.7.0-0"},
pnpm i vite@"^5.0.0" vue@"^2.7.0" @vitejs/plugin-vue2@2.3.1
在 package.json 中添加 scripts：
"scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},
新建 vite.config.js：
import vue from '@vitejs/plugin-vue2'export default {plugins: [vue()]
}
新建 main.js 等文件
新建 src/main.js, src/App.vue, index.html
// src/main.js
import Vue from "vue";
import App from "./App.vue";Vue.config.productionTip = false;
Vue.config.devtools = true;new Vue({el: "#app",render: (h) => h(App),
});
// src/App.vue
<template><section>{{ message }}</section>
</template><script setup>
import { ref } from "vue";
const message = ref("模板");
</script>
// index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>eslint
配置 eslint npm init @eslint/config@latest
如有问题可参考 《vscode 中 eslint 无效？npm init 是什么？》
