白弟的记性不好，正所谓好记性不如烂笔头，还是把一些知识写下来更好，这一篇文章主要讲的就是初始化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三、插件配置
自动引入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项目就初始化完成了（麻雀虽小但五脏俱全）请诸君查阅～
