vue3 + vite + typescript + exlint 项目搭建

---

前言

---

1. 项目初始化

# npm 6.x
npm init vite@latest my-vue-app --template vue/vue-ts

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue/vue-ts

# yarn
yarn create vite my-vue-app --template vue/vue-ts

2. 加入 vue-router 以下均基于ts

npm install vue-router@next

• src/router/index.ts

  import { createRouter, createWebHistory } from "vue-router";
  const routes = [
  {
    path: "/",
    component: () => import("/@/pages/CbtHome.vue"),
  },
  // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下 == /*
  { path: "/:pathMatch(.*)*", name: "NotFound", redirect: "/" },
  ];
  const Router = createRouter({
  scrollBehavior: () => ({ left: 0, top: 0 }),
  history: createWebHistory(),
  routes,
  });
  Router.beforeEach((to, from, next) => {
  next();
  });
  export default Router;
  

• src/main.ts

  import Router from '/@/router';
  ...
  app.use(Router);
  

3. 加入 vuex 以下均基于ts

npm install vuex@next vuex-persistedstate

• src/store/index.ts

  import { createStore } from "vuex";
  import createPersistedstate from "vuex-persistedstate";
      
  // 创建一个新的 store 实例
  const store = createStore({
    state: {
      count: 0
    },
    mutations: {
      increment (state) {
        state.count++
      }
    },
    actions: {
      increment (context) {
        context.commit('increment')
      }
    }
  })
  export default store;
  

  • src/main.ts

    import Store from '/@/store';
    ...
    app.use(Store);
    

4. 加入 eslint

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

• .eslintrc.js

  module.exports = {
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
  },
  extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
  rules: {
    quotes: ["error", "double"],
    semi: ["error", "always"],
    "semi-style": ["error", "last"],
  },
  };
  

5. 加入 postcss-pxtorem

npm install postcss-pxtorem autoprefixer -D

• postcss.config.js

  module.exports = {
    plugins: {
      autoprefixer: {
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 11",
          "last 10 versions", // 所有主流浏览器最近10版本用
        ],
        grid: true,
      },
      "postcss-pxtorem": {
        rootValue: 19.2,
        propList: ["*"],
        unitPrecision: 5,
      },
    },
  };
  

• .prettierrc

  {
    "sime": true,
    "singleQuote": false,
    "endOfLine": "auto"
  }
  

6. 加入 element-plus 按需导入

npm install element-plus -S
npm install -D unplugin-vue-components unplugin-auto-import

• src/plugins/element-ui.js

  import { ElMessage } from "element-plus";
    
  export default function useEle(app) {
  app.config.globalProperties.$ElMessage = ElMessage;
  app.use(ElMessage);
  }
  

• vite.config.ts

  import AutoImport from "unplugin-auto-import/vite";
  import Components from "unplugin-vue-components/vite";
  import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
  
  export default defineConfig(({ mode }) => {
      ...
      plugins: [
      ...,
      AutoImport({
          resolvers: [
            ElementPlusResolver({
              importStyle: "sass",
              // directives: true,
              // version: "1.2.0-beta.1",
            }),
          ],
        }),
        Components({
          resolvers: [
            ElementPlusResolver({
              importStyle: "sass",
              // directives: true,
              // version: "1.2.0-beta.1",
            }),
          ],
        }),
      ]
  });
  

7. 加入 i18n

npm install vue-i18n@next -S && npm install @intlify/vite-plugin-vue-i18n -D

• src/plugins/i18n.ts

  import { createI18n } from "vue-i18n";
    
  const messages: any = {
  "zh-cn": import.meta.glob("/@/locales/zh-cn.json"),
  en: import.meta.glob("/@/locales/en.json"),
  };
    
  export const I18N = createI18n({
  locale: "zh-cn",
  messages: messages,
  });
  

• src/main.ts

  import { I18N } from "./plugins/i18n";
  ...
  app.use(I18N);
  

---