vite + vue2 + eslint 项目配置

// npm 和 yarn 皆可，这里以 yarn 举例

1. 安装 vue2 环境

yarn create vite

// 选择 framework: vanilla
// 不选 vue，是因为vue默认是vue3



// 自行安装环境
yarn add vite-plugin-vue2 vue-template-compiler -D
yarn add vue vue-router vuex 

// 配置 vue 环境
// 新建 vite.config.js
import { resolve } from "path";
import { createVuePlugin } from "vite-plugin-vue2";

export default {
  "plugins": [
    createVuePlugin(/* options */) 
  ],
  "resolve": {
    "alias": {
      "@": resolve(__dirname, "src")
    }
  }
}

// 修改 main.js
import Vue from "vue";
import App from "@/App.vue";
import router from "@/router/index";
import store from "@/store/index";
import "./style.css";

new Vue({
  "el": "#app",
  router,
  store,
  "render": (h) => h(App)
}).$mount();

// 安装其他依赖
yarn add axios
yarn add element-ui sass

2. 配置 eslint

// 全局安装eslint
yarn add eslint -global

// 初始化项目
eslint --init

// 按照项目需求配置
// 遇到module报错，在 .eslintrc.js中 env加上
"amd": true

// 然后在rules中修改部分配置

3. 文件目录供参考

📦src
 ┣ 📂api
 ┣ 📂config
 ┃ ┗ 📜index.js
 ┣ 📂router
 ┃ ┗ 📜index.js
 ┣ 📂store
 ┃ ┣ 📂plugins
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📜account.js
 ┃ ┗ 📜index.js
 ┣ 📂util
 ┃ ┗ 📜request.js
 ┣ 📂view
 ┃ ┣ 📜About.vue
 ┃ ┗ 📜Hello.vue
 ┗ 📜App.vue