前言
我在写 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
