其他分享
首页 > 其他分享> > 组件封装小试：使用Vue CLI3基于Element-ui进行组件封装

组件封装小试：使用Vue CLI3基于Element-ui进行组件封装

作者：互联网

由于很多组件需要在不同的项目中复用，考虑到维护成本，这段时间写了个vue cli3进行组件封装，并上传到npm；

环境搭建和项目初始化

1）若电脑上没有安装过nodejs，首先需要从官网下载https://nodejs.org/安装包，并进行安装

检查电脑是否有安装nodejs，打开命令行工具，输入node -v,例如如下，代表已经安装了node：

 

 

 

2）安装vue/cli

 

 

 

 安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

 

 

3）使用Vue CLI3来初始化项目

 

 

 按住键盘的上下箭头可以选择，但是我的电脑上选择不了，查了下资料众说纷纭，一个简单的办法是在vscode的终端执行，便可以进行选择；

4）安装element ui

执行命令 vue add element

 

 

 按照自己的需求是选中按需引入还是全部引入，由于我们是基于element-ui的部分组件做的二次封装，所以最好还是按需引入所依赖的组件比较好；

这样在项目中src下，就会新建一个plugins文件夹，里面有个element.js 文件，如果想手动引入，就在这里添加要依赖的组件，这里是为了调试组件：

import Vue from 'vue'
import { 
  Button, 
  Dialog 
} from 'element-ui'

Vue.use(Button)
Vue.use(Dialog)
View Code

 

编写组件

和src同级目录，新建 packages 目录，在这里添加自己封装的要发布的组件。

例如，新建 YtoModal 文件夹，再接着新建 src 文件夹，里面新建 YtoModal .vue，在这里写组件的代码：

<template>
  <div class="s-dialog">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="683px">
      <img :src="imgUrl" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'YtoModal',
  props: {
    visible: {
      type: Boolean,
      default: () => { return true; }
    },
    imgUrl: {
      type: String,
      default: 'http://dimg07.c-ctrip.com/images/100o1f000001gp6di1DB0_C_221_166.jpg'
    },
    title: {
      type: String,
      default: '测试'
    }
  },
  data () {
    return {
      dialogVisible: this.visible,
      form: {
        wayNo: '',
        name: ''
      }
    };
  },
  watch: {
    visible (val) {
      this.dialogVisible = val;
    },
    dialogVisible (val) {
      this.$emit('update:visible', val);
    }
  },
  created () {
    this.dialogVisible = this.visible;
  },
  mounted () {
  },
  methods: {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
</style>
View Code

 

在YtoModal 目录下新建index.js,里面注册单独的该组件，方便使用时可以单独引用：

import YtoModal from './src/YtoModal'

YtoModal.install = function (Vue) {
  Vue.component(YtoModal.name, YtoModal)
}

export default YtoModal
View Code

这样一个组件就添加完成了，然后需要在 packages 的根目录下添加一个总的 index.js，这里是全局注册的地方，使用时可以全局引入，其实就跟 element-ui 的两种方式一样：

import YtoModal from './YtoModal';
const components = [
  YtoModal
];
const install = function (Vue) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
};
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export default {
  install,
  YtoModal
};
View Code

后面再添加组件，在这里也要再注册一下，而element-ui 源码中是动态引入的，我们的项目组件还没那么多，可以先一个个手动引入，如果后面数量多了，不好维护，可以参考 element-ui 的源码实现

 

调整目录

我们需要一个目录存放组件，一个目录存放示例

把src目录重命名为examples用作示例展示，例如：

 

我们通过上一步的目录改造后，会遇到两个问题。

  1. src 目录更名为 examples ，导致项目无法运行
  2. 新增 packages 目录，该目录未加入 webpack 编译

注：cli3 提供一个可选的 vue.config.js 配置文件。如果这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。

 

重新配置入口，修改配置中的 pages 选项，支持对 packages 目录的处理，修改配置中的 chainWebpack 选项，vue.config.js完整的代码如下：

module.exports = {
  lintOnSave: false, // 关闭eslint检查
  // 修改 src 为 examples
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  // 强制内联CSS
  css: { extract: false },
  productionSourceMap: false,
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
      .add('/packages')
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options;
      });
  },
  // 代理服务器配置
  devServer: {
    open: true,
    hot: true
  }
};
View Code

 

配置npm

在 package.json 里面的 script 里面加一个 lib选项，方便每次构建：

以下我们在 scripts 中新增一条命令 npm run lib

"scripts": {
  "lib": "vue-cli-service build --target lib --name test-pc-ui --dest lib ./packages/index.js"
  },

执行编译库命令

npm run lib

 

然后在 package.json 里面添加一些npm包发布的相关信息，比如作者、版本等：
其中最重要的是：

  "main": "lib/test-pc-ui.common.js",

这里的路径要和上面构建出来的目录和文件名对应上。

以下参考设置：

{
 "name": "test-pc-ui",
 "version": "1.1.1",
 "description": "基于 Vue 弹框",
 "main": "lib/test-pc-ui.common.js",
 "keyword": "弹框",
 "private": false
 }

添加 .npmignore 文件，设置忽略发布文件

 我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。

和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。

 

 

登录npm

首先需要到 npm 上注册一个账号，注册过程略。

如果配置了淘宝镜像，先设置回npm镜像：

npm config set registry http://registry.npmjs.org

然后在终端执行登录命令 npm login，输入用户名、密码、邮箱即可登录。

发布npm

执行命令 npm publish

如果在发布过程中遇到以下错误，则是邮箱没有验证

 

 把邮件验证成功啦，再次上传就可以了

 

组件的使用

现在已经把写好的组件发布到npm上了，那么如何使用组件了？假如组件名为test-pc-ui

1）直接在原来的项目中使用 npm i test-pc-ui

2) 在main.js中引入并注册

import TestPcUi from 'test-pc-ui';
Vue.use(TestPcUi); // 注册测试组件

这样在别的页面就可以直接用，例如：

 

 

 参考文档：
https://segmentfault.com/a/1190000016927695

https://www.jb51.net/article/148692.htm

https://segmentfault.com/a/1190000023768660

标签：npm,Vue,封装,lib,ui,YtoModal,组件,小试
来源： https://www.cnblogs.com/alice626/p/13853855.html