0.1.2 • Published 5 years ago
typescript-czh-ui v0.1.2
czh-ui
使用官方的 vue-cli 初始化一个 Vue 项目
npm install -g @vue/cli
初始化项目以后修改package.json
将"private"字段改为false(意思是公开的npm包,true为私有的npm包,需要付费)
添加"main"字段为打包后引用的文件路径,例如"main": "./dist/czhui.common.js"
添加"files"字段,值为需要导出的文件,例如"files": ["dist/*", "src/*", "public/*", "*.json", "*.js"]
添加scripts打包命令,"build-bundle": "vue-cli-service build --target lib --name czhui ./src/components/index.js"
注意:scripts命令中czhui是自定义的打包后的文件名,./src/components/index.js是打包入口
入口文件配置
// 引入组件
import TopBar from './TopBar.vue'
import CButton from './CButton.vue'
const Components = {
TopBar,
CButton
}
// 安装组件
const install = function (Vue) {
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name])
})
}
// <script>标签使用vue时自动完全加载
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
// 按需加载
export {
TopBar,
CButton
}
// 默认完全加载
export default {
install
}
打包项目
npm run build-bundle
发布项目到npm包
npm publish