创建完整的Vite + Vue3 + TypeScript + ESLint + prettierrc + Sass后台管理框架

相关网站

1. Vite中文官网：Vite中文官网

2. Vue3中文官网：Vue3中文官网

3. Element Plus官网：Element Plus官网

一、创建项目

安装Vite

# npm
npm init @vitejs/app

# yarn
yarn create @vitejs/app

新建Vue3项目

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

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

# yarn
yarn create @vitejs/app my-vue-app --template vue

// 支持的模板预设包括：
vanilla
vue
vue-ts // 推荐vue-ts模版
react
react-ts
preact
preact-ts
lit-element
lit-element-ts

二、修改依赖文件

打开项目，替换package.json文件

{
  "name": "vite-vue3-templete",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "sass": "^1.32.8",
    "vue": "^3.2.0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.1.5",
    "@typescript-eslint/eslint-plugin": "^4.15.1",
    "@typescript-eslint/parser": "^4.15.1",
    "@vue/compiler-sfc": "^3.0.4",
    "eslint": "^7.20.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.6.0",
    "prettier": "^2.2.1",
    "typescript": "^4.1.3",
    "vite": "^2.0.5"
  }
}

三、配置ESLint

新建.eslintrc.js，添加以下代码

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  env: {
    node: true,
    es6: true,
    browser: true
  },
  globals: {
    Markdown: true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
    'eslint: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',
    '@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',
    'quotes': ['error', 'single'],
    'comma-dangle': ['error', 'never'],
    'vue/require-default-prop': 'off',
    'vue/custom-event-name-casing': 'off',
    'no-use-before-define': 'off',
    'vue/comment-directive': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/html-self-closing': 'off',
    'vue/max-attributes-per-line': 'off'
  }
}

三、配置prettierrc

新建.prettierrc，添加以下代码

{
  "eslintIntegration": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "vueIndentScriptAndStyle": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "bracketSpacing": true,
  "trailingComma": "none",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "insertPragma": false,
  "requirePragma": false,
  "proseWrap": "never",
  "htmlWhitespaceSensitivity": "strict",
  "endOfLine": "lf"
}

四、配置全局Scss

1、在/src/assets/下新建commom.scss文件 2、修改vite.config.ts代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 公共样式
  css: {
    // 🔥此处添加全局scss🔥
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/assets/common.scss";'
      }
    }
  },
  // 服务
  server: {
    open: false,
    port: 8080,
    // 代理配置
    proxy: {
      '/api': 'http://192.168.20.88:8888',
    }
  },
  build: {
    // 打包后目录,默认dist
    outDir: 'dist',
  },
  // 引入第三方的配置
  optimizeDeps: {
    include: []
  },
  // 生产环境路径，类似webpack的assetsPath
  base: './',
})

五、安装依赖、启动项目

 // 安装依赖
 cnpm i

 // 启动项目
 npm run dev

六、总结和注意事项

一个由Vite构建的Vue3项目就搭建好了，支持TypeScript语法，CSS预处理器为Sass，使用ESLint和prettierrc风格格式化代码：

  npm i xxx --save
  // 或
  cnpm i xxx --save
  // 或
  yarn add xxx --save
  // --save不写的话，新的依赖文件不会写进package.json文件中