组件封装技术

误入前端歧途
1,325 阅读4分钟

构建项目

开发组件使用webpack-simple

vue init webpack-simple <project-name>

项目文件结构可更据自己的需求修改，以下可供参考：

.
├── src/                           // 源码目录
│   ├── assets/                    // 静态资源
│   ├── packages/                  // 组件目录
│   │   ├── search/                // 组件
│   │   │   ├── SearchGroup.vue    // 组件代码
│   │   │   ├── index.js           // 挂载插件
│   ├── utils/                     // 函数目录
│   ├── App.vue                    // 页面入口
│   ├── main.js                    // 程序入口
│   ├── index.js                   // （所有）插件入口
├── index.html                     // 入口html文件
.

搭建库环境

组件文件（SearchGroup.vue）

SearchGroup.vue文件中存放我们封装好的search组件.
注意：name属性对应的字段需要在下面index.js 中对应。（尽量保证和文件名称一样）

组件挂载文件（search/index.js）

// SearchGroup 是对应组件的名字，要记得在 SearchGroup.vue 文件中还是 name 属性哦
import SearchGroup from './SearchGroup.vue';

SearchGroup.install = (Vue) => {
    Vue.component(SearchGroup.name, SearchGroup)
}
export default SearchGroup

所有插件入口（src/index.js）

import Pagination from './lib/index.js'
import SearchGroup from './search/index.js'

const components = [
    Pagination,
    SearchGroup
]

// 全局注册方法 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
    // 判断是否安装
    if (install.installed) return

    // 遍历注册全局组件
    components.forEach(component => {
        Vue.component(component.name, component)
    })

    // 判断是否是直接引入文件
    if (typeof window != 'undefined' && window.Vue) {
        install(window.Vue)
    }
}

export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install,
    // 具体的组件
    Pagination,
    SearchGroup
}

配置文件

现在我们需要测试一下我们封装好的组件在其他项目是否可以正常使用。
首先需要修改webpack.config.js文件修改打包配置。

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'whaleip-ui.js',
    library: 'whaleip-ui',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },

如果修改了webpack配置，自然要把index.html中script的src修改一下。

<div id="app"></div>
<script src="/dist/whaleip-ui.js"></script>

再修改webpack.json文件中发布到npm的字段。

name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。

version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。

description: 对包的描述，在npmjs.com上搜索时会显示，有助于用户在搜索时进行筛选

main: 入口文件，该字段需指向我们最终编译后的包文件。

keyword：关键字，以空格分离希望用户最终搜索的词。

author：格式一般是${your name} ${email}, 当然也可以是一个github地址

private：是否私有，需要修改为 false 才能发布到 npm

测试封装是否可用

首先修改webpack.json中部分代码

"scripts": {
      "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
      "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"directories": {
      "dist": "dist"
},

然后运行打包命令 ：npm run build
再修改上面代码为：

"main": "dist/whaleip-ui.js",
"directories": {
     "dist": "dist"
},
"files": [
     "dist",
     "src"
],
"scripts": {
     "dev": "node build/dev-server.js",
     "start": "node build/dev-server.js",
     "build": "node build/build.js"
},
"keywords": [
     "vue",
     "whaleip",
     "whaleip-ui"
],

运行代码：npm pack；会生成一个tgz文件。
此时我们需要在测试项目里安装此依赖，切记不可使用cnpm，否则会显示undefined。

npm install --save-dev '/Users/FangC/project/组件封装到npm项目/whaleip-ui-1.0.1.tgz'

然后在测试项目的main.js里全局引入，或在想要.vue文件中局部引入都可，测试我们封装的组件和方法是否可用。如果可用那么就可以发布到npm上了。

发布到npm

修改webpack.json文件相关npm配置，参考如下：

{
  "name": "whaleip-ui",
  "description": "whaleip web project Component encapsulation",
  "version": "1.0.1",
  "author": "Fangc",
  "license": "MIT",
  "private": false,
  "main": "dist/whaleip-ui.js",
  "directories": {
    "dist": "dist"
  },
  "files": [
    "dist",
    "src"
  ],
  "keywords": [
    "vue",
    "ui",
    "whaleip",
    "whaleip-ui"
  ],
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "node-sass": "^4.14.1",
    "sass-loader": "^7.3.1",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/fangcheng148/whaleip-ui.git"
  }
}

注意”repository“这里，可以使用我们git或svn仓库，git可在GitHub或coding地址。

发布

首先我们需要去www.npmjs.com注册一个账号。 然后在本地终端运行：

npm login // 登陆 依次输入npm账号的 名称、密码、邮箱 即可
npm publish // 发布 发布之前需要在终端进入到当前项目之中才可

更新

如果想更新我们的npm包，需要修改webpack.json文件中”version“版本号，然后运行发布命令(npm publish)即可。

使用组件

安装

npm i whaleip-ui -D
cnpm i whaleip-ui -D

引入

/* main.js */

/* 引入组件 */
import WhaleipUi from 'whaleip-ui'
Vue.use(WhaleipUi);

/* 引入方法 */
Vue.prototype.$utils = WhaleipUi.fn;

使用

/* HelloWorld.vue */
/* 使用组件 */
<SearchGroup ref="searchGroup" :searchList="searchList" @handleSearch="handleSearch"></SearchGroup>

/* 使用方法 */
this.$utils.isJsonString('{"a":1}')

结语

ok至此一个简单的组件就已经封装好并且可以使用了，这篇文章只是一个简单的封装过程记录，仅供参考，中间有很多原理部分并没有解释，有需要的可以去参考更多相关文章。

avatar
文章
阅读
粉丝