组件库

一 创建组件库
1. 登录或者注册自己的npm 账号

https://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.在组件库中先增加几个组件 (之后细化)

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

npm install 组件库名称
3. 在项目中的main.js中引用该组件

4. 在项目中使用
————————————————
版权声明:本文为CSDN博主「small_fox_dtt」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/small_fox_dtt/article/details/123554726

posted on 2022-07-18 15:30  呗儿  阅读(70)  评论(0编辑  收藏  举报

导航