- Nexus3
- Vue2
- Vue-cli3
Nexus搭建npm仓库
npm包建设
组件库创建
1、在项目中添加组件库文件夹，在根目录下新建一个plugins文件夹，用来放组件。
这里创建plugins文件夹，与src平级。
-
结构目录：
项目目录
2、添加配置文件，项目根目录下面添加vue.config.js文件，主要用于配置webpack打包。
这里使用的是代码打包压缩后上传，这样后期使用的是压缩的js文件。
const path = require('path')
module.exports = {
// 修改 pages 入口
pages: {
index: {
entry: 'src/main.js', // 入口
template: 'public/index.html', // 模板
filename: 'index.html' // 输出文件
}
},
// 扩展 webpack 配置
chainWebpack: config => {
// @ 默认指向 src 目录
// 新增一个 ~ 指向 plugins
config.resolve.alias
.set('~', path.resolve('plugins'))
// 把 plugins 加入编译，因为新增的文件默认是不被 webpack 处理的
config.module
.rule('js')
.include.add(/plugins/).end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
}
3、编写组件
这里先创建components文件夹来存放组件，接着创建index.js统一导出所有组件以及暴露install方法，如果需要单独暴露组件，则在每个组件的文件夹下建立index.js，单独暴露及安装。
组件代码略，以下为统一暴露组件的index.js：
//组件
import pagination from "./components/pagination/index.vue"
import table from "./components/table/index.vue"
//所有组件列表
const components = [pagination, table]
//定义install方法，Vue作为参数
const install = Vue => {
//判断是否安装，安装过就不用继续执行
if (install.installed) return;
install.installed = true;
//遍历注册所有组件
components.map(component => Vue.component(component.name, component));
};
//检测到Vue再执行
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
export default {
install,
//所有组件，必须具有install方法才能使用Vue.use()
...components
};
4、在本地先测试封装是否正确，组件能否展示，此步骤略。
5、打包
package.json
{
"name": "sn-front-web-tools", //包的名称，不能重复
"version": "0.1.0", //初始版本号
"main": "dist/sn-front-web-tools.umd.min.js", //指定包的入口文件
"description": "SN前端web组件", //描述信息
"keywords": [ //关键字，供npm上模糊搜索到包
"pagination",
"table"
],
"license": "MIT", //包遵循的开源许可协议 默认ISC
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lib": "vue-cli-service build --target lib --name sn-front-web-tools -dest lib plugins/index.js",
"lint": "vue-cli-service lint"
}
}
.gitignore添加
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
src/
plugins/
public/
vue.config.js
babel.config.js
*.map
*.html
这个步骤是把包的一些测试文件过滤掉，最终打包只留下直接封装的文件，即plugins中封装的暴露组件。
6、在终端执行npm run lib，结果如下
执行后的文件目录
发布到nexus
1、修改npm registry
npm config set registry=http://xxxx/nexus/content/groups/npm-internal/
2、修改.npmrc文件
直接在命令行输入npm config edit即可打开。
添加以下：
email=you@example.com
always-auth=true
_auth=YWRtaW46YWRtaW4xMjM=
- 注意，上面
_auth为测试值，实际上是用户名密码的Base64位证书
如何获得_auth值？（windows环境）
在任意目录下创建一个in.txt文件，里面直接写nexus访问的用户名：密码。
如：admin:admin123
不要有空行或空格等其他信息。
在in.txt目录下命令行执行
certutil /encode in.txt out.txt
执行后会在当前目录生成out.txt文件，内容是
—–BEGIN CERTIFICATE—–
YWRtaW46YWRtaW4xMjM=
—–END CERTIFICATE—–
第二行即为编码证书，把这串证书信息及你的邮箱信息添加到 .npmrc中
3、测试发布包
npm publish --registry http://xxxx/nexus/content/groups/npm-internal/
nexus上的包
没有异常则发布成功。
npm包使用
- 注意：本次使用的npm包需要在安装
element-ui前提下使用！！
1、安装
npm i sn-front-web-tools --save
2、使用
main.js
本次包已用全局使用的方式，只需要在main.js中添加即可。
在项目中直接使用组件的name即可。
3、更新
命令行输入npm install --save sn-front-web-tools@latest
网友评论