【vue】开发npm插件

webpack

解析js文件，无法解析的文件需要借助loader

安装

cnpm i webpack --save-dev//最新版本
cnpm i webpack@3.0.0 --save-dev//3.0.0版本
cnpm i webpack@^3.0.0 --save-dev//3.0.0以上4.0.0以下版本

基础插件

• html-webpack-plugin用于生成页面（适合多页面）
• extract-text-webpack-plugin 抽取文本
• UglifyJsPlugin/new webpack.optimize.UglifyJsPlugin()合并压缩js
• CommonsChunkPlugin/new webpack.optimize.CommonsChunkPlugin()抽取公共模块（适合多页面）
• clean-webpack-plugin打包前清除文件
• copy-webpack-plugin文件复制

常用loader

• 解析css文件 css-loader
• 解析sass、less、scss、stylus文件 sass-loader/less-loader/node-loader
• 解析图片（png、jpg、svg、gif） file-loader/url-loader
• 给css添加前缀 postcss-loader autoprefixer

ES6插件

• “babel-core”
• “babel-loader”
• “babel-preset-env”

.babelrc 文件：

{
  "presets": ["env"]
}

npm插件发布(vue&webpack&单页面)

1. npm init =>package.json
2. 创建.vue文件 =>插件界面及功能
3. index.js =>入口文件
4. webpack打包 =>webpack.config.js
5. 测试=>this.$tips.show();
6. npm发布=>

npm adduser
npm publish

7. npm更新=>修改 package.json中的版本号，然后npm publish

关键index.js

import TipsComponent from './vue-tips.vue'

let Tips={}
//必须install
Tips.install=function(Vue,options){
  var opt={}
  for(let key in options){
    opt[key]=options[key]
  }
  Vue.prototype.$tips=function(option){

    if(typeof option=='object'){
      for(let key in option){
        opt[key]=option[key]
      }
    }

    //extand继承,实例
    const TipsController=Vue.extend(TipsComponent)
    //mount挂载，得到新实例
    var instance=new TipsController().$mount(document.createElement("div"))

    document.body.appendChild(instance.$el)
  }
  Vue.prototype.$tips['show']=function(option){
    Vue.prototype.$tips(option);
  }
}

if(window.Vue){
  Vue.use(Tips)
}

export default Tips

webpack.config.js

var path=require('path')

module.exports={
  entry:'./src/lib/index.js',
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'vue-tips.js'
    libraryTarget:'umd',//输出规范，amd\cmd\commonjs
    library:'VueTips'//输出
  },
  module:{
    rules:[
      {
        test:/\.vue$/,
        loader:'vue-loader',
        options:{
          loaders:{
            scss:'style-loader!css-loader!sass-loader'
          }
        }
      },
      {
        test:/\.js$/,
        loader:'babel-loader',
        include:path.join(__dirname,'src'),
        exclude:/node_modules/
      }
    ]
  },
  plugins:[
  ]
}

调试心得（vue相关）

1.v-for与数组：增加:push()；修改 splice(index，1，val);删除splice(index，1)
2.v-if与关闭功能:

//v-for循环时，选中的当前列（要删除的）不渲染
v-if="currentIndex!=index"
//点击删除
@click="currentIndex=index"

多页面构建

webpack.config.js

var path=require('path')
var HtmlWebpackPlugin=require('html-webpack-plugin')
var CleanWebpackPlugin =require('clean-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var webpack=require('webpack')
module.exports={
  entry:{
    vendor:['jquery','./src/js/common.js'],
    index:'./src/js/index.js',
    cart:'./src/js/cart.js'
  },
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'js/[name].js',
    publicPath:''
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        include:path.join(__dirname,'src'),
        exclude:/node_modules/,
        loader:'babel-loader'
      },
      {
        test: /\.css$/,
        include:path.join(__dirname,'src'),
        exclude:/node_modules/,
        //抽取css文件生成单独的文件，调用
        /*use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })*/
        loader:'style-loader!css-loader'//将css直接插入到html文件，嵌入文本
      }
    ]
  },
  plugins:[
    //每次webpack时先清除dist
    new CleanWebpackPlugin(['./dist'],{
      root:path.join(__dirname,''),
      exclude:/node_modules/,
      verbose:true,
      dry:false
    }),
    //抽取公共模块，index、cart、vendor都包含common
    new webpack.optimize.CommonsChunkPlugin({
      name:'vendor',
      chunks:['index','cart','vendor'],
      mikChunks:3
    }),
    //压缩js
    new webpack.optimize.UglifyJsPlugin({
      compress:{
        warnings:true//注释不压缩掉
      }
    }),
    //HTML页面生成，多个
    new HtmlWebpackPlugin({
      filename:'index.html',
      template:'./src/index.html',
      chunks:['index','vendor'],//引用的js
      //压缩，注释空格
      minify:{
        removeComments:true,
        collapseWhitespace:true
      }
    }),
    new HtmlWebpackPlugin({
      filename:'cart.html',
      template:'./src/cart.html',
      chunks:['cart','vendor'],
      minify:{
        removeComments:true,
        collapseWhitespace:true
      }
    }),
    //抽取文本
    new ExtractTextPlugin('css/base.css'),
    //全局配置jquery
    new webpack.ProvidePlugin({
      $:'jquery',
      jQuery:'jquery',
      'window.jQuery':'jquery'
    })
  ],
  //devtool:'#source-map'
}