vue3项目实战(二)--引入常用依赖

一、打开elementplus官网

elementplus官网链接

二、按照官网文档安装element plus并且配置好样式

2.1 安装element plus 和 Icon 图标

S E:\workspaces\workspace_gitee\xuanwu_gitee\vue\vite3-manage-front> npm install element-plus --save

added 23 packages, and audited 69 packages in 17s

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS E:\workspaces\workspace_gitee\xuanwu_gitee\vue\vite3-manage-front> npm install element-plus @element-plus/icons-vue

up to date, audited 69 packages in 3s

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

2.2 配置 Volar 支持

在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型

2.3 按需导入

2.3.1 按需导入组件安装

npm install -D unplugin-vue-components unplugin-auto-import

PS E:\workspaces\workspace_gitee\xuanwu_gitee\vue\vite3-manage-front> npm install -D unplugin-vue-components unplugin-auto-import

added 52 packages, and audited 121 packages in 7s

25 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

2.3.2 在vite.config.ts中配置

三、安装pinia

npm install pinia

PS E:\workspaces\workspace_gitee\xuanwu_gitee\vue\vite3-manage-front> npm install pinia

added 3 packages, and audited 124 packages in 4s

26 packages are looking for funding
  run `npm fund` for details

四、安装

npm install vue-router@4

PS E:\workspaces\workspace_gitee\xuanwu_gitee\vue\vite3-manage-front> npm install vue-router@4

added 1 package, and audited 125 packages in 3s

27 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

五、安装sass

npm install sass -D

PS E:\workspaces\workspace_gitee\xuanwu_gitee\vue\vite3-manage-front> npm install sass -D

up to date, audited 127 packages in 1s

27 packages are looking for funding
  run `npm fund` for details

六、安装eslint以及配置

6.1安装eslint

PS E:\workspaces\workspace_gitee\xuanwu_gitee\vue\vite3-manage-front> npm i eslint -D

added 92 packages, and audited 219 packages in 8s

48 packages are looking for funding
  run `npm fund` for details

6.2初始化eslint文件

 E:\workspaces\workspace_gitee\xuanwu_gitee\vue\vite3-manage-front> npm init @eslint/config
Need to install the following packages:
  @eslint/create-config@0.4.6
Ok to proceed? (y)
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard-with-typescript
√ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-standard-with-typescript@latest

The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^6.4.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0 typescript@*
√ Would you like to install them now? · No / Yes
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm
Installing eslint-plugin-vue@latest, eslint-config-standard-with-typescript@latest, @typescript-eslint/eslint-plugin@^6.4.0, eslint@^8.0.1, eslint-plugin-import@found 0 vulnerabilities
Successfully created .eslintrc.json file in E:\workspaces\workspace_gitee\xuanwu_gitee\vue\vite3-manage-front
PS E:\workspaces\workspace_gitee\xuanwu_gitee\vue\vite3-manage-front> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? ...
  To check syntax only
> To check syntax and find problems
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
Successfully created .eslintrc.cjs file in E:\workspaces\workspace_gitee\xuanwu_gitee\vue\vite3-manage-front

6.3 查看生成.eslintrc.cjs

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true,
        "jest": true
    },
    /* 继承已有的规则 */
    "extends": [
        'eslint:recommended',
        "plugin:@typescript-eslint/recommended",
        "standard-with-typescript",
        "plugin:vue/vue3-essential",
        'plugin:prettier/recommended',
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    /* 指定如何解析语法 */
    "parser": 'vue-eslint-parser',
    /* 优先级低于 parse 的语法解析配置 */
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "parser": "@typescript-eslint/parser",
        "project": ['./tsconfig.json'],
        "extraFileExtensions": ['.vue']
    },
    "plugins": [
        "vue",
        '@typescript-eslint'
    ],
    /*
     * "off" 或 0    ==>  关闭规则
     * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
     * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
     */
    "rules": {
        // eslint（https://eslint.bootcss.com/docs/rules/）
        'no-var': 'error', // 要求使用 let 或 const 而不是 var
        'no-multiple-empty-lines': ['warn', {max: 1}], // 不允许多个空行
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-unexpected-multiline': 'error', // 禁止空余的多行
        'no-useless-escape': 'off', // 禁止不必要的转义字符

        // typeScript (https://typescript-eslint.io/rules)
        '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
        '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
        '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
        '@typescript-eslint/no-non-null-assertion': 'off',
        '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
        '@typescript-eslint/semi': 'off',
        '@typescript-eslint/triple-slash-reference': 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off', // 允许不显式指定导出函数的返回类型
        '@typescript-eslint/no-unsafe-argument':'off',// 允许不安全的参数

        // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
        'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
        'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
        'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
        'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式

    }
}

6.4.eslintignore忽略文件

dist
node_modules

七、prettier安装及配置

7.1 安装 prettier

npm install -D eslint-plugin-prettier prettier eslint-config-prettier

PS E:\workspaces\workspace_gitee\xuanwu_gitee\vue\vite3-manage-front> npm install -D eslint-plugin-prettier prettier eslint-config-prettier

added 8 packages, and audited 347 packages in 5s

125 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

7.2新建 prettier 配置文件

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": true,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "always",
  "htmlWhitespaceSensitivity": "ignore",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto",
  "singleAttributePerLine": false
}

7.3新建prettierignore文件

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

7.4 完善 .eslintrc.cjs 文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true,
        "jest": true
    },
    /* 继承已有的规则 */
    "extends": [
        'eslint:recommended',
        "standard-with-typescript",
        "plugin:vue/vue3-essential",
        'plugin:prettier/recommended',
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    /* 指定如何解析语法 */
    "parser": 'vue-eslint-parser',
    /* 优先级低于 parse 的语法解析配置 */
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        '@typescript-eslint'
    ],
    /*
     * "off" 或 0    ==>  关闭规则
     * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
     * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
     */
    "rules": {
        // eslint（https://eslint.bootcss.com/docs/rules/）
        'no-var': 'error', // 要求使用 let 或 const 而不是 var
        'no-multiple-empty-lines': ['warn', {max: 1}], // 不允许多个空行
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-unexpected-multiline': 'error', // 禁止空余的多行
        'no-useless-escape': 'off', // 禁止不必要的转义字符

        // typeScript (https://typescript-eslint.io/rules)
        '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
        '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
        '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
        '@typescript-eslint/no-non-null-assertion': 'off',
        '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
        '@typescript-eslint/semi': 'off',

        // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
        'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
        'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
        'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
        'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式

    }
}

八、配置别名

8.1 安装依赖

下载 @types/node 包
npm install @types/node --save-dev

PS E:\workspaces\workspace_gitee\xuanwu_gitee\vue\vite3-manage-front> npm install @types/node --save-dev

added 2 packages, and audited 353 packages in 3s

125 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

8.2 vite.config.ts配置

8.2 tsconfig.json配置