创建自己的组件库

139 阅读1分钟

​本文已参与「新人创作礼」活动,一起开启掘金创作之路。

一   创建组件库

1. 登录或者注册自己的npm 账号

www.npmjs.com/

2. 在控制台登录上自己的帐号

npm login //按照提示输入用户名,密码,邮箱即可

npm who am i     //登陆后查看登陆状态

注意: 控制台登录时可以能遇到的问题

问题一: 报401 (该问题是因为之前安装淘宝镜像 指向不对 修改回来重新登录就可以)

npm config set registry https://registry.npmjs.org/

3. 创建一个vue项目

vue create 项目名称

4.修改里面的打包文件package.json

{
  "name": "组件库名称",  
  "version": "0.1.0",  //版本号
  "private": false,
  "main": "./dist/项目名称.common.js",
  "files": [
	    "dist/*",
	    "src/*",
	    "public/*",
	    "*.json",
	    "*.js"
	  ],
  "scripts": {
 	 "build-bundle": "vue-cli-service build --target lib --name 项目名称 ./src/components/index.js"  
  }
}

5. 打包发布

npm run build-bundle   //打包
npm publish --acces public  //发布

可登录自己的npm账号查看刚发布的包

​编辑

项目增加目录文件以及修改配置文件(之后进行细化)

二  项目中引用组件库

1.在组件库中先增加几个组件 (之后细化)

  1. 使用 npm install 组件库名称 安装到项目中
npm install 组件库名称

  1. 在项目中的main.js中引用该组件

  2. 在项目中使用