vite+vue3.2.6+ts

创建项目

npm init @vitejs/app 项目名 -- --template vue-ts

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { resolve } = require('path');
export default defineConfig({
  // 引入svg-icon
  plugins: [
    vue(),
  ],
  // 设置端口号
  server: {
    port: 3003,
  },
  // 设置src为@
  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
  },
  // 加载全局scss, 主要是为了引入px2rem方法
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/styles/const.scss";', // 添加公共样式
      },
    },
  },
});

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "vite/client",
      "node"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "none"
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    quotes: ['warn', 'single'],
    semi: ['warn', 'always'],
    'comma-dangle': ['warn', 'never'],
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off'
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        mocha: true
      }
    }
  ]
};

.eslintignore

/node_modules/
/public/
.vscode
.idea

babel.config.js

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset']
};

package.json

{
  "name": "项目名",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --mode dev",
    "preview": "vite preview",
    "build": "vuedx-typecheck . && vite build",
    "build:dev": "vuedx-typecheck . && vite build --mode dev",
    "build:test": "vuedx-typecheck . && vite build --mode test",
    "build:pre": "vuedx-typecheck . && vite build --mode pre",
    "build:prod": "vuedx-typecheck . && vite build --mode prod",
    "lint": "eslint common/**/*.{js,jsx,vue,ts,tsx} && eslint pages/**/*.{js,jsx,vue,ts,tsx}"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.16.1",
    "vue": "^3.2.6",
    "vue-router": "^4.0.10",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@types/mockjs": "^1.0.3",
    "@types/node": "^15.12.5",
    "@typescript-eslint/eslint-plugin": "^4.28.1",
    "@typescript-eslint/parser": "^4.28.1",
    "@vitejs/plugin-vue": "^1.4.0",
    "@vue/compiler-sfc": "^3.2.6",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vuedx/typecheck": "^0.7.4",
    "@vuedx/typescript-plugin-vue": "^0.7.4",
    "autoprefixer": "^10.2.6",
    "eslint": "^7.32.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^7.16.0",
    "lint-staged": "^11.0.0",
    "postcss": "^8.3.5",
    "prettier": "^2.3.2",
    "sass": "^1.35.1",
    "sass-loader": "^12.1.0",
    "svg-sprite-loader": "^6.0.9",
    "typescript": "^4.3.4",
    "vite": "^2.4.4",
    "yorkie": "^2.0.0"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "git add"
    ]
  }
}

配置多页面

在根目录下创建Pages文件, 内部创建页面文件夹

目录结构

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>测试</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.ts"></script>
<script type="module" src="../../src/assets/font/iconfont.js"></script>
</body>
</html>

main.ts

import { createApp } from 'vue';
import Search from './main.vue';

const app = createApp(Search);
app.mount('#app');

vite.config.js

  build: {
    rollupOptions: {
      input: {
        search: resolve(__dirname, 'Pages/SkuSearch/index.html')
    }
  }