步骤：

  1. 编写自己模块的npm包；
  2. 在主框架的依赖中引入自己的模块；


特别说明：**
目前是基于对git仓库地址引用介绍的；
如果你想通过自己创建的私人npm库引用的话，请点击：搭建自己的私有npm库

1. 编写自己的npm包

初始化项目

  1. // 初始化一个本地仓库
  2. git init
  3. // 初始化项目，生成默认的package.json文件
  4. npm init -y

package.json文件改动如下，可自己酌情删减。

需要注意修改的配置如下：

  1. name为自己的npm包名；
  2. main为打包后的入口文件（*）；
  3. script内的build命令是webpack打包的入口命令；
  4. license根据自己的情况写（开源或内部）;
  5. devDependencies为vue应用的基础配置，并且引入了less。
    1. {
    2. "name": "iot-login-form",
    3. "version": "0.0.1",
    4. "description": "iot-login-form",
    5. "main": "dist/index.bundle.js",
    6. "scripts": {
    7.  "test": "echo \"Error: no test specified\" && exit 1",
    8.  "start": "webpack-dev-server --hot --inline",
    9.  "build": "webpack --display-error-details --config webpack.config.js"
    10. },
    11. "author": "chenshiyu",
    12. "license": "YGInsight",
    13. "devDependencies": {
    14.  "babel-core": "^6.26.0",
    15.  "babel-loader": "^7.1.2",
    16.  "babel-plugin-transform-object-rest-spread": "^6.26.0",
    17.  "babel-plugin-transform-runtime": "^6.23.0",
    18.  "babel-polyfill": "^6.26.0",
    19.  "babel-preset-es2015": "^6.24.1",
    20.  "css-loader": "^0.28.7",
    21.  "es6-promise": "^4.1.1",
    22.  "less": "^2.7.3",
    23.  "less-loader": "^4.0.5",
    24.  "style-loader": "^0.19.0",
    25.  "url-loader": "^0.6.2",
    26.  "vue": "^2.5.9",
    27.  "vue-hot-reload-api": "^2.2.4",
    28.  "vue-html-loader": "^1.2.4",
    29.  "vue-loader": "^13.5.0",
    30.  "vue-router": "^3.0.1",
    31.  "vue-style-loader": "^3.0.3",
    32.  "vue-template-compiler": "^2.5.9",
    33.  "vuex": "^3.0.1",
    34.  "webpack": "^3.9.1",
    35.  "webpack-dev-server": "^2.9.5"
    36. },
    37. "dependencies": {}
    38. }

初始化页面

  1. // 新建一个src目录
  2. mkdir src
  3. // 在src内新建index.js和login-form.vue两个文件
  4. touch index.js login-form.vue

特别注意：index.js是用来将login-form导出的！！！

  1. import IotLoginForm from './login-form.vue';
  3. export default IotLoginForm;

login-form.vue在此处略过，可先随变写。

定义webpack打包配置

  1. // 在根目录下新建 webapc.config.js文件
  2. touch webapc.config.js

重点是 output.path，output.filename，此处与packgage.json文件的main路径一致（dist下的index.bundle.js文件）

webpack.config.js

  1. const path = require("path");
  2. const webpack = require("webpack");
  3. const uglify = require("uglifyjs-webpack-plugin");
  5. module.exports = {
  6.     devtool: 'source-map',
  7.     entry: "./src/index.js",//入口文件，src目录下的index.js文件，
  8.     output: {
  9.         path: path.resolve(__dirname, './dist'),//输出路径，就是新建的dist目录，
  10.         publicPath: '/dist/',
  11.         filename: 'index.bundle.js',
  12.         libraryTarget: 'umd',
  13.         umdNamedDefine: true
  14.     },
  15.     module: {
  16.         rules: [{
  17.                 test: /\.vue$/,
  18.                 loader: 'vue-loader'
  19.             },
  20.             {
  21.                 test: /\.less$/,
  22.                 use: [
  23.                     { loader: "style-loader" },
  24.                     { loader: "css-loader" },
  25.                     { loader: "less-loader" }
  26.                 ]
  27.             },
  28.             {
  29.                 test: /\.js$/,
  30.                 exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
  31.                 loader: 'babel-loader'
  32.             },
  33.             {
  34.                 test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
  35.                 loader: 'url-loader',
  36.                 query: {
  37.                     limit: 30000,
  38.                     name: '[name].[ext]?[hash]'
  39.                 }
  40.             }
  41.         ]
  42.     },
  43.     plugins: [
  44.         new webpack.DefinePlugin({
  45.             "process.env": {
  46.                 NODE_ENV: JSON.stringify("production")
  47.             }
  48.         })
  49.     ]
  50. }

打包后提交工程

  1. // 打包工程
  2. npm run build
  3. // push到自己的代码库（略）
  4. // git push

2. 主框架使用自定义模块

引入自定义模块的依赖包

iot-portal仓库的package.json

注意：地址前加上git+
格式：git+你的仓库地址（最好为http模式的）

  1. "dependencies": {
  2.     "iot-login-form": "git+http://ip:port/chenshiyu/iot-login-form.git"
  3.   },

页面引用

  1. <template>
  2.   <div class="iot-login">
  3.     <iot-login-form></iot-login-form>
  4.   </div>
  5. </template>
  6. <script>
  7. import IotLoginForm from 'iot-login-form';
  8. export default {
  9.   name: 'IotLogin',
  10.   components: {
  11.     IotLoginForm
  12.   },
  13. };
  14. </script>

启动主服务，进入相应页面即可直接使用。