vite + vue3 + elementui + pinia搭建

vite + vue3 + elementui + pinia脚手架搭建过程

第一次尝试vue3，用vite搭建尝尝鲜，以下是我的搭建过程。

开始搭建项目

• 执行yarn create vite，输入项目名称，如下图；
  
• 选择框架vue和vue+ts，如下图；
  
• 进入项目下执行yarn安装依赖完成后运行命令yarn dev可以看看基本框架效果，如下图;
  

eslint 支持（此处主要是用于定义代码规范，非必须安装，不建议新手执行）

• yarn add eslint eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier @typescript-eslint/parser -D
• 项目根目录新建 .eslintrc.js 并配置相应规则，以下是我的配置，仅供参考；

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  parser: "vue-eslint-parser",
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: "@typescript-eslint/parser",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/no-unused-vars": "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/explict-module-boundary-types": "off",
    "arrow-body-style": "off", // 不可解决冲突
    "prefer-arrow-callback": "off", // 不可解决冲突
    // 关闭多根节点校验
    "vue/no-multiple-template-root": "off",
    // 关闭组件命名问题
    "vue/multi-word-component-names": "off",
    "no-var": "error",
    "prettier/prettier": "error",
    // 禁止出现console
    "no-console": "warn",
    // 禁止debugger
    "no-debugger": "warn",
    // 禁止出现重复的 case 标签
    "no-duplicate-case": "warn",
    // 禁止出现空语句块
    "no-empty": "warn",
    // 禁止不必要的括号
    "no-extra-parens": "off",
    // 禁止对 function 声明重新赋值
    "no-func-assign": "warn",
    // 禁止在 return throw continue 和 break 语句之后出现不可达代码
    "no-unreachable": "warn",
    // 强制所有控制语句使用一致的括号风格
    curly: "warn",
    // 要求 switch 语句中又 default 分支
    "default-case": "warn",
    // 强制尽可能使用点号
    "dot-notation": "warn",
    // 要求使用 === 和 !==
    eqeqeq: "warn",
    // 禁止 if 语句中 return 语句之后有 else 块
    "no-else-return": "warn",
    // 禁止出现空函数
    "no-empty-function": "warn",
    // 禁止不必要的嵌套块
    "no-lone-blocks": "warn",
    // 禁止使用多个空格
    "no-multi-spaces": "warn",
    // 禁止多次声明同一个变量
    "no-redeclare": "warn",
    // 禁止在 return 语句中使用赋值语句
    "no-return-assign": "warn",
    // 禁用不必要的 return await
    "no-return-await": "warn",
    // 禁止自我赋值
    "no-self-assign": "warn",
    // 禁止自我比较
    "no-self-compare": "warn",
    // 禁止不必要的 catch 子句
    "no-useless-catch": "warn",
    // 禁止多余的 return 语句
    "no-useless-return": "warn",
    // 禁止变量声明与外层作用域的变量同名
    "no-shadow": "off",
    // 允许 delete 变量
    "no-delete-var": "off",
    // 强制数组方括号中使用一致的空格
    "array-bracket-spacing": "warn",
    // 强制在代码块中使用一致的大括号风格
    "brace-style": "warn",
    // 强制使用骆驼拼写法命名约定
    camelcase: "off",
    // 强制使用一致的缩进
    indent: ["warn", 2],
    // 强制在 JSX 属性中一致地使用双引号或单引号
    "jsx-quotes": "off",
    // 强制可嵌套的块地最大深度4
    "max-depth": "warn",
    // 强制最大行数 300
    "max-lines": [
      "warn",
      {
        max: 1200,
      },
    ],
    // 强制函数最大代码行数 50
    "max-lines-per-function": [
      "warn",
      {
        max: 300,
      },
    ],
    // 强制行数块最多允许的语句数量 20
    "max-statements": ["warn", 100],
    // 强制回调函数最大嵌套深度
    "max-nested-callbacks": ["warn", 3],
    // 强制函数定义中最多允许的参数数量
    "max-params": ["warn", 3],
    // 强制每一行中所允许的最大语句数量
    "max-statements-per-line": [
      "warn",
      {
        max: 1,
      },
    ],
    // 要求方法链中每个调用都有一个换行符
    "newline-per-chained-call": [
      "warn",
      {
        ignoreChainWithDepth: 3,
      },
    ],
    // 禁止 if 作为唯一的语句出现在 else 语句中
    "no-lonely-if": "warn",
    // 禁止空格和 tab 的混合缩进
    "no-mixed-spaces-and-tabs": "warn",
    // 禁止出现多行空行
    "no-multiple-empty-lines": "warn",
    // 禁止出现
    semi: "off",
    // 强制在块之前使用一致的空格
    "space-before-blocks": "warn",
    // 强制在 function 的左括号之前使用一致的空格
    "space-before-function-paren": "off",
    // 强制在圆括号内使用一致的空格
    "space-in-parens": "warn",
    // 要求操作符周围有空格
    "space-infix-ops": "warn",
    // 要求在一元操作符前后使用一致的空格
    "space-unary-ops": "warn",
    // 强制在注释中 // 或 /* 使用一致的空格
    "spaced-comment": "warn",
    // 强制 switch 的冒号左右有空格
    "switch-colon-spacing": "off",
    // 强制箭头函数的奸头前后使用一致的空格
    "arrow-spacing": "warn",
    "prefer-const": "warn",
    "prefer-rest-params": "warn",
    "no-useless-escape": "warn",
    "no-irregular-whitespace": "warn",
    "no-prototype-builtins": "warn",
    "no-fallthrough": "warn",
    "no-extra-boolean-cast": "warn",
    "no-case-declarations": "warn",
    "no-async-promise-executor": "warn",
  },
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly",
  },
};

• 项目根目录新建 .eslintignore，如图：
  

prettier 支持（用于代码自动格式化，同样不推荐新手直接使用）

• yarn add prettier -D
• 解决 eslint 和 prettier 冲突，以 prettier 规范为准
  • yarn add eslint-config-prettier -D
  • 项目根目录下新建 .prettierrc.js 并配置相应规则

  module.exports = {
    eslintIntegration: true,
    printWidth: 120,
    tabWidth: 2,
    useTabs: false,
    semi: true,
    vueIndentScriptAndStyle: false, // vue script 和 style 添加缩进
    singleQuote: false,
    quoteProps: "as-needed",
    bracketSpacing: true,
    trailingComma: "all",
    jsxBracketSameLine: true,
    jsxSingleQuote: true,
    arrowParens: "always",
    insertPragma: false,
    requirePragma: false,
    proseWrap: "never",
    htmlWhitespaceSensitivity: "strict",
    endOfLine: "lf",
    embeddedLanguageFormatting: "auto", // 对引用代码进行格式化
  };
  

  • 项目下新建 .prettierignore，如图
    
    • vscode 配置
      • 安裝 eslint，prettier，vetur 扩展
      • vscode 中 setting.json 文件中补充；

      		{
      		    "editor.formatOnSave": true,
      		    "editor.formatOnType": true,
      		    "editor.codeActionsOnSave": {
      		        "source.fixAll.eslint": true
      		    },
      		    "vetur.format.defaultFormatter.html": "prettier",
      		    "[css]": {
      		        "editor.defaultFormatter": "esbenp.prettier-vscode"
      		    },
      		    "[scss]": {
      		        "editor.defaultFormatter": "esbenp.prettier-vscode"
      		    }
      		}
      	```
      

    • 配置编辑器
      • 在项目根目录下创建 .editorconfig 文件，如图
        

package.js 配置

• 配置 script

{
    "script": {
        "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
        "prettier": "prettier --write ."
    }
}

• 运行命令测试

# eslint 检查
yarn lint
# prettier 自动格式化
yarn prettier

配置 vite.config.ts 文件

• path 模块是 node.js 内置功能，node.js 本身不支持 typescript，所以需要安装 @type/node，执行 yarn add @types/node -D
• 配置 tsconfig.json 文件

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules", "dist", "**/*.js"]
}

• 配置 css 预处理器 scss / less
  • yarn add sass -D 或者 yarn add less
  • vite.config.ts 中配置 preprocessorOptions，如图
    
• 配置压缩静态资源 gzip
  • yarn add vite-plugin-compression -D
  • vite.config.ts -> plugins 添加，如图
    

配置路由

• yarn add vue-router@4
• src 新建 router 文件夹，如图
  
• 修改 main.ts 文件，如图
  

封装 axios

• yarn add axios nprogress
• yarn add @types/nprogress -D
• 新增 utils -> service 文件夹
• 新增 api 文件夹以及 utils/service/http.ts，如图：
  

import { def } from "@vue/shared";
import axios, { AxiosRequestConfig } from "axios";
import NProgress from "nprogress";

const service = axios.create({
  responseType: "text",
  baseURL: 'api/',
  timeout: 6 * 1000,
  withCredentials: true,
  headers: {
    "content-type": "application/json",
  },
} as AxiosRequestConfig);

service.interceptors.request.use(
  (config): AxiosRequestConfig<any> => {
    NProgress.start();

    return config;
  },
  (error) => {
    return error;
  },
);

service.interceptors.response.use((res) => {
  NProgress.done();

  return res;
});

export default service;

配置 pinia

• yarn add pinia@next
• main.ts 中配置，如图：
  
• 创建 store，具体用法参照官网教程，如图：
  

添加 elementui

• yarn add element-plus
• yarn add unplugin-vue-components unplugin-auto-import -D
• vite.config.ts配置：

// 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 {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

结尾

以上就是一个简单的项目结构配置，具体使用需要根据自己需求而定，欢迎指出不足指出，大家一起学习进步。