创建项目并且实现npm发包

npm发包
1、通过vue脚手架搭建一个新项目
2、 新增一个文件夹packages，将src文件夹改名examples，增加两个文件：.npmignore和vue.config.js

3、 新增vue.config.js是vue配置文件，内容如下，和传统项目用到的稍稍不同，只需将pages的index只想examles/main.js，并且wepack配置里使用babel解析packages即可，

代码如下

const path = require(“path”)

function resolve(dir) {
return path.join(__dirname, “…”, dir)
}

module.exports = {
pages: {
index: {
entry: “examples/main.js”,
template: “public/index.html”,
filename: “index.html”
}
},

chainWebpack: config => {
    config.module
        .rule("js")
        .include.add(resolve('packages'))
        .end()
        .use("babel").loader("babel-loader")
        .tap(options => {
            return options;
        })
}

}

4、将webpack.base.config.js文件中 entry的app路径跟改为./examples/main.js

5、packages里面新增demo-component文件夹，在其下面新建src文件夹并在src下新建demo-component.vue组件，在demo-component文件夹下属于该内容的index.js

demo-component.vue组件内容

这是demo-component.vue

index.js内容

// src/index.js
// 导入组件，组件必须声明 name
import demoComponent from ‘./src/demo-component’
// 为组件提供 install 安装方法，供按需引入
demoComponent.install = function (Vue) {
Vue.component(demoComponent.name, demoComponent)
}
// 默认导出组件
export default demoComponent

6、在packages文件夹下新建该根目录下index.js,将组件导入的函数

index.js代码如下

// 导入颜色选择器组件
import demoComponent from “./demo-component/index.js”;
// 存储组件列表
const components = [demoComponent];
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
// 判断是否安装
if (install.installed) return;
// 遍历注册全局组件
components.forEach(component => {
Vue.component(component.name, component)
});
};
// 判断是否是直接引入文件
if (typeof window !== “undefined” && window.Vue) {
install(window.Vue);
}
export default {
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
demoComponent
};

7、首先本地测试需要在examples里编写代码，可以按照正常的vue项目去写，唯一区别就是原来的src目录变成了examples目录，其他一切正常，在examples的main.js里引入packages的demo-component，为了方便测试，直接添加成全局代码，此处因为只有一个demo-component组件，所以是用的按需加载的方式，后续可以根据需要改成全量加载，然后再页面中直接使用该组件 测试效果

import Vue from ‘vue’
import App from ‘./App.vue’
import ‘./registerServiceWorker’
import router from ‘./router’
import Button from “…/packages/index”

Vue.use(Button);

Vue.config.productionTip = false

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