ant-design-vue-tree v0.1.9873

基于vue的npm包开发模板

特性

• 开箱即用，直接开始造轮子。
• 使用gulp分模块打包。
• 使用sass样式预处理器。

支持环境

• Vue >= 2.6.0 < 3

安装

1、执行以下命令下载项目：

$ git clone https://github.com/HGthecode/vue-npm-template.git

2、安装依赖：

npm install 

3、启动项目：

npm run serve

然后就可以愉快的造轮子了

项目默认自带了 helloWorld,textComponent 两个示例组件，如不使用删除即可

目录结构

配置 package.json 文件

根据实际情况修改以下几个参数：

{
    "name": "my-component",
    "version": "1.0.1",
    "private": false,
    "main": "lib/init.js",
    "style": "lib/index.css",
    "keywords": [
        "hg-components",
        "test"
    ],
    "author": {
        "name": "HG",
        "email": "376401263@qq.com"
    },
    "peerDependencies": {
        "vue": ">= 2.6.0 < 3"
    }
}

打包

在项目跟目录执行：

npm run lib

本地测试

1、本地生成一个 包名-1.0.1.tgz的包

npm pack

2、在另一个项目执行：

npm install 本地项目路径/包名-1.0.1.tgz

包名是 package.json 的 name 字段

3、然后就可以在项目中正常使用了

import MyComponent from 'MyComponent';
Vue.use(MyComponent);

<my-component />

发布到npm

如果 NPM 全局已经替换成淘宝的镜像源后，登录和发布会失败，这时候可以在命令后面加上 --registry http://registry.npmjs.org 即可

1、到npm官网注册一个账号

2、登录,在项目根目录下运行

npm login

登录成功后，登录信息会存放于全局，也就是说，下次更新发布组件，不需要再重新登录，可通过 npm whoami 可查看当前登录账号名。

3、发布

npm publish