2019-10-28(插件+vue-cli+打包)

插件

插件.js

(function () {

   //需要向外暴露的插件对象

   const MyPlugin = {};

   //插件对象一定要有一个install()

   MyPlugin.install = function (Vue, options) {

       //添加全局方法

       Vue.myGlobalMethod = function () {

           console.log('myGlobalMethod')

       }

       //添加指令

       Vue.directive('my-directive', function (el, binding) {

           el.textContent = binding.value.toUpperCase();

       })

       //给实例添加方法

       Vue.prototype.$myMethod = function () {

           console.log('$myMethod')

       }

   }

   //向外暴露

   window.MyPlugin=MyPlugin;

})()

插件.html

<body>

   <div id="app">

       <p v-my-directive="msg"></p>

   </div>

   <script src="../vue.js"></script>

   <script src="./插件.js"></script>

   <script>

       //声明使用插件

       Vue.use(MyPlugin)//内部会执行MyPlugin.install(Vue)

       Vue.myGlobalMethod();

       const vm = new Vue({

           el: '#app',

           data: {

               msg:'I Like You'

           }

       })

       vm.$myMethod();

   </script>

</body>

使用vue-cli创建项目

npm install -g vue-cli

vue init webpack vue_demo

cd vue_demo

npm install

npm run dev

访问http://localhost:8080/

打包发布

npm run build

npm install -g serve

serve dist

访问:http://localhost:5000/

eslint

去除多余的错误检查

1.在.eslintrc.js的文件内

rules:{'indent':'off'}//添加

2.在eslintignore文件内

*.js

*.vue//添加

最后重新npm run dev

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,252评论 0 6
  • 插件 插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种: 1.添加全局方法或者...
    逆风飘游的鱼阅读 1,707评论 0 0
  • 基本格式 以json的形式、将数据(支持所有格式)挂载在vue的data上、方法挂载在vue的methods上。 ...
    kirito_song阅读 802评论 0 21
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,979评论 1 4
  • 第一章 Vue概述 what? Vue是实现UI层的渐进式js框架,核心库关注视图层,简单的ui构建,复杂的路由控...
    fastwe阅读 748评论 0 0