快速搭建vue3+vite+eslint

1.创建项目:
npm init vite@latest
npm install
npm run dev

2.npm说明:
 npm install 初始化时不会自动下载模块---npm install初始化不会下载模块，需要自己手动下载
    方便统一和阅读，文中全部使用简写方式。
    -g： 为 --global 的缩写，表示安装到全局目录里,全局位置在哪呢？使用npm root -g 
    -S： 为 --save 的缩写，表示安装的包将写入package.json里面的dependencies ----npm install 初始化时会自动下载模块
    -D： 为 --save-dev 的缩写，仅开发包，在生产中不需要。例如测试包
        表示将安装的包将写入packege.json里面的devDependencies----npm install 初始化时会自动下载模块

3.安装sass一般会失败:
npm install node-sass --save-dev
查询版本关系依赖:
https://www.npmjs.com/package/node-sass
安装node版本对应的
npm install [email protected] --save-dev

4..安装element-plus
npm install element-plus --save

5.安装vue-router
npm install vue-router --save

6.安装pinia
pinia和vuex的区别-缓存
由于Pinea是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。
将 Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能降低有很大影响。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目。
npm install pinia --save


7.安装eslint和eslint到测试环境官方对.vue的支持:
npm install --save-dev eslint                      // 安装eslint插件
npm install --save-dev eslint-plugin-vue           // ESLint官方提供的Vue插件，可以检查 .vue文件中的语法错误
//在eslintrc.js 配置
{
  "extends": ["plugin:vue/vue3-recommended"]        // 使用vue3推荐规则
}
安装prettier和 eslint的prettier插件
npm install --save-dev --save-exact prettier        // 安装prettier
npm install --save-dev eslint-plugin-prettier       // 将prettier作为ESLint插件,
// eslintrc.js 配置
{
    extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],    // 使用vue3推荐规则、prettier推荐！ 后者替换前者。
}
调整并使用
此时 eslint 规则和 prettier 规则冲突的情况，eslint告诉我们要使用单引号，但是改为单引号以后，prettier有告诉我们要使用双引号。
这时候就需要另一个eslint的插件 eslint-config-prettier，这个插件的作用是禁用所有与格式相关的eslint规则，也就是说把所有格式相关的校验都交给 prettier 处理。
npm install --save-dev eslint-config-prettier
// eslintrc.js 配置
module.exports = {
  extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
};
展
我们还可以在根目录新建 .prettierrc.js 文件自定义 prettier 规则，保存规则后，重启编辑器的eslint服务以更新编辑器读取的配置文件。
// .prettierrc.js
module.exports = {
  singleQuote: true, // 使用单引号
}
通常以上不生效，如果修改(不大推荐)在module.exports修改
module.exports = {
  extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": ["error", { useTabs: true }],
  },
};

8.安装axios
npm i axios --save

9.安装环境变量@符号
npm install @vitejs/plugin-vue -D        具体可搜索插件用法
拓展环境变量，新增 .env.dev .env.text .env.production, https://cn.vitejs.dev/guide/env-and-mode.html#production-replacement 需要注意必须VITE 开头

10.安装兼容，推荐
https://blog.csdn.net/fighting_sunnyGirl/article/details/119727647
安装 "babel-polyfill" 并配置兼容ie11， https://www.npmjs.com/package/vite-plugin-legacy