vue-cli 构建库

最新推荐文章于 2023-06-07 13:43:35 发布

专心填坑的姑娘

最新推荐文章于 2023-06-07 13:43:35 发布

阅读量821

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_42006492/article/details/85161705

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

记录一下，方便自己看。

webpack.json

{
  "name": "vue-mobile-notification",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name test./src/lib/index.js"   **//配置打包入口文件**
    "lint": "vue-cli-service lint"
  },
  "main": "dist/test.umd.js",   **//npm包入口**
  "dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.17"
  }
}

2.本地测试 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import test from './lib/index.js'   **//引入**
Vue.use(test)                              **//引入**

console.log(1111)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.项目目录
src/lib/index.js
src/lib/test.vue

4.index.js vue组件构建

import myNotification from './my-notification.vue'

const test= {}
test.install = function (Vue) {
  Vue.component(mytest.name, mytest)
}
export default test