vite + vue3 + elementui + pinia搭建

vite + vue3 + element + pinia

      • vite + vue3 + elementui + pinia脚手架搭建过程
      • 开始搭建项目
      • eslint 支持(此处主要是用于定义代码规范,非必须安装,不建议新手执行)
      • prettier 支持(用于代码自动格式化,同样不推荐新手直接使用)
      • package.js 配置
      • 配置 vite.config.ts 文件
      • 配置路由
      • 封装 axios
      • 配置 pinia
      • 添加 elementui
      • 结尾

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

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

开始搭建项目

  • 执行yarn create vite,输入项目名称,如下图;
    输入名称
  • 选择框架vue和vue+ts,如下图;
    vite + vue3 + elementui + pinia搭建_第1张图片
  • 进入项目下执行yarn安装依赖完成后运行命令yarn dev可以看看基本框架效果,如下图;
    vite + vue3 + elementui + pinia搭建_第2张图片

vite + vue3 + elementui + pinia搭建_第3张图片

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,如图:
    vite + vue3 + elementui + pinia搭建_第4张图片

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,如图
      vite + vue3 + elementui + pinia搭建_第5张图片
      • 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 文件,如图
          vite + vue3 + elementui + pinia搭建_第6张图片

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,如图
      vite + vue3 + elementui + pinia搭建_第7张图片
  • 配置压缩静态资源 gzip
    • yarn add vite-plugin-compression -D
    • vite.config.ts -> plugins 添加,如图
      vite + vue3 + elementui + pinia搭建_第8张图片

配置路由

  • yarn add vue-router@4
  • src 新建 router 文件夹,如图
    vite + vue3 + elementui + pinia搭建_第9张图片
  • 修改 main.ts 文件,如图
    vite + vue3 + elementui + pinia搭建_第10张图片

封装 axios

  • yarn add axios nprogress
  • yarn add @types/nprogress -D
  • 新增 utils -> service 文件夹
  • 新增 api 文件夹以及 utils/service/http.ts,如图:
    vite + vue3 + elementui + pinia搭建_第11张图片
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 中配置,如图:
    vite + vue3 + elementui + pinia搭建_第12张图片
  • 创建 store,具体用法参照官网教程,如图:
    vite + vue3 + elementui + pinia搭建_第13张图片

添加 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()],
    }),
  ],
}

结尾

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

你可能感兴趣的:(前端,vue.js,javascript,mysql,elementui)