我的博客

# 企业级项目初始化

# 使用 Vite 构建 vue3 项目

npm create vite@latest (项目名称)

# 在根目录中创建vite项目

npm create vite .

# 运行时自动打开浏览器 配置端口 地址

在 vite.config.ts 文件中加入

export default defineConfig({
    plugins: [vue()],
    server: {
        open: true, //自动打开浏览器,
        // host:"" ,//配置地址
        port: 3001, //配置端口
    },
});

# vite.config.ts 情景配置

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

export default defineConfig(可为对象或函数);
//当传递函数时 该函数接收三个参数
//1. mode : 项目运行模式


export default defineConfig(({mode}) => {
    console.log(mode)
    return Object.assign(evnResolver[mode](), {
        plugins: [vue()]
    })
})

# vite.config.ts 开发 生产环境配置分离

  1. 项目根目录新建config.js配置文件夹 用于存放开发和生产的配置文件
  2. 该文件夹中新建dev.ts和prod.ts配置文件 dev.ts文件用于开发环境配置 prod.ts文件用于生产环境配置
//dev.js
/**
 *
 * @type import('vite').UserConfig
 */
export const devConfig = {

    //----配置
}

prod.ts文件同理

//开发环境部分配置
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'
import {fileURLToPath} from 'url'

/**
 *
 * @type import('vite').UserConfig
 */
export const devConfig = {
    plugins: [vue(), eslintPlugin()],
    resolve: {
        alias: {
            // '@': '/src'
            '@': fileURLToPath(new URL('../src', import.meta.url))
        },
        //配置文件后缀自动检索
        extensions: ['.js', '.ts', '.jsx', '.tsx', '.json']
    },
    //配置路径别名
    server: {
        port: 3000,
        strictPort: true,
        open: true
    }
}
  1. 文件夹中新建index.ts配置文件 用于导出配置文件
  2. 在vite.config.ts文件中加入配置
import {defineConfig} from 'vite'
import {evnResolver} from './config/index.js'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig(({mode}) => {
    console.log(mode)
    return Object.assign(evnResolver[mode](), {
        base: '/',
        build: {},
        plugins: [vue()]
    })
})

# 环境变量配置

  1. 在config.js配置文件中新建env环境变量文件夹

  2. 在env文件夹中新建.env.development和.env.production环境变量配置文件

    注意

    环境变量默认写在根目录中才生效 而此时我们写在config.js中，因此需要到vite.config.js中修改配置

  3. 在vite.config.js文件中加入环境变量配置

    
envDir: resolve(__dirname, 'config/env')


    VITE_NAME='ViteUi-dev'

    注意

    .env文件的变量名均需要大写

  4. 不同环境下测试

  • 在生产环境下测试
npm run preview

# 别名路径联想提示

在编写代码的过程中，一旦输入@/，编辑工具会立刻联想出 src 下的所有子目录和文件，同一文件路径访问不容易出错

# 如何进行配置

  1. 在项目的根目录下新增jsconfig.json文件

  2. 添加 json 格式的配置项 如下

    {
"compilerOptions":{
"baseUrl": "./",
"paths" : {
"@/*" : ["src/*"]
},
"resolveJsonModule": true,
"esModuleInterop": true,
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"exclude": ["node_modules", "dist", "build"]
},
"vueCompilerOptions": {
"experimentalDisableTemplateSupport": true
},
"include": ["src/**/*"]
}

    注意

    这个配置项只做编译器代码联想提示
    负责把@符转化为 src 的是vite.config文件夹下alias的配置
    两个配置起来才能完成一个路径的提示

             export default defineConfig({
    plugins: [vue()],
    resolve: {
        //负责把`@`符转化为 src
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },
});

  3. 在vite.config.js文件中加入配置

import {defineConfig} from 'vite'
import {fileURLToPath, URL} from 'url'

export default defineConfig({
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('../src', import.meta.url))
        }
        ,
        //配置文件后缀自动检索
        extensions: ['.js', '.ts', '.jsx', '.tsx', '.json']
    }
})

# eaLint和prettier的配置

  • eslint运行代码前就可以发现一些语法错误和潜在的 bug，目标是保证团队代码的一致 性和避免错误
  • prettier是代码格式化工具，用于检测代码中的格式问题，比如单行代码长度，tab 长 度，空格，逗号表达式等等 区别联系：eslint偏向于把控项目的代码质量，而prettier更偏向于统一项目的编码 风格。eslint有小部分的代码格式化功能，一般和prettier结合使用

# 安装esLint和prettier

pnpm i eslint 
eslint-plugin-vue 
eslint-config-prettier 
prettier 
eslint-plugin-import 
eslint-plugin-prettier 
eslint-config-airbnb-base -D
插件 描述
eslint eslint的核心代码库
prettier prettier的核心代码库
eslint-config-airbnb-base airbnb代码规范(依赖plugin-import)
eslint-plugin-vue eslint在vue中的代码规范
eslint-plugin-import 项目import导入规范
eslint-config-prettier 将eslint与prettier结合的插件

# 配置script脚本，项目安装eslint配置

在package.json文件中加入运行脚本命令 并运行

 {
  "scripts": {
    "lint:create": "eslint --init"
  }
}

运行 会自动创建.eslintrc.cjs文件

npm run lint:create

# 安装其他依赖包

pnpm install 
typescript 
@typescript-eslint/parser 
@typescript-eslint/eslint-plugin 
eslint-import-resolver-alias 
@types/eslint @types/node -D
插件 描述
eslint eslint的核心代码库
@typescript-eslint/parser eslint解析器，解析typescript，检查规范typescript代码
@typescript-eslint/eslint-plugin eslint插件，包含了各类定义好的检测typescript代码的规范
eslint-import-resolver-alias 让我们可以用import的时候使用@别名
@types/eslint @types/node -D node语法检查

# eslintrc文件的修改

因为eslint是 node 工具，所以文件名是.cjs结尾(commonjs 规范)——对应 的.mjs就是 ES Module 规范

module.exports = {
    // 环境:
    env: {
        // 浏览器
        browser: true,
        // 最新es语法
        es2021: true,
        // node环境
        node: true,
    },
    // 扩展的eslint规范语法，可以被继承的规则
    // 字符串数组：每个配置继承它前面的配置
    // 分别是：
    // eslint-plugin-vue提供的
    // eslint-config-airbnb-base提供的
    // eslint-config-prettier提供的
    // 前缀 eslint-config-, 可省略
    extends: [
        'plugin:vue/vue3-strongly-recommended',
        'airbnb-base',
        'prettier'
    ],
    // eslint 会对我们的代码进行检验
    // parser的作用是将我们写的代码转换为ESTree（AST）
    // ESLint会对ESTree进行校验
    parser: 'vue-eslint-parser',
    // 解析器的配置项
    parserOptions: {
        // es的版本号，或者年份都可以
        ecmaVersion: 'latest',
        parser: '@typescript-eslint/parser',
        // 源码类型 默认是script，es模块用module
        sourceType: 'module',
        // 额外的语言类型
        ecmaFeatures: {
            tsx: true,
            jsx: true,
        },
    },
    // 全局自定义的宏，这样在源文件中使用全局变量就不会报错或者警告
    globals: {
        defineProps: 'readonly',
        defineEmits: 'readonly',
        defineExpose: 'readonly',
        withDefault: 'readonly',
    },
    // 插件
    // 前缀 eslint-plugin-, 可省略
    // vue官方提供了一个ESLint插件 eslint-plugin-vue，它提供了parser和rules
    // parser为 vue-eslint-parser，放在上面的parsr字段，rules放在extends字段里，选择合适的规则
    plugins: [
        'vue',
        '@typescript-eslint'
    ],
    settings: {
        // 设置项目内的别名
        'import/reslover': {
            alias: {
                map: [
                    ['@', './src']
                ],
            },
        },
        // 允许的扩展名
        'import/extensions': ['.js', '.jsx', '.ts', '.tsx', '.mjs'],
    },
    // 自定义规则，覆盖上面extends继承的第三方库的规则，根据组内成员灵活定义
    rules: {
        'import/no-extraneous-dependencies': 0,
        'no-param-reassing': 0,
        'vue/multi-word-commponent-names': 0,
        'vue/attribute-hyphenation': 0,
        'vue/v-on-event-hyphenation': 0,
    },
};

修改 package.json 文件，添加一个脚本命令

 "lint": "eslint \"src/*/.{js,vue,ts}\" --fix"

# 修改vite.config.js

安装vite-plugin-eslint插件
vite的一个插件，让项目可以方便的得到eslint支持，完成eslint配置后，可以快速的将其集成进vite之中，便于在代码不符合eslint规范的第一时间看到提示

pnpm install vite-plugin-eslint -D


import eslintPlugin from 'vite-plugin-eslint'

plugins: [vue(), eslintPlugin()]

# 修改添加常见配置文件

外部新建文件 .eslintrcignore、.prettierrc.cjs、.prettierignore

.eslintrcignore文件内容：

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
/bin
.eslintrc.js
prettier.config.js
/src/mock/*

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

.DS_Store
dist-ssr
*.local

/cypress/videos/
/cypress/screenshots/

# Editor directories and files
.vscode
!.vscode/extensions.json
.idea
*.suo
*.njsproj
*.sln
*.sw?

components.d.ts

//.prettiercjs.js文件内容：

module.exports = {
    // 一行最多多少字符
    printWidth: 80,
    // 使用2个空格缩进
    tabWidth: 2,
    // 使用tab缩进，不使用空格
    useTabs: true,
    // 行尾需要分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 对象的key仅在必要时使用引号
    quoteProps: 'as-needed',
    // jsx不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 尾随逗号
    trailingComma: 'es5',
    // 大括号内的收尾需要空格
    bracketSpacing: true,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的@prettier
    requirePragma: false,
    // 不需要自动在文件开头插入@prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'always',
    // 根据显示样式决定html要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用lf
    endOfLine: 'lf',
};

.prettierignore文件内容：

/dist/*
.local
.output.js
/node_modules/**
src/.DS_Store

**/*.svg
**/*.sh

/public/*
components.d.ts

修改 package.json 文件，添加一个脚本命令

"prettier-format": "prettier --config .prettierrc.cjs \"src/**/*.{vue,js,ts}\" --write"

# tsconfig.json文件配置

{
  "compilerOptions": {
    // 指定es的目标版本
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    // 决定如何处理模块
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    // 编译过程中需要引入的库文件的列表
    "lib": [
      "ESNext",
      "DOM",
      "DOM.Iterable"
    ],
    // 默认所有可见的"@types"包会在编译过程中被包含进来
    "types": [
      "vite/client"
    ],
    "skipLibCheck": true,
    "noEmit": true,
    // 解析非相对模块名的基准目录
    "baseUrl": ".",
    // 模块名到基于baseurl的路径映射的列表
    "paths": {
      "@/": [
        "scr/"
      ],
      "*.ts": [
        "*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

# stylelint 配置

  1. 给css加浏览器兼容前缀等适应操作 安装postcss
    pnpm add -D autoprefixer postcss
  2. 校验css
    pnpm add -D stylelint stylelint-config-standard  stylelint-config-recommended  vite-plugin-stylelint
  3. 使用scss和 scss lint 需要在IDE stylelint加上支持scss文件
    pnpm add -D sass stylelint-config-standard-scss
  4. 在vite.config.js中加入校验sass控制台报错插件
    import stylelint from 'vite-plugin-stylelint';

stylelint()
  5. 项目根目录中新建.stylelintrc.cjs配置文件
    module.exports = {

extends: ['stylelint-config-recommended', 'stylelint-config-standard', 'stylelint-config-standard-scss'],
rules: {
'custom-property-empty-line-before': null,
'rule-empty-line-before': null,
'selector-class-pattern': null,
'max-line-length': null,
'scss/no-global-function-names': null,
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['global']
}
],
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep']
}
],
'no-empty-source': null,
'named-grid-areas-no-invalid': null,
'unicode-bom': 'never',
'no-descending-specificity': null,
'font-family-no-missing-generic-family-keyword': null,
'declaration-colon-space-after': 'always-single-line',
'declaration-colon-space-before': 'never',
'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }]
}
}
  6. 项目根目录中新建.stylelintignore忽略配置文件
    *.js
.vue
.json
dist
src/styles/normalize.css
src/styles/variables.module.scss

# postcsscss自动加入浏览器前缀插件

postcss依赖autoprefixer插件

# 配置

  1. 安装插件

    pnpm add -D autoprefixer postcss

  2. 项目根目录中新建.postcssrc.cjs配置文件

    module.exports = {
plugins:{'autoprefixer': {}}
}

  3. 或者使用vite自带的postcss功能，只需要在vite.config.js中配置css即可

    export default defineConfig({
    //配置css
 css: {
    postcss: {
        plugins: [autoprefixer]
    }
}
})

# vite项目字体图标配置

# 安装插件

pnpm add  -D  vite-plugin-svg-icons

# 在vite.config.js中进行配置

export default defineConfig({
    plugins: [vue(),
        createSvgIconsPlugin({
            iconDirs: [resolve(process.cwd(), 'src/icons/svg')],
            symbolId: 'icon-[dir]-[name]',
            svgoOptions: false
        })
    ]
})

# 在main.js中引入

/* 导入svg使用 */
import 'virtual:svg-icons-register'
import svgIcon from '@/icons/svg-icon.vue'

app.component('svg-icon', svgIcon)

# svg-icon组件


<template>
  <svg class="svg-icon" aria-hidden="true" :style="{ height: props.size + 'rem', width: props.size + 'rem' }">
    <use :xlink:href="iconName" fill=""/>
  </svg>
</template>
<script setup>
  import {computed, defineProps} from 'vue'

  const props = defineProps({
    name: {
      type: String,
      required: true
    },
    size: {
      type: String,
      default: '1.5'
    }
  })

  const iconName = computed(() => `#icon-${props.name}`)
</script>
<style scoped>
  .svg-icon {
    position: relative;
    fill: currentColor;
    vertical-align: -2px;
  }
</style>

# 使用


<svg-icon name="list" size="10"></svg-icon>

# tailwindcss 样式集成 类似bootstrap

# 安装插件

官网 (opens new window)

pnpm add -D  @tailwindcss/line-clamp  postcss-nesting  tailwindcss postcss-import
  1. @tailwindcss/line-clamp ：多行文本省略插件
  2. postcss-nesting : 使css支持嵌套
  3. tailwindcss
  4. postcss-import : 就是让你的css文件支持@import
    参考文档 (opens new window)

# 运行pnpm tailwindcss init -p生成配置文件

# postcss.config.js

export default {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {}
    }
}

# tailwind.config.js

export default {
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    corePlugins: {
        preflight: false //关闭tailwindcss自带的清除浏览器默认样式功能
    },
    content: [],
    theme: {
        extend: {}
    },
    plugins: [
        import('@tailwindcss/line-clamp') //超出省略
    ]
}

# 在全局css文件中导入样式

@import 'tailwindcss/tailwind.css';

# 使用


<template>
  <div class="bg-cyan-200 w-1/2 h-full">123</div>
</template>

# 多行文本省略使用

在HTML中，使用line-clamp-{n} 类定义省略几行


<template>
  <div class="line-clamp-3">
    Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus.
    Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus
    et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
  </div>
</template>

# 自动化导入

# 安装插件

pnpm add -D unplugin-auto-import  unplugin-vue-components  vite-plugin-vue-setup-extend
  1. unplugin-auto-import : 自动导入vue,vueRouter等语法糖
  2. unplugin-vue-components :自动导入组件
  3. vite-plugin-vue-setup-extend : 使setup语法糖可以添加name属性

# 配置

在vite.config.js中进行配置

import autoImport from 'unplugin-auto-import/vite'
import components from 'unplugin-vue-components/vite'
import setupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
    plugins: [
        vue(),
        //setup语法糖设置名字
        setupExtend(),
        components({
            dirs: ['src/components'],
            dts: `./type/components.d.ts`,
            deep: true
        }),
        autoImport({
            //vue,pinia,vue-router,vue-i18n,@vue/core
            imports: ['vue', 'vue-router'], //自动导入vue，vueRouter 语法
            //dirs: ['src/utils'],//默认自动导入的自定义函数和数据
            dts: './type/auto-imports.d.ts',
            eslintrc: {
                //默认false，true启用 false生成一次就可以 避免每次工程启动的时候都生成
                enabled: true,
                filepath: './.eslintrc-auto-import.json', //生成eslint声明文件 避免eslint报错
                globalsPropValue: true
            }
        })
    ]

})

# unplugin vue components不能识别组件自动导入类型pnpm

unplugin-vue-components 是一款能帮助组件自动导入的库，简单点的说，你不需要使用import xx from 'xxx.vue' 这行语句也能实现导入的效果。 但是问题来了，使用pnpm的用户，我相信许多人是实现不了这上效果的😀😀😀。当所有的配置文件配好，引入组件时 ide工具并不能识别该组件类型！ 在组件使用的地方的类型是any
解决方案
在目录的根目录中创建或编辑.npmrc文件，并在其中添加以下行：public hoist pattern[]=@vue/runtime core

# 配置eslint规则继承

在eslint规则配置文件中配置规则继承`.eslintrc.cjs``

module.exports = {
    extends: [
		'plugin:vue/vue3-strongly-recommended',
		'airbnb-base',
		'prettier',
	'./.eslintrc-auto-import.json'
	],
}

# 自动化导入vueUse


autoImport({
    ////
    imports: ['vue', 'vue-router', '@vue/core'], //自动导入vue，vueRouter 语法
})

# 静态资源的引入和使用

# 在vue原型中添加属性

添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权。
添加一个全局的$http属性示例

// vue2.0
vue.prototype.$http = () => www.baidu.com
//vue3.0
app.config.globalProperties.$http = () => www.baidu.com

# 使用

getCurrentInstance代表上下文，即当前实例。ctx相当于Vue2的this, 但是需要特别注意的是ctx代替this只适用于开发阶段，如果将项目打包放到生产服务器上运行，就会出错，ctx无法获取路由和全局挂载对象的。此问题的解决方案就是使用 proxy替代ctx，代码参考如下。

//vue2.0
this.$http()
//vue3.0
import {getCurrentInstance} from 'vue'

const {proxy} = getCurrentInstance()
proxy.$http()

注意

vue3推荐使用依赖注入provide和inject 因为全局属性可以被任何人修改

new URL参考文章 (opens new window)

# 静态资源动态引用

# 在vue实例中挂载引入静态图片方法

//main.js
app.config.globalProperties.$static = (url) => new URL(`./assets/${url}`, import.meta.url).href

# 使用


<template>
  <img src="$static('vue.svg')"/>
</template>

# setup name 增强

# 插件 vite-plugin-vue-setup-extend

# vue.config.js 配置

import {defineConfig} from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
    plugins: [
        VueSetupExtend()
    ]
})

# 使用

//子组件
<script lang="ts" setup name="firstPage">
  import {onMounted} from 'vue'

  onMounted(() => {
    console.log('mounted')
  })
</script>
//父组件
<script setup>
  import componse from './index.vue'

  console.log(componse.name)//firstPage

</script>

# element plus 的安装

  1. 安装 elementPlus 和自动导入插件
//--save 在开发环境和生产环境都依赖
pnpm add element-plus --save
//-D 只在开发环境中依赖
pnpm add -D unplugin-vue-components unplugin-auto-import
  1. 配置自动按需导入
import {fileURLToPath, URL} from "node:url";
import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
// 配置element-plus 按需引入
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // 配置插件
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },
});

文档实例 (opens new window)

  1. 测试组件

<template>
    <el-button type="primary">i am button</el-button>
</template>

# 生产环境 集成打包报告插件

# 安装插件

pnpm add  -D rollup-plugin-visualizer

# 配置

生产环境下配置

import {visualizer} from 'rollup-plugin-visualizer'

visualizer({
    open: mode === 'production',//判断生产环境还是开发环境
    gzipSize: true,
    brotliSize: true,
    filename: resolve(process.cwd(), 'dist/report.html')
})

# 生产环境一处console.log()

# 安装插件

pnpm add  -D vite-plugin-remove-console

# 配置

上次更新: 2/26/2025, 5:30:06 PM

← eslint →