通过vue create 生成脚手架就可以开始项目文件
首先,往components 文件夹下添加子组件文件
例如:
在XmgDirButton.vue中:
使用export default 将每个组件文件导出作为通用文件
<template>
<span class="xmg-button">
<button :disabled="disabled" :class="[type, disabled ? 'disabled' : '']">
<!-- 插槽 文本的内容就在这里了 -->
<slot></slot>
</button>
</span>
</template>
<script>
export default {
name: 'XmgDirButton',
props: {
type: {
type: String,
default: () => 'primary',
},
disabled: {
type: Boolean,
default: () => false,
},
},
}
</script>
<style lang="less" scoped>
@pColor: #333;
@sColor: #0db677;
@wColor: orange;
@dColor: red;
@disabledColor: gray;
.xmg-button {
display: inline-block;
margin-right: 10px;
button {
display: inline-block;
padding: 10px 20px;
border: 2px solid @pColor;
background: #fff;
font-size: 16px;
width: auto;
cursor: pointer;
transition: all 0.5s;
&:hover {
box-shadow: 100px 0px 0px 0px @pColor inset;
color: #fff;
}
&.success {
border: 2px solid @sColor;
color: @sColor;
&:hover {
box-shadow: 100px 0px 0px 0px @sColor inset;
color: #fff;
}
}
&.warning {
border: 2px solid @wColor;
color: @wColor;
&:hover {
box-shadow: 100px 0px 0px 0px @wColor inset;
color: #fff;
}
}
&.danger {
border: 2px solid @dColor;
color: @dColor;
&:hover {
box-shadow: 100px 0px 0px 0px @dColor inset;
color: #fff;
}
}
&.disabled {
border: 2px solid @disabledColor;
color: @disabledColor;
cursor: not-allowed;
&:hover {
box-shadow: none;
color: @disabledColor;
}
}
}
}
</style>
在App.vue中
将每个子组件通过import导入
import 子组件名 from 路径
export default{
components:{
子组件名,子组件名2
}
}
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<XmgDirButton type="success">按钮</XmgDirButton>
<JsxXmgButtonReactVue type="warnning">按钮</JsxXmgButtonReactVue>
<JsxXmgButton>按钮</JsxXmgButton>
<xmg-button>按钮</xmg-button>
<ul>
<tree-item :model="treeData"></tree-item>
</ul>
</div>
</template>
<script>
import JsxXmgButton from './components/jsx-xmg-button.vue'
import JsxXmgButtonReactVue from './components/jsx-xmg-button-react.vue'
import XmgDirButton from './components/XmgDirButton.vue'
import TreeItem from './components/TreeItem.vue'
import XmgButton from './packages/xmgButton'
export default {
components: {
XmgDirButton,
JsxXmgButtonReactVue,
JsxXmgButton,
TreeItem,
XmgButton
},
name: 'App',
data() {
return {
treeData: {
title: 'Web全栈架构师',
children: [
{
title: 'Java架构师',
},
{
title: 'JS高级',
children: [
{
title: 'ES6',
},
{
title: '动效',
},
],
},
{
title: 'Web全栈',
children: [
{
title: 'Vue训练营',
expand: true,
children: [
{
title: '组件化',
},
{
title: '源码',
},
{
title: 'docker部署',
},
],
},
{
title: 'React',
children: [
{
title: 'JSX',
},
{
title: '虚拟DOM',
},
],
},
{
title: 'Node',
},
],
},
],
},
}
},
}
</script>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
ul{
list-style-type: none;
}
</style>
npm打包
packages加入要打包的文件
在packages-index.js 中配置
// 存储组件列表
import XmgButton from './xmgButton'
const components = [XmgButton]
const install = function (Vue) {
components.map((item) => Vue.component(item.name, item))
}
// 判断是否引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
install,
XmgButton,
}
在packages-xmgButton-index.js中配置
import XmgButton from './src/xmg-button'
// 封装组件插件,必须调用install方法
XmgButton.install = function (Vue) {
Vue.component(XmgButton.name, XmgButton)
}
export default XmgButton
在packages.json中配置
name、main:
{
"name": "xmg-button3",
"version": "0.1.0",
"private": false,
"main": "lib/XmgBUtton.umd.min.js",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lib": "vue-cli-service build --target lib --name XmgBUtton --dest lib src/packages/index.js"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14",
"xmg-button3": "^0.1.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"less": "^4.0.0",
"less-loader": "^8.0.0",
"vue-template-compiler": "^2.6.14"
}
}
在npm 官网上注册用户
npm login 登录npm
npm publish
npm install packages
在main.js 中
import XmgButton from './packages/xmgButton'