This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
npm run installnpm run devmain.ts文件的配置情况
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue'
import WComponents from './components/base';
const app = createApp(App)
// 遍历注册全局icon
for(let icon in Icons) {
app.component(icon, (Icons as any)[icon])
}
app.use(router).use(ElementPlus).use(WComponents)
app.mount('#app')
command 为打包命令文件， packages 为打包入口文件， lib 为打包生成文件
npm run libconst { defineConfig, build } = require('vite')
const vue = require('@vitejs/plugin-vue')
const vueJsx = require('@vitejs/plugin-vue-jsx')
const path = require('path')
// 打包入口文件夹
const entryDir = path.resolve(__dirname, '../packages')
// 出口
const outDir = path.resolve(__dirname, '../lib')
// vite基础配置
const baseConfig = defineConfig({
configFile: false,
publicDir: false,
plugins: [vue(), vueJsx()]
})
// rollup 配置
const rollupOptions = {
external: ['vue', 'vue-router'],
output: {
globals: {
vue: 'Vue'
}
}
}
// 全量打包构建
const buildAll = async () => {
await build({
...baseConfig,
build: {
rollupOptions,
lib: {
entry: path.resolve(entryDir, 'index.ts'),
name: 'wjh-element-component',
fileName: 'wjh-element-component',
formats: ['es','umd']
},
outDir
}
})
}
// 打包成库
const buildLib = async () => {
await buildAll()
}
buildLib()npm run lib2const { defineConfig, build } = require('vite')
const vue = require('@vitejs/plugin-vue')
const vueJsx = require('@vitejs/plugin-vue-jsx')
const path = require('path')
const fsExtra = require('fs-extra')
const fs = require('fs')
// 打包入口文件夹
const entryDir = path.resolve(__dirname, '../packages')
// 出口
const outDir = path.resolve(__dirname, '../lib')
// vite基础配置
const baseConfig = defineConfig({
configFile: false,
publicDir: false,
plugins: [vue(), vueJsx()]
})
// rollup 配置
const rollupOptions = {
external: ['vue', 'vue-router'],
output: {
globals: {
vue: 'Vue'
}
}
}
// 全量打包构建
const buildAll = async () => {
await build({
...baseConfig,
build: {
rollupOptions,
lib: {
entry: path.resolve(entryDir, 'index.ts'),
name: 'wjh-element-component',
fileName: 'wjh-element-component',
formats: ['es', 'umd']
},
outDir
}
})
}
// 单组件打包构建
/**
* @param {*} name 组件名称
*/
const buildSingle = async (name) => {
await build({
...baseConfig,
build: {
rollupOptions,
lib: {
entry: path.resolve(entryDir, name),
name: 'index',
fileName: 'index',
formats: ['es', 'umd']
},
outDir: path.resolve(outDir, name)
}
})
}
// 每个组件生成pagkage.json
const ceratePackageJson = (name) => {
const fileStr = `
{
"name": "${name}",
"main": "index.umd.js",
"module": "index.es.js",
"style": "styles.css"
}
`
// 输出
fsExtra.outputFile(
path.resolve(outDir, `${name}/package.json`),
fileStr,
'utf-8'
)
}
// 打包成库
const buildLib = async () => {
await buildAll()
// 获取组件名称组成的数组
const components = fs.readdirSync(entryDir).filter(name => {
const componentDir = path.resolve(entryDir, name)
const isDir = fs.lstatSync(componentDir).isDirectory()
return isDir && fs.readFileSync(componentDir).includes('index.ts')
})
// 循环构建组件
for (const name of components) {
await buildSingle(name)
ceratePackageJson(name)
}
}
buildLib()
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent