基于上篇我们讲了 在window下搭建Vue.Js开发环境

我们可以开发自己的vue.js插件发布到npm上,供大家下载使用。

1.首先打开cmd命令窗口,进入我们的工作目录下

执行 cd E:\vue

2.使用webpack的简单模板创建我们的项目,比如vue-dialog-rexsheng

vue init webpack-simple vue-dialog-rexsheng

如下图,输入项目名称,项目描述,项目作者,认证单位,sass选择N

创建成功后,我们会发现工作目录e:/vue下多了一个项目目录vue-dialog-rexsheng

3.进入项目目录vue-dialog-rexsheng下,

cd vue-dialog-rexsheng

我们使用visual studio code做为开发工具,在vscode里打开这个项目,项目结构如图

4.项目结构建好后,下面开始开发

先安装项目的依赖包

npm install  (若网络不好可使用淘宝镜像进行安装cnpm install,安装参考 在window下搭建Vue.Js开发环境)

启动项目 npm run dev

浏览器打开网址 http://localhost:8081/ 如上图的蓝色字体,端口根据大家电脑实际情况可能不同

项目已经运行起来了,表明项目一开始是ok的,下面进行插件的具体开发

5.vscode里,src目录下新建文件夹lib,lib下新建文件index.js

index.js里输入插件的安装脚本如下图

插件如何开发请参考 https://cn.vuejs.org/v2/guide/plugins.html

6.打包配置

修改文件webpack.config.js如下图,

var path = require('path')
var webpack = require('webpack')module.exports = {entry: './src/lib/index.js',//资源入口文件
  output: {path: path.resolve(__dirname, './dist'),//打包输出目录publicPath: '/dist/',//公共资源路径filename: 'dialog.js',//输出的主文件library: 'vuedialogrexsheng',//库名,此名称用于require('vuedialogrexsheng')libraryTarget: 'umd',//目标平台,libraryTarget会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的。umdNamedDefine: true//会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
  },module: {rules: [{test: /\.css$/,use: ['vue-style-loader','css-loader'],},      {test: /\.vue$/,loader: 'vue-loader',options: {loaders: {}// other vue-loader options go here
        }},{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/},{test: /\.(png|jpg|gif|svg)$/,loader: 'file-loader',options: {name: '[name].[ext]?[hash]'}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'file-loader',options: {limit: 10000,name: 'fonts/[name].[hash:7].[ext]'}}]},resolve: {alias: {'vue$': 'vue/dist/vue.esm.js'},extensions: ['*', '.js', '.vue', '.json']},devServer: {historyApiFallback: true,noInfo: true,overlay: true},performance: {hints: false},devtool: '#eval-source-map'
}if (process.env.NODE_ENV === 'production') {module.exports.devtool = '#source-map'// http://vue-loader.vuejs.org/en/workflow/production.htmlmodule.exports.plugins = (module.exports.plugins || []).concat([new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}}),new webpack.optimize.UglifyJsPlugin({sourceMap: true,compress: {warnings: false}}),new webpack.LoaderOptionsPlugin({minimize: true})])
}

View Code

修改package.json,

private :false,

main: '引用时指向的文件'

7.打包编译

npm run build

在项目dist目录下多了这两个文件,.map文件是调试用的,这里可忽略

8.如果你已经有npm用户账户了,可忽略这一步的用户注册

到网址 https://www.npmjs.com/ 进行新用户注册

注册成功后,记住用户名及密码

9.项目目录下新建文件 .npmignore,里面写入需要忽略的文件

实际发布的文件只需要dist/dialog.js,package.json ,README.md(可选,里面写上插件如何使用)

10.项目目录下执行

npm whoami

如果出现以上提示,表明本机从未添加过用户或者用户未登陆,

1) 添加新用户需要执行

npm adduser

2) 本机以前登陆过账户,现在重新登陆使用

npm login

11.发布项目

npm publish

这时候,到npm官网里搜索我们的项目vue-dialog-rexsheng

会发现我们的项目已经能够搜到了

现在,你可以在任何项目里使用npm安装这个插件了,npm install  vue-dialog-rexsheng --save-dev

安装完之后,main.js中引用

import dlg from 'vue-dialog-rexsheng';

Vue.use(dlg);

转载于:https://www.cnblogs.com/RexSheng/p/10500339.html

Vue.Js添加自定义插件相关推荐

  1. Chrome浏览器安装Vue.js devtools插件

    Chrome浏览器安装Vue.js devtools插件 1.浏览器访问极简插件 2.右上角搜索框搜索vue DevTools插件 3.在本地文件夹中解压刚刚下载的插件,解压后如下所示 4.打开谷歌浏 ...

  2. vue.js 天气插件_天气检查我的项目以学习Vue.js

    vue.js 天气插件 天气 (vue-weather) Weather checking me project for learning Vue.js. 天气检查我的项目以学习Vue.js. Vie ...

  3. Vue.js常用插件

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  4. Mac的谷歌浏览器安装Vue.js.devtools插件

    git clone -b add-remote-devtools https://github.com/vuejs/vue-devtools 克隆到本地 cd 进入这个文件夹里面vue-devtool ...

  5. Vue.js 插件开发详解

    前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数.比如官方推荐的 vue-router.vuex 等,都是非常优秀的插件.但是我们更多的人还只停留在使用的阶段 ...

  6. antd vue关闭模态对话框_如何在Bootstrap项目中用Vue.js替代jQuery

    Bootstrap是 Web 开发最受欢迎的框架之一,没有比它开发响应式网站项目效率最高了. 随着Vue.js的逐渐流行,更多人们用它来控制页面元素,实现强大互动功能.而jQuery出现了一些技术落后 ...

  7. bootstrap 打印组件_如何在Bootstrap项目中用Vue.js替代jQuery

    Bootstrap是 Web 开发最受欢迎的框架之一,没有比它开发响应式网站项目效率最高了. 随着Vue.js的逐渐流行,更多人们用它来控制页面元素,实现强大互动功能.而jQuery出现了一些技术落后 ...

  8. Vue.js 核心精要实战解析

    课程简介 前端框架领域,Angular.React.Vue.js 三足鼎立,而 Vue.js 因其性能.通用.易用.体积.学习成本低等特点深受广大前端们的追捧,并吸引了一大批前端初学者.作为 Vue. ...

  9. Vue.js 实战总结

    收录待用,修改转载已取得腾讯云授权 最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大 ...

最新文章

  1. 简单的Writer和Reader
  2. 只要尝试过飞,日后走路也会仰望天空
  3. android位运算简单讲解
  4. xmind思维导图之如何进行深度工作
  5. 在SSH上传文件出现Permission denied错误
  6. boost::range模块tokenized相关的测试程序
  7. VTK:Remote之FrenetSerretFrameDemo
  8. BOM+DOM+JavaScript读取与操作网页对象
  9. Jeecg 实现RESTful风格
  10. Shell编程基础(1)
  11. MySQL · 引擎特性 · 基于InnoDB的物理复制实现(转载)
  12. Python下的中文分词实现
  13. Stratified k-foldTimeSeriesSplit
  14. CNC:CNC计算机数控系统技术之数控仿真宏程序代码讲解、案例应用集合之详细攻略
  15. Angr源码分析——DDG的生成
  16. 麦肯锡全球研究院 人机共存的新纪元: 自动化、就业和生产力
  17. php 图片印章_在线生成实用又方便 (图片印章)
  18. ES快速入门(七) ElasticSearch7.X分布式部署
  19. 《数据结构与算法分析》课程设计——贪吃蛇问题
  20. 时间管理专题_软件篇02

热门文章

  1. Flash 组件应用与开发
  2. mongodb之索引学习
  3. CentOS 7 防火墙开启了哪些服务和端口?
  4. Docker在window系统中的安装
  5. Android 应用 之路 天气预报(五)
  6. msysGit管理GitHub代码
  7. Oracle 数字与空值的排序问题
  8. mongodb 分片群集配置 及数据迁移
  9. eclipse查看Android应用内存使用情况
  10. android 获取视频第一帧作为缩略图