封装vue组件库的两种方法和形式:
一:是建立一个webpack-simple 项目
二:是在通过vue-cli脚手架建立webpack vue项目,这种项目有点冗余,可是我们对这种项目最熟悉
下面分别介绍两种用法:
一:
1.首先先建立一个vue项目:
通过vue init webpack-simple,新建项目目录如下:
箭头指的是在项目打包后产生的文件(打包命令npm run build )
2.在src下新建一个目录用来存放组件源码:
然后写封装的组件,比如radios/radio.vue
3.组件封装完后新建index.js文件,作为我们组件库的出入口,index.js内容如下:
上图中comment应该换成components,也就是你自己命名的变量名
4.完了之后修改package.json文件,修改如下:
{
"name": "hz-components-ui",
"description": "uicomponents",
"version": "0.0.0",
"author": "wyx",
"license": "MIT",
// 因为组件包是公用的,所以private为false
"private": false,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
/