web前端: Vue cli3 库模式搭建组件库并发布到 npm

web前端: Vue cli3 库模式搭建组件库并发布到 npm

0.4322019.05.31 15:46:10字数 933阅读 535

创建项目

在指定目录中使用命令创建一个默认的项目,或者根据自己需要自己选择。
$ vue create .

调整目录

我们需要一个目录存放组件,一个目录存放示例,按照以下方式对目录进行改造。

.
...
|-- examples // 原 src 目录,改成 examples 用作示例展示
|-- packages // 新增 packages 用于编写存放组件
...
.

image.png

配置项目以支持新的目录结构

我们通过上一步的目录改造后,会遇到两个问题。
1、src 目录更名为 examples ,导致项目无法运行
2、新增 packages 目录,该目录未加入 webpack 编译
注:cli3 提供一个可选的 vue.config.js 配置文件。如果这个文件存在则他会被自动加载,所有的对项目和webpack的配置,都在这个文件中。

  • 重新配置入口,修改配置中的 pages 选项
    新版 Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。
    这里使用 pages 修改入口到 examples
module.exports = {
  // 修改 src 为 examples
  pages: {
    index: {
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html"
    }
  }
}
  • 支持对 packages 目录的处理,修改配置中的 chainWebpack 选项
    packages 是我们新增的一个目录,默认是不被 webpack 处理的,所以需要添加配置对该目录的支持。
    chainWebpack 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
module.exports = {
  // 修改 src 为 examples
  pages: {
    index: {
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html"
    }
  },
  // 扩展 webpack 配置,使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add('/packages/')
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
};

编写组件

image.png

 

如图,demo-component就是一个组件。每个组件都要新建一个文件夹,然后添加index.js以及src文件夹。

// demo-component.vue
<template>
    <div>
        这是demo-component.vue
    </div>
</template>
<script>
export default {
    name: 'demoComponent'
}
</script>
// src/index.js
// 导入组件,组件必须声明 name
import demoComponent from './src/demo-component'

// 为组件提供 install 安装方法,供按需引入
demoComponent.install = function (Vue) {
 Vue.component(demoComponent.name, demoComponent)
}
// 默认导出组件
export default demoComponent

将packages中的所有组件导出

在packages文件夹下新建index.js

// 导入颜色选择器组件
import demoComponent from "./demo-component/index.js";

// 存储组件列表
const components = [demoComponent];
// 定义 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,
  // 以下是具体的组件列表
  demoComponent
};

在项目中引入组件

// main.js

// 导入组件库
import demo from '../packages/index';
// 注册组件库
Vue.use(demo);

使用 Vue.use() 全局注册后,即可在任意页面直接使用了,而不需另外引入。当然也可以按需引入。

// Home.vue

<demo-component></demo-component>

npm run serve执行后即可看到效果。

发布到 npm,方便直接在项目中引用

1、 package.js 中新增一条编译为库的命令

在库模式中,Vue是外置的,这意味着即使在代码中引入了 Vue,打包后的文件也是不包含Vue的。
Vue Cli3 构建目标:库
以下我们在 scripts 中新增一条命令 npm run lib

  • --target : 构建目标,默认为应用模式。这里修改为 lib 启用库模式。
  • --dest : 输出目录,默认 dist 。这里我们改成 lib
  • [entry] : 最后一个参数为入口文件,默认为 src/App.vue 。这里我们指定编译 packages/ 组件库目录。
"script": {
 // ...
 "lib": "vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js"
}

执行编译库命令
npm run lib

image.png

 

2、配置 package.json 文件中发布到 npm 的字段

name
version
description
main
keyword
author
private
license

以下为参考设置

{
 "name": "vcolorpicker",
 "version": "0.1.5",
 "description": "基于 Vue 的颜色选择器",
 "main": "lib/vcolorpicker.umd.min.js",
 "keyword": "vcolorpicker colorpicker color-picker",
 "private": false
 }

3、添加.npmignore 文件,设置忽略发布文件
我们发布到 npm 中,只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。
和 .gitignore 的语法一样,具体需要提交什么文件,看各自的实际情况。

# 忽略目录
examples/
packages/
public/
 
# 忽略指定文件
vue.config.js
babel.config.js
*.map

4、登录到 npm
首先需要到 npm 上注册一个账号,注册过程略。
如果配置了淘宝镜像,先设置回npm镜像:

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

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

5、发布到 npm
执行发布命令,发布组件到 npm
$ npm publish
执行后显示发布成功即可在npm官网上找到自己的包,如果没有发布成功,有可能是包名称和社区其他包重复了,改个名字即可。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
搭建 Vue 开发环境步骤: 1. 安装 Node.js 首先需要安装 Node.js,它是一个基于 Chrome V8 引擎的 JavaScript 运行环境。可以在 Node.js 的官网下载最新版本的安装并进行安装。 2. 安装 Vue CLI Vue CLIVue.js 官方提供的一个脚手架工具,可以快速搭建 Vue.js 项目的基础结构。可以使用以下命令进行安装: ``` npm install -g @vue/cli ``` 3. 创建项目 使用 Vue CLI 可以快速创建一个 Vue.js 项目。可以使用以下命令创建一个新的项目: ``` vue create my-project ``` 其中 `my-project` 为项目名称,可以根据自己的需要进行修改。 4. 启动项目 创建完项目后,可以使用以下命令进入项目目录并启动项目: ``` cd my-project npm run serve ``` 以上就是搭建 Vue 开发环境的基本步骤。下面是基于 Vue 组件开发 Web 前端应用程序的实验总结: 基于 Vue 组件开发 Web 前端应用程序实验总结: 1. 组件的注册 在 Vue 中,可以通过 `Vue.component` 方法来注册一个组件。在注册组件时,需要指定组件的名称和组件的选项。例如: ``` Vue.component('my-component', { // 组件选项 }) ``` 2. 组件使用使用组件时,只需要在模板中使用组件的名称即可。例如: ``` <my-component></my-component> ``` 3. 组件的数据传递 在 Vue 中,可以通过 `props` 选项来定义组件的属性。在使用组件时,可以通过属性的方式向组件传递数据。例如: ``` Vue.component('my-component', { props: ['message'], template: '<div>{{ message }}</div>' }) <my-component message="Hello"></my-component> ``` 4. 组件的事件 在组件中,可以通过 `$emit` 方法触发一个事件。在使用组件时,可以通过 `v-on` 指令监听组件的事件。例如: ``` Vue.component('my-component', { template: '<button @click="$emit(\'my-event\')">Click me</button>' }) <my-component @my-event="handleClick"></my-component> ``` 5. 组件的插槽 在 Vue 中,可以通过插槽来定义组件的内容。在组件中,可以使用 `slot` 元素来定义插槽。在使用组件时,可以在组件的标签中添加内容,这些内容将会替换掉组件中的插槽。例如: ``` Vue.component('my-component', { template: '<div><slot></slot></div>' }) <my-component>Some content</my-component> ``` 以上就是基于 Vue 组件开发 Web 前端应用程序的实验总结。在实际开发中,可以根据需要选择不同的组件构建 Web 页面,从而提高开发效率和代码的可维护性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值