vite2配置，搭建vue3+ts项目,vite中文文档。

前言：21年2月17日，vite2 正式发布，它解决了 vite1 配置路径别名bug，并丰富了构建项目的内容，可以直接使用vite2构建 vue3+ts 的项目啦！

重点：vite现在有中文文档了！文档地址：vite.xilinglaoshi.com/

步骤一：初始化项目，选项介绍，项目目录介绍。

使用 NPM:

npm init @vitejs/app
复制代码

使用 Yarn:

yarn create @vitejs/app
复制代码

输入你想要的项目名称

这里我们选择vue3 + ts。至于最后一个说实话，我也孤陋寡闻了。

之后进入项目，然后install我就不多说了。

二、项目结构介绍

可以看到js文件全部变成ts文件，这里详细介绍两个文件。

shims-vue.d.ts：组件中导入.vue结尾的文件ts会报错，这个文件是声明一个ambient module(即:没有内部实现的 module声明)

vite.config.ts：这里是vite的配置项，相当于vue-cli的vue.config.js文件，这里可以配置路径别名，项目跨域代理配置等。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
const path = require('path');

export default defineConfig({
  plugins: [vue()],
  alias: {
    '@': path.resolve(__dirname, './src'),
  },
  server: {
    proxy: {
      // 如果是 /lsbdb 打头，则访问地址如下
      '/sugrec': 'https://www.baidu.com',
      // 如果是 /lsbdb 打头，则访问地址如下
      '/lsbdb': {
        target: 'https://www.baidu.com',
        changeOrigin: true,
        // rewrite: path => path.replace(/^\/lsbdb/, '')
      },
    },
  },
});
复制代码

贴一份超简单的配置。

router、vuex、less、axios等各位就按照各自所需自行安装吧

npm install vue-i18n@next 
npm install vue-router@4
npm install vuex@next --save
npm install ant-design-vue@next --save
npm install axios --save
npm install nprogress --save
npm install less less-loader --save-dev

三、安装格式校验工具。

npm install @typescript-eslint/eslint-plugin -S
npm install @typescript-eslint/parser -S
npm install eslint -S
npm install eslint-config-prettier@7.2.0 -S  //这个一定要是7.2.0版本，其他版本配置会报错
npm install eslint-plugin-prettier -S
npm install eslint-plugin-vue -S
npm install prettier -S
npm install pretty-quick -S
npm install vue-eslint-parser -S

以上都是代码检查工具，可以通过配置让eslint对ts进行检查和美化，其中配置可自行根据需求更改。

prettier.config.js 的配置，这是prettier插件的配置项

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  vueIndentScriptAndStyle: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  bracketSpacing: true,
  trailingComma: 'es5',
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'lf',
  rangeStart: 0,
};

.eslintrc.js的配置项，导入了prettier.config.js的配置

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },

  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  rules: {
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    'vue/custom-event-name-casing': 'off',
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^h$',
        varsIgnorePattern: '^h$',
      },
    ],
    'no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^h$',
        varsIgnorePattern: '^h$',
      },
    ],
    'space-before-function-paren': 'off',

    'vue/attributes-order': 'off',
    'vue/one-component-per-file': 'off',
    'vue/html-closing-bracket-newline': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/attribute-hyphenation': 'off',
    // 'vue/html-self-closing': 'off',
    'vue/require-default-prop': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ],
  },
};

具体配置可以查看我的github：github.com/TimmyYagami…

四、项目结构个人推荐

总结：以上就是一个超简单的vite2使用方法啦，我只是一个在内卷中苦苦挣扎的大专生——天铭，希望和大家共同努力，只要我们足够努力，我们的老板就能早日过上自己想要的日子！