为方便学习,已放github
项目文件
- 下载模板
vue create vue-own-ui
- 修改文件
mv src examples // 示例应用,本地检测是否成功
mkdir packages // 存放自己写的组件代码
跑一下试试
能跑通,你牛逼
需要如下配置
touch vue.config.js
const path = require('path')
module.exports = {
// 修改路口
pages:{
index:{
entry:'examples/main.js',
template:'public/index.html',
filename:'index.html'
}
},
// 扩展webpack配置,加入编译
chainWebpack:config => {
config.resolve.alias
.set('@',path.resolve(('examples')))
.set('~',path.resolve('packages'))
config.module
.rule('js')
.include.add(/examples/).end()
.include.add(/packages/).end()
.use('babel')
.loader('babel-loader')
.tap(options => {
return options
})
}
}
npm run serve
配置文件入口,操作成功
编写自己的UI文件
packages/yp/src/yp.vue
<!-- yp -->
<template>
<div>
<ul>
<li>测试一</li>
<li>测试二</li>
<li>测试三</li>
<li>测试四</li>
<li>测试五</li>
<li>测试六</li>
</ul>
</div>
</template>
<script>
export default {
name:"Yptest", //标签名
data () {
return {
};
},
created(){},
components: {},
computed: {},
mounted(){},
methods: {}
}
</script>
<style lang='scss' scoped>
</style>
packages/yp/index.js
import Yptest from './src/yp'
Yptest.install = Vue => { // Vue.use() 使用的都是其内置的install方法
//定义一个新的vue组件
Vue.component(Yptest.name,Yptest)
}
export default Yptest
packages/index.js
import Yptest from './yp/index.js'
const components = [
Yptest
]
// 定义install方法,接受一个vue为参数
const install = function (Vue){
// 判断这个组件是不是安装了,如果安装了我就return
if(install.installed) return
install.installed = true
// 遍历所有的组件
components.map(component=>Vue.use(component))
if(typeof window !== 'undefined' && window.Vue){
install(window.Vue)
}
}
export default {
install,
//所有组件必须要有install方法,才能Vue.use()
... components,
}
本地测试
main.js
import Vue from 'vue'
import App from './App.vue'
import Yptest from '../packages' // 引入
Vue.use(Yptest)
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<Yptest></Yptest> // 引用
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
npm run serve
完成
发布至NPM
打包 库模式
vue-cli-service build --target lib --name lib
// target默认的构建工具,lib库模式(没有vue)
vue-cli-service build --target lib --name xxx --dest lib packages/index.js
vue-cli-service 不是全局环境
npx vue-cli-service build --target lib --name xxx --dest lib packages/index.js
出现 lib 文件夹
把包发布到npm去
lib新建package.json
{
"name": "ypsoul",
"version": "0.1.0",
"main":"yp.umd.js", // js入口
"license": "MIT"
}
NPM 官网 链接
注册账号 需要去邮箱验证,不然就会出现下面的报错
npm login
npm publish
完成
线上测试
可以新建一个纯净的项目 npm i ypsoul -S
main.js
import Vue from 'vue'
import App from './App.vue'
import ypsoul from 'ypsoul'
Vue.use(ypsoul)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }} ypsoul</h1>
<Yptest></Yptest>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
// ''''
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
OK,一个简单的组件就生成了
git地址:链接