Vue.Js添加自定義插件

本文轉載自查看原文 2019-03-09 22:12 3377 vue/ vueplugin/ Html/ vue.js

基於上篇我們講了在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.html
  module.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
    })
  ])
}