vue自定义封装组件，并发布到npm上 （完整说明）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
vue-plugin —
           |— build // 构建配置
                |— webpack.base.conf.js  // 基础构建配置
                |— webpack.prod.conf.js  // 打包（正式环境）的构建配置
                ...
           |— config // 运行环境配置
           |— packages  // 组件内容
                |— menu  // 具体的组件
                   |— menu.vue 
                   |— index.js  // 该组件的组测脚本
                |— config  // 组件内容配置信息
           |— utils  // 组件的工具类
           |— css  // 组件引入的样式
               |— variable.scss  // 样式变量
               |— mixin.scss  // 样式混合
               |— menu.scss  // menu组件样式
               |— index.scss  样式总集
           |— src
              |— ...
              |— index.js  // 自定义组件的打包脚本（组件库的入口）
              |— main.js  // 项目的本地运行和构建项目脚本
           |— package.json 
           |— README.md

1
2
3
4
5
6
vue init vue-plugin
// 然后安装依赖并运行

npm install

npm run dev

1
2
3
4
5
6
7
8
9
// 创建menu组件
menu.vue

// 创建一个注册脚本 (和组件平级)
// index.js
import Menu from './menu'

Menu.install = Vue => Vue.component(Menu.name, Menu)
export default Menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// index.js （在src下方，与main.js平级）
import Menu from '../packages/menu/index';

const components = [Menu]

const install = function(Vue. opts={}) {
    components.forEach(component => {
      Vue.component(component.name, component)
    })
}

if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    install,
    Menu
}

1
2
3
4
5
6
// 若是依赖第三方UI库, 则需要将其引入 以element-ui为例， 需要在以上的代码中添加如下代码
import Vue from 'vue'
import ELement from 'element-ui'

Vue.use(Element)
import 'element-ui/lib/theme-chalk/index.css'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export default {
        entry: process.env.NODE_ENV === 'production' ? './src/index.js' : './src/main.js',
        output: {
            path: config.build.assetsRoot,
            filename: 'index.min.js',
            publicPath: process.env.NODE_ENV === 'production'
              ? config.build.assetsPublicPath
              : config.dev.assetsPublicPath,
            library: 'Application', // 指定的就是你使用require时的模块名
            libraryTarget: 'umd',  // 指定输出格式
            umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
        }
    }
    
    
    library：指定的就是你使用require时的模块名
　　libraryTarget：为了支持多种使用场景，我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD，CMD只能在 Node 环境执行，AMD 只能在浏览器端执行，UMD 同时支持两种执行环境。显而易见，我们应该选择 UMD 格式。

　　有时我们想开发一个库，如lodash，underscore这些工具库，这些库既可以用commonjs和amd方式使用也可以用script方式引入。

　　这时候我们需要借助library和libraryTarget，我们只需要用ES6来编写代码，编译成通用的UMD就交给webpack了

　　umdNamedDefine：会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 这里主要修改 plugins中间的配置 主要就保留以下两个插件即可
plugins: {
    // 关于js的压缩插件
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: false,
      parallel: true
    }),
    // 关于css的压缩
    new ExtractTextPlugin({
      filename: 'index.min.css'
    }),
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
    "name": "@styleofpicasso/vue-plugin",  // 插件名称
    "version": "0.0.1", // 插件版本
    "author": "styleofpicasso",
    "main": "dist/index.min.js",  // 打包后的文件入口
    "files": [  // npm 发布的文件包含哪些
      "dist",
      ...
    ],
    "private": false,  // 公开项目，因为组件包是公用的，所以private要改为false
    "keywords": [ // 关键词，可以通过npm搜索你填写的关键词找到你的模块
       "vue",
       "components"
       ...
    ],
    "homepage": "https://xx.github.io/xx/xx-btn/dist/index.html", // 项目官网的url
    "bugs": { // 填写一个bug提交地址或者一个邮箱，被你的模块坑到的人可以通过这里吐槽
        "url": "https://github.com/xx/xx-btn/issues"
    },
    "repository": { // 指定代码所在的仓库地址
        "type": "git",
        "url": "https://github.com/xx/xx-btn.git"
    },
}

1
2
3
4
$--color: orange !default;  // 这里加上 !default, 是默认色，当用户在项目中自定义了 $--color, 会优先使用用户自定义的

$--static-color: #333 !default;
...

1
2
3
4
// 具体样式
.menu {
    color: $--color;
}

1
2
3
4
5
@import './variable';

@import './menu';
....

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 编译打包
npm run build

// 测试插件
npm pack
// npm pack 之后，会在当前目录下生成以一个 styleofpicasso-vue-plugin-0.0.1.tgz 文件

// 打开vue项目，并将该文件放在项目的根目录下，并运行以下命令 （这里的路径时绝对路径）
npm install 路径/styleofpicasso-vue-plugin-0.0.1.tgz

// 安装成功之后，直接在项目中使用该插件，看是否能用，
import VuePlugin from '@styleofpicasso/vue-plugin',
Vue.use(VuePluin)

// 若是能用就直接发布到npm官网，再在项目中重新安装npm插件  （这里需要注意要将package.json中关于插件的包安装地址进行清除，否则会一直安装测试包）

1
2
3
npm install @styleofpicasso/vue-plugin --save
或
yarn add @styleofpicasso/vue-plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import VuePlugin from '@styleofpicasso/vue-plugin'
Vue.Use(VuePlugin)

// 这里是直接包内的样式及主题
// import '@styleofpicasso/3d-application/dist/index.min.css';

// 自定义主题色 （创建一个自己的文件 shared.scss, 包含内容如下）
$--color: 色值  // 按钮鼠标移入色值
$--static-color: 色值 // 默认色值
@import '@styleofpicasso/3d-application/src/plugin/package/css/index.scss';

//在入口文件引入
import '../../css/shared.scss'