初始化vue3（构建、配置）

小白菜_12138

已于 2024-04-08 11:20:25 修改

阅读量724

点赞数 4

分类专栏： vue3 TS 文章标签： vue 前端自动化

于 2024-02-28 14:38:42 首次发布

本文链接：https://blog.csdn.net/Define_best/article/details/136340434

版权

TS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

白弟的记性不好，正所谓好记性不如烂笔头，还是把一些知识写下来更好，这一篇文章主要讲的就是初始化vue3项目的一些常规的配置，自动化部署在另一篇文章，大家可以自行查阅。

一、项目初始化（用的vite2）

npm init vite@2
......
vue
......
vue-ts
...success!

二、插件安装

项目运行时需要的依赖（dependencies）

npm i axios nprogress pinia pinia-plugin-persist qs screenfull vue-router

项目开发时所需要的依赖（devDependencies）

npm i -D unplugin-auto-import unplugin-vue-components sass @types/nprogress @types/qs eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-promise eslint-plugin-vue vite-svg-loader prettier typescript @typescript-eslint/parser @vitejs/plugin-vue @vitejs/plugin-vue-jsx@1.3.8 vite-plugin-svg-icons vite-plugin-style-import consola

三、插件配置

自动引入api插件： unplugin-auto-import unplugin-vue-components

在根目录创建 build/plugins/auto-import.pligin.ts 文件，然后配置文件生成和导入配置

export default [
    AutoImport({
        include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/], //指定要自动导入的文件类型
        eslintrc: {
            enabled: false, //表示不使用自动导入生成的代码进行编译
            filepath: './auto-import/.eslintrc-auto-import.json',
            globalsPropValue: true,
        },
        imports: ['vue', 'vue-router'],
        resolvers: [ElementPlusResolver()],
        dts: './auto-import/auto-import.d.ts',
    }),
    Components({
        include: [/\.vue$/, /\.vue\?vue/, /\.js$/, /\.jsx$/, /\.ts$/, /\.tsx$/],
        deep: true,//检索子目录
        extensions: ['vue', 'js', 'jsx', 'ts', 'tsx'],//要检索的拓展名
        dirs: ['src/components', 'src/common'], //指定要搜索组件的目录
        dts: './auto-import/components.ts', //指定自动生成的 TypeScript 文件路径
        resolvers: [
            ElementPlusResolver({
                importStyle: 'sass',
            }),
        ],//使用ElementPlusResolver解析sass样式
    }),
    createStyleImportPlugin({
        resolves: [ElementPlusResolve()],
    }),
]

创建sgv-icon图标组件

在build/pligins中创建 svg-icon.plugin.ts 文件

export default createSvgIconsPlugin({
  iconDirs: [resolve(process.cwd(), 'src/assets/icons/svgs')],
  svgoOptions: true, //默认true，压缩svg
  symbolId: 'icon-[dir]-[name]',
})

在同一层级创建 index.ts 文件

const vitePlugins: (PluginOption | PluginOption[])[] = [
    vue(),
    vueJsx(),
    svgLoader(),
    AutoImportPlugin,
    svgIconsPlugin,
]

在plugins目录同级创建index.ts 文件将刚刚封装的暴露出去

import plugins from './plugins/index'
export { plugins }

四、配置 prettier + eslint

配置eslintrc

在项目根目录创建 .eslintrc.js 文件，其中需要配置的 rules 大家可以按自己需求来制定

module.exports = {
    root: true,
    env: { //定义环境变量 浏览器、node、es6以上
        browser: true,
        node: true,
        es6: true,
    },
    parser: 'vue-eslint-parser', //使用表示使用Vue的ESLint解析器
    parserOptions: { //定义了解析器的选项，包括使用@typescript-eslint/parser作为解析器
        parser: '@typescript-eslint/parser',
        ecmaVersion: 'latest',
        sourceType: 'module',
    },
    extends: [ //定义了扩展的规则，包括Vue的推荐规则、TypeScript的推荐规则和Prettier的推荐规则
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended',
    ],
    plugins: ['vue', '@typescript-eslint'], //定义了使用的插件，包括Vue和TypeScript
    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',
        'vue/custom-event-name-casing': 'off',
        'no-use-before-define': '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',
        'space-before-function-paren': 'off',
        'vue/attributes-order': 'off',
        'vue/one-component-per-file': 'off',
        'vue/html-closing-bracket-newline': 'off',
        'vue/max-attributes-per-line': 'off',
        'vue/multiline-html-element-content-newline': 'off',
        'vue/singleline-html-element-content-newline': 'off',
        'vue/attribute-hyphenation': 'off',
        'vue/require-default-prop': 'off',
        'vue/require-explicit-emits': 'off',
        'vue/multi-word-component-names': 'off',
        'vue/v-on-event-hyphenation': 'off',
    },
}

在同样的位置创建 .eslintignore 文件

#下列文件不尽兴eslint校验 
node_modules
src/assets/*
*.md
dist
.vscode
/public

配置prettier

在同样的位置创建 .prettierrc.js 文件

module.exports = {
    printWidth: 100, //超过宽度自动换行
    semi: false, //结尾不用分号
    vueIndentScriptAndStyle: true, //启用vue script 缩进
    singleQuote: true, //使用单引号
    trailingComma: 'es5', //遵循es5标准  是否在对象或数组结束后添加逗号
    proseWrap: 'never', //段落文本中始终不换行
    htmlWhitespaceSensitivity: 'strict', //对HTML全局空白敏感
    endOfLine: 'auto', //结束行形式
}

五、配置CICD 文件

在项目根目录创建 .gitlab-ci.yml、Dockerfile、nginx.conf文件，具体配置就不在这里展示了(主要是我自己也不熟，怕讲错了，sorry)...只是在这里声明有这么一步

六、配置vite.config.ts

我这里主要是配置了这么几项

插件配置（上面👆暴露出来的插件）
css配置
打包配置（build）
esbuild配置
反向代理配置
optimizeDeps 配置

export default defineConfig((config: UserConfig) => {
  const isDev = config.mode === 'development'
  const isProd = config.mode === 'production'
  return {
    base: isDev ? './' : '/',
    plugins: [...plugins],
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/styles/global.scss" as *;`,
        }
      },
      postcss: {
        plugins: [
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === 'charset') {
                  atRule.remove()
                }
              },
            },
          },
        ],
      },
    },
    build: {
      target: 'esnext', //默认'modules'
      assetsInlineLimit: 4096,
      cssCodeSplit: isProd, //默认true, CSS代码拆分
      sourcemap: !isProd,
      minify: isProd ? 'terser' : 'esbuild', // 'terser' 相对较慢，但大多数情况下构建后的文件体积更小。'esbuild' 最小化混淆更快但构建后的文件相对更大。
      terserOptions: {
        compress: {
          drop_console: isProd, // 生产环境去除console
          drop_debugger: isProd, // 生产环境去除debugger
        },
      },
      rollupOptions: {
        output: {
          // 最小化拆分包
          manualChunks: {
            // 拆分代码，这个就是分包，配置完后自动按需加载，现在还比不上webpack的splitchunk，不过也能用了。
            vue: ['vue', 'vue-router'],
            elementPlus: ['element-plus'],
          },
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
          entryFileNames: 'js/[name].[hash].js',
          // 用于命名代码拆分时创建的共享块的输出命名
          chunkFileNames: 'js/[name].[hash].js',
          // 用于输出静态资源的命名，[ext]表示文件扩展名
          assetFileNames: '[ext]/[name].[hash].[ext]',
        },
      },
    },
    esbuild: {
      jsxFactory: 'h',
      jsxFragment: 'Fragment',
      jsxInject: "import { h } from 'vue';",
    },
    server: {
      port: 5006,
      open: false,
      cors: true,
      // 本地代理
      proxy: {
        '/api': {
          target: targetUrl,
          changeOrigin: true,
        }
      }
    },
    optimizeDeps: {
      include: ['vue', '@element-plus/icons-vue', 'pinia', 'vue-router']
    }
  }
})

这样一个简单的vue3项目就初始化完成了（麻雀虽小但五脏俱全）请诸君查阅～