vite vue3 eslint 組件庫

執行命令

npm init vite
npm install

根目錄下增加 .npmrc 文件

registry=https://registry.npm.taobao.org

eslint

npm i -D eslint
npx eslint --init

選擇:
To check syntax and find problems
JavaScript modules (import/export)
Vue.js
NO
Browser Node
JavaScript
Yes
npm

.eslintrc.cjs

module.exports = {
    'env': {
        'browser': true,
        'es2021': true,
        'node': true
    },
    'extends': [
        'eslint:recommended',
        'plugin:vue/vue3-essential'
    ],
    'overrides': [
    ],
    'parserOptions': {
        'ecmaVersion': 'latest',
        'sourceType': 'module'
    },
    'plugins': [
        'vue'
    ],
    'rules': {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'vue/script-indent': ['off', 4],
        'vue/html-indent': ['off', 4],
        'vue/multi-word-component-names': 'off',
        '@typescript-eslint/no-explicit-any': ['off'],
        // 禁止使用拖尾逗號
        'comma-dangle': [1, 'never'],
        // 禁止使用分號
        'semi': [1, 'never'],
        // 使用單引號
        'quotes': [1, 'single'],
        // 禁用行尾空白
        'no-trailing-spaces': [1],
        // 強制一行的最大長度
        'max-len': 0
    }
}

vite.config.js

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

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': resolve(__dirname, './src')
        }
    },
    build: {
        outDir: 'lib',
        lib: {
            entry: resolve(__dirname, 'src/components/index.js'),
            name: 'index',
            fileName: 'index',
        },
        rollupOptions: {
            external: ['vue'],
            output: {
                globals: {
                    vue: 'Vue'
                }
            }
        }
    }
})

components

components/index.js

import cuText from './cu-text/index.vue'
import cuImage from './cu-image/index.vue'

const components = [cuText, cuImage]

const install = (App) => {
    components.forEach((item) => {
        App.component(item.__name, item)
    })
}

export default {
    install,
    ...components
}

components/cu-text/index.vue

<script setup name="cu-text">
    defineProps({
        text: String,
        style: Object
    })
</script>

<template>
    <div :style="style">
        {{ text }}
    </div>
</template>

<style scoped>
</style>

components/cu-image/index.vue

<script setup name="cu-image">
    defineProps({
        src: String
    })
</script>

<template>
    <image :src="src" />
</template>

<style scoped>
    image {
        max-width: 100%;
        max-height: 100%;
    }
</style>

src/main.js

import { createApp } from 'vue'

import './style.css'
import App from './App.vue'

const app = createApp(App)

import components from './components'
app.use(components)

app.mount('#app')

package.json

{
    "name": "anli-components",
    "version": "0.0.0",
    "private": false,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "lint": "eslint --ext .js,.vue src",
        "lint:fix": "eslint --ext .js,.vue --fix src"
    },
    "main": "lib/index.umd.js",
    "module": "lib/index.mjs",
    "files": [
        "lib"
    ],
    "exports": {
        "./lib/style.css": "./lib/style.css",
        ".": {
            "import": "./lib/index.mjs",
            "require": "./lib/index.umd.js"
        }
    },
    "dependencies": {
        "axios": "^1.2.2",
        "crypto-js": "^4.1.1",
        "js-cookie": "^3.0.1",
        "vue": "^3.2.45"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.0.0",
        "eslint": "^8.31.0",
        "eslint-plugin-vue": "^9.8.0",
        "terser": "^5.16.1",
        "vite": "^4.0.0",
        "vite-plugin-vue-setup-extend": "^0.4.0"
    }
}

readme.md

編譯發佈

npm run build