my-test-first-component v0.1.1

局部引入 1.-- examples // 原 src 目录，改成 examples 用作示例展示

2.-- packages // 新增 packages 用于编写存放组件

3.--修改vue.config.js 配置文件如下：

const path = require('path')
module.exports = {
// 修改 src 为 examples
pages: {
    index: {
    entry: "examples/main.js",
    template: "public/index.html",
    filename: "index.html"
    }
},
// 扩展 webpack 配置，使 packages 加入编译
chainWebpack: config => {
    // @ 默认指向 src 目录，这里要改成 examples
    // 另外也可以新增一个 ~ 指向 packages
    config.resolve.alias
    .set('@', path.resolve('examples'))
    .set('~', path.resolve('package'))

    config.module
    .rule('js')
    .include
        .add(/package/)
        .end().include.add(/examples/)
        .end()
    .use('babel')
        .loader('babel-loader')
        .tap(options => {
        // 修改它的选项...
        return options
        })
    }
};

4.--在packages中创建组件firstcomponent（其它组件导出类似） // firstcomponent？src/index.js // 导入组件，组件必须声明 name import firstcomponent from './src/firstcomponent'

// 为组件提供 install 安装方法，供按需引入
firstcomponent.install = function (Vue) {
    Vue.component(firstcomponent.name, firstcomponent)
}
// 默认导出组件
export default firstcomponent

5.--在packages文件夹下新建index.js,通过install方法，全局使用

6.--在项目中引入组件 // 导入组件库（main.js） import demo from '../packages/index'; // 注册组件库 Vue.use(demo);

7.--examples/components/HelloWorld.vue中直接如下使用

8.--发布到npm,方便直接在项目中引用 1、 package.js 中新增一条编译为库的命令(npm run lib) 2、 package.js 添加配置如下： "scripts": { "lib": "vue-cli-service build --target lib --name test --dest lib packages/index.js" } 3、执行 npm run lib 4、项目根目录下生成一个名字为lib的文件夹；

9.--npm init,配置npm发布字段,填写项目名称和版本号一路回车；

10.--package.json中生成init后的信息；

11.--npm login 登录，npm who 查看是否登录成功；

12、--在package.json中配置如下： "private": false, //允许发布 "main": "lib/componenttest.umd.min.js",

13、--npm publish

7.--运行没有问题后发布npm

8.--npm发布登录npm账号，输入用户名、密码、邮箱、邮箱接收到的一次性密码

9.--npm init（项目名称、版本号必填，其余的可不填，）

{
    “name”: “项目名称”, 
    “version”: “1.0.0”,
    “description”: “对项目的描述”,
    “main”: “导出组件的js”,
    “scripts”: {
    “test”: “echo “Error: no test specified” && exit 1”,
    “start”: “node test.js”//自己加入的配置部分
    },
    “keywords”: [项目关键字],
    “author”: “”,
    “license”: “ISC”
}

10.--npm pbulish 发布(可能会出现402-npm账号密码错误、403项目名称可能被占用，换一个项目名称)

11.--发布成功后登录npm可以查询到发布的项目名称

12.--项目中npm install my-first-test-demo

在需要的页面通过import {firstcomponent,secondcomponent} from 'my-first-test-demo'

components: {
    firstcomponent,
    secondcomponent
},