文档章节

使用vue开发基于npm管理的通用模块

lindeyi
 lindeyi
发布于 2017/10/25 14:17
字数 585
阅读 63
收藏 1

在做基于nodejs开发的vuejs时,经常会有一些公共组件,这些组件在多个vue项目中使用copy代码肯定不是很好的办法,应该做成跟vuex一样独立的模块,通过npm install引入就可以使用。

下面把我的经验简单的介绍:

内容的主题:

首先扩展一个input表单组件,然后通过npm发布到私有库,最后被使用。

1、使用vue-cli脚手架生成一个简单的webpack工程,作为通用组件x-input的工程;

> vue init webpack-simple x-input

2、工程生成好,npm install下载相关依赖;现在在src目录下新建一个x-input.vue的文件;

<template lang="html">
  <div class="input">
    <span>{{title}}</span>
    <div><input v-model="name"></div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    name: String
  }
}
</script>
<style lang="css">
.input {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.input span {
  width: 20%;
  max-width: 200px;
}
.input div {
  float: right;
  width: 80%;
}
input {
  width: 100%;
  min-width: 200px;
  max-width: 500px;
  height: 40px;
}
</style>

可以在app.vue中测试下,import XInput from './x-input.vue';

<template>
  <div id="app">
    <x-input title="用户名" :name="username"></x-input>
  </div>
</template>

<script>
import XInput from './x-input.vue'
export default {
  name: 'app',
  components: {
    XInput
  },
  data () {
    return {
      username: ''
    }
  }
}
</script>

<style lang="scss">

</style>

启动服务看看 npm run dev;没问题我们开始发布这个工程

3、发布x-input

首先需要登录npm;提示需要输入用户密码邮箱,

> npm login
Username: admin
Password: 
Email: (this IS public):admin@bjnja.com
Logged in as admin on http://npm.bjnja.com/.

完成后提示登录成功,然后使用npm publish发布,npm每次发布版本号必须改变。

> npm publish

成功后会提示发布的版本号;

4、使用

现在怎么使用呢,新建一个vue工程;一样通过vue-cli创建;

> vue init webpack-simple my-project

安装x-input;

> npm install --save x-input

现在我们可以在my-project工程src目录App.vue中使用

<template>
  <div id="app">
    <x-input title="用户名" :name="username"></x-input>
  </div>
</template>

<script>
import XInput from 'x-input/src/x-input'
export default {
  name: 'app',
  components: {
    XInput
  },
  data () {
    return {
      username: ''
    }
  }
}
</script>

<style lang="scss">

</style>

通过引用的工程目录应用,很不方便;现在调整下;

5、通用模块主出口

在x-input工程根目录新疆index.js文件

import XInput from './src/x-input'

export {
  XInput
}

package.json文件设置入口:

"version": "1.0.1",
"main": "index.js",

版本调整,重新发布;

现在使用就好看多了,可以这么用:

import { XInput } from 'x-input';

好了,按照这方式通用组件管理就很方便了。

© 著作权归作者所有

lindeyi
粉丝 5
博文 16
码字总数 14150
作品 0
海淀
私信 提问
Vue学习笔记(一)------脚手架vue cli

脚手架vue-cli(3.x) vue-cli是一个基于vue.js进行快速开发的完整系统,提供下面几个功能: 通过 搭建交互式的项目脚手架。 通过 + 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-serv...

静水流深酱
04/17
0
0
基于SpringBoot和Vue.js的后台管理系统 - web-flash

本项目基于Spring Boot和Vue.js构建的后台管理系统 版本说明 web-flash提供了一个后台管理系统和前端h5站点系统 web-flash是一个基于Spring Boot和Vue.js的web系统,包含了基于element搭建的...

enilu
05/31
0
0
Vue CLI 3结合Lerna进行UI框架设计

第一次在掘金发文章,有点啰里啰嗦,大家见谅。(原文地址:github.com/ziyi2/ziyi2… 当前大部分UI框架设计的Webpack配置都相对复杂,例如Element、Ant Design Vue和Muse-UI等Vue组件库。例...

子奕
04/13
0
0
手摸手教你搭建vue-cli脚手架-详细步骤图文解析[vue入门]

写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是...

阿K1225
2018/05/22
0
0
最详细的Vue Hello World应用开发步骤

很多Vue的初学者想尝试这个框架时,都被webpack过于复杂的配置所吓倒,导致最后无法跑出一个期望的hello word效果。今天我就把我第一次使用webpack打包一个Vue Hello World应用的所有步骤详细...

JerryWang_SAP
01/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

优雅的关闭Spring Boot

优雅的关闭Spring Boot 1、实现 TomcatConnectorCustomizer 接口拿到Tomcat的连接获取 Tomcat连接池 2、实现 ApplicationListener<ContextClosedEvent> 监听服务器关闭事件,注册JVM钩子函数...

sowhat
今天
2
0
Python3-Web开发

简介 Web开发框架 什么是Web框架? Web应用程序框架或简单的Web框架表示一组库和模块,使Web应用程序开发人员能够编写应用程序,而不必担心协议,线程管理等低级细节。 virtualenv是一个虚拟...

wuxinshui
今天
3
0
使用技媒体实践编写发布博客

技媒体实践博客 CSDN OSChina 知乎 简书 思否 掘金 51CTO

晨猫
今天
2
0
Lucene

1、什么是全文检索 数据分类 我们生活中的数据总体分为两种:结构化数据和非结构化数据。 结构化数据:指具有固定格式或有限长度的数据,如数据库,元数据等。 非结构化数据:指不定长或无固...

榴莲黑芝麻糊
昨天
5
0
python到setuptools、pip工具的安装

python安装 基础开发库   apt-get install gcc  apt-get install openssl libssl-dev 安装数据库和开发库   apt-get install mysql-server libmysqld-dev python环境   下载地址...

问题终结者
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部