vue.js

您所在的位置：网站首页 › vue编写 › vue.js

vue.js

2023-03-27 20:44| 来源: 网络整理| 查看: 265

如何使用vue写一个组件库新建vue项目

使用vue-cli初始化一个项目：

vue init webpack VueComponent cd VueComponent npm install npm run dev

以上就新建好了一个vue项目

项目目录

首先，定义好目录，经过观察大多数的组件库，基本是这样的目录：

|-- examples // 用于demo展示 |-- packages // 用于编写存放组件

因为修改了目录名称,就需要修改下webpack的配置文件，修改编辑目录build/webpack.bash.config.js

{ test: /\.js$/, loader: 'babel-loader', include: [resolve('examples'), resolve('test'), resolve('node_modules/webpack-dev-server/client'),resolve('packages')] }

将编译目录指向examples和packages。

写一个组件

在packages下面创建一个Button组件，目录如下(目录构建都是参照ele-ui)

main.vue内容：

button按钮组件 export default{ name: 'MButton', // 定义这个组件的名称 }

index.js内容：

import Button from './src/main.vue'; // 在每个组件下面定义一个install方法。 Button.install = function (Vue) { Vue.component(Button.name, Button); }; export default Button;

到此，就完成了一个组件的简单编写

导出组件

组件写好之后，需要让组件支持全局引入和按需引，在packages下面新建一个index.js文件，用于将组件导出代码：

import Button from './button/index.js'; // 引入组件 const components = [ Button ]; //'vue-use是调用的install方法' const install = function(Vue) { if (install.installed) return; components.map(component => Vue.component(component.name, component)); }; if (typeof window !== 'undefined' && window.Vue) { console.log('传入参数install方法') install(window.Vue); } export default { install, // 如果在外面使用vue.use的话，就会默认使用install方法 Button };

这里为什么要定义一个install方法呢？看下vue源码

import { toArray } from '../util/index' export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) if (installedPlugins.indexOf(plugin) > -1) { return this } // additional parameters const args = toArray(arguments, 1) args.unshift(this) ⚠️ if (typeof plugin.install === 'function') { ⚠️ plugin.install.apply(plugin, args) } else if (typeof plugin === 'function') { plugin.apply(null, args) } installedPlugins.push(plugin) return this } }

由此可见，vue.use是调用传入的组件的instll方法。这也就解释了，为什么每个组件都定义了一个install方法。

使用组件

在examples的main.js里面引入组件：

import MVUI from '../packages/index' Vue.use(MVUI)

到此，一个非常简单的组件就写好了。

【本文地址】

vue.js

vue.js

今日新闻

推荐新闻