Nexus 3 信息
私有库:http://**:8081/repository/cc-npm-hosted/
代理库:http://**:8081/repository/cc-npm-proxy/
仓库组:http://**:8081/repository/cc-npm-group/
认证信息:cc_npm_publicer/cc_npm_publicer
NPM 处理过程:
创建目录(目录名称建议与包名相同),然后创建 package.json 文件
package.json 中的 name 以及 version 更改为对应名称及版本
webpack.config.js 中配置
const NODE_ENV = process.env.NODE_ENV;
console.log(“—–NODE_ENV===”, NODE_ENV);
// “main”: ‘dist/sumFunction.js’,
module.exports = {
entry: NODE_ENV == ‘development’ ? ‘./src/main.js’ : ‘./src/myPlugin/infoConfig/index.js’, //index 中引入页面和 vuex 组件
output: {
path: path.resolve(__dirname, ‘./dist’),
publicPath: ‘/dist/’,
filename: ‘index.js’,
library: ‘deviceTrend’, // 指定的就是你使用 require 时的模块名
libraryTarget: ‘umd’,
umdNamedDefine: true
}
配置好 json 后将所需资源文件加入到目录,然后执行命令进行发布:
登录:npm login –registry=http://192.168.138.182:8081/repository/cc-npm-hosted/
发布:npm publish –registry=http://192.168.138.182:8081/repository/cc-npm-hosted/
使用:
需要配置 registry 或安装时制定库
npm install [package-name] –registry=http://192.168.138.182:8081/repository/cc-npm-group/
或
npm config set registry http://192.168.138.182:8081/repository/cc-npm-group/
或
编辑 ~/.npmrc 加入下面内容,registry = http://192.168.138.182:8081/repository/cc-npm-group/
项目引入:
main.js 中写入
import TrendChart from ‘device-trend’
Vue.component(‘trend-chart’, TrendChart.devicetrend)
store.js 中写入
import DeviceTrend from ‘device-trend’
const device = DeviceTrend.device_trend
本文参考 https://www.cnblogs.com/max-t…
-
项目初始化:
1.1 以前我们初始化 vue 工程都是用 webpack 的完整配置模板,也就是:vue init webpack my-project
1.2 若组件相当复杂,而且需要打包到一个 vue 组件中建议使用 Vue CLI 3
使用 Vue CLI 3 将基于 element-ui 二次封装的组件发布到 npm
npm uninstall -g vue-cli
cnpm install -g @vue/cli
vue create my-app
cd my-app
vue add element
参考网址:https://www.cnblogs.com/lalalagq/p/9921283.html
vue-cli-plugin-element https://github.com/ElementUI/vue-cli-plugin-element
1.3 我们要写的是一个简单的 vue 组件,不需要依赖那么多而庞大的配置,所以,这里我们用简介版本的 webapck 配置模板, 即:vue init webpack-simple my-project
三者的差异:https://segmentfault.com/a/1190000011402931
1.4 初始化完成后
1.5 既然是封装组件,那我们在 src 下面创建一个 myPlugin 文件夹规整一点吧,然后,考虑到要写很多种情况, 我们在 myPlugin 下面放我们的插件(如果个人习惯不想区分也行,只是方便管理),当前组件的相关文件我们给一个 infoConfig 文件夹名字,下面创建 common-config.vue 和 index.js
1.6 接下来,打开终端,安装依赖,启动项目
npm install
npm run dev
然后,我们来写 common-config.vue,自然是我们的组件代码:1.7 写好了组件,我们本地看下效果先:(1)打开 src/App.vue 文件,进行简单的编辑配置;(2)执行 npm run dev 查看页面效果。1.8 继续我们 infoConfig/index.js 文件,目的:将该组件作为 Vue 插件
此处需要注意的是 install。Vue 的插件必须提供一个公开方法 install,该方法会在你使用该插件,也就是 Vue.use(yourPlugin) 时被调用。这样也就给 Vue 全局注入了你的所有的组件。参考 https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6
-
修改配置项:
2.1 修改 webpack.config.js :
entry: NODE_ENV == ‘development’ ? “./src/main.js” : “./src/myPlugin/infoConfig/index.js”,
// 根据不同的执行环境配置不同的入口
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'index.js',
library: 'systemInfoConfig',
// 指定的就是你使用 require 时的模块名
libraryTarget: 'umd',
// 指定输出格式
// 为了支持多种使用场景,我们需要选择合适的打包格式。// 常见的打包格式有 CMD、AMD、UMD,CMD 只能在 Node 环境执行,// AMD 只能在浏览器端执行,UMD 同时支持两种执行环境。// 显而易见,我们应该选择 UMD 格式
umdNamedDefine: true
// 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
}
修改完成后执行
npm run build
2.2 修改 package.json 文件:每次上到 npm 上需要更改版本号,package.json 里的 version 字段
// 发布开源因此需要将这个字段改为 false
“private”: false,
// 这个指 import tlp_plugin_sum 的时候它会去检索的路径
“main”: “dist/index.js”,
2.3 修改 git 上传代码,可以将 .gitignore 去掉忽略 dist , 把打包的文件也提交上去;2.4 添加版权声明的插件
参考:https://webpack.js.org/plugins/banner-plugin/
https://segmentfault.com/a/1190000016949216?utm_source=tag-newest
要使用某个插件,我们需要通过 npm 安装它,然后要做的就是在 webpack 配置中的 plugins 关键字部分添加该插件的一个实例(plugins 是一个数组)
const webpack = require(‘webpack’);
module.exports = {
…
module: {
rules: [
{test: /(\.jsx|\.js)$/,
use: {loader: "babel-loader"},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{loader: "style-loader"}, {
loader: "css-loader",
options: {modules: true}
}, {loader: "postcss-loader"}
]
}
]
},
plugins: [new webpack.BannerPlugin('版权所有,翻版必究')
],
};
-
提交发布:
3.1 .npmignore 可是如果你在项目中添加了 .npmignore 文件,.npmignore 中的规则就会被忽略,可以屏蔽不想上传的源码文件。使用语法与 .gitignore 类似。3.2 登录
npm login –registry=http://192.168.138.182:8081/repository/cc-npm-hosted/
3.3 输入 账号 密码 邮箱
Username: cc_npm_publicer
Password: cc_npm_publicer
Email: guowei.cao@bangcle.com
3.4 发布
npm publish –registry=http://192.168.138.182:8081/repository/cc-npm-hosted/
3.5 发布成功 ********** 显示 类似于 + gulp1@1.1.1 就成功了 ********
3.6 查看 可在 http://192.168.138.182:8081/#browse/browse:cc-npm-hosted:vue-tree%2Fvue-tree-1.0.1.tgz 查看结果
账号: admin
密码:admin12345
-
更改迭代组件:
4.1 修改 package.json version 4.2 删除 dist 文件夹 4.3 npm run build 重新打包 4.4 再次重复步骤 3
-
下载安装,应用:
5.1 下载
npm install system-info-config –registry=http://192.168.138.182:8081/repository/cc-npm-hosted/
5.2 输入命令
npm install system-info-config --registry=http://192.168.138.182:8081/repository/cc-npm-group/ --save
5.3 依赖包同步到公司私服
npm install --registry=http://192.168.138.182:8081/repository/cc-npm-proxy/
5.4 应用
main.js 中写入
import BangcleComponent from ‘system-info-config’
Object.keys(BangcleComponent).forEach(key => {
Vue.component(BangcleComponent[key].name, BangcleComponent[key]);
});
<systemInfoConfig></systemInfoConfig>
system-info-config 主要完成的是一个公共的 vueX 文件:该文件的编写过程中 与 项目中的模块化 vuex 无异;在项目中的使用方式是:store.js 中写入
import BangcleComponent from ‘system-info-config’ // 按需引入相应的模块化 vueX
const SYSTEM_INFO_STORE = BangcleComponent.SYSTEM_INFO_STORE
if (module.hot) {
// 使 action 和 mutation 成为可热重载模块
module.hot.accept(['system-info-config'], () => {
// 获取更新后的模块
// 因为 babel 6 的模块编译格式问题,这里需要加上 `.default`
const newMutations = require('system-info-config').default
// 加载新模块
store.hotUpdate({SYSTEM_INFO_STORE: newMutations.SYSTEM_INFO_STORE,})
})
}
模块热替换 https://webpack.docschina.org/api/hot-module-replacement
这样就完成了公共组件的 vueX 模块化引入
在需要使用的组件 dispatch 相应的方法即可,例如:
this.$store.dispatch(‘SYSTEM_INFO_STORE/UPDATE_SYSTEM_DEFAULT_INFO’, this.updatedInfo);
this.$store.dispatch(‘SYSTEM_INFO_STORE/FETCH_SYSTEM_INFO’);
同样我们可以把 system-info-config 做成一个组件,类似于 componments 中的业务组件一样:配置相应的 props 以及 default 值,watch 监听数据的变化,渲染相应的数据,在此不再赘述
可参考
http://192.168.138.251/pg/bangcle_components/commit/1536ded6356999f0437ea3ba56c320e394c2ddf2#3f8dd5beab70eee423b1ddbe10ea26a683fe7715
entry: NODE_ENV == ‘development’ ? “./src/main.js” : “./src/myPlugin/infoConfig/index.js”,
output: {
path: path.resolve(__dirname, ‘./dist’),
publicPath: ‘/dist/’,
filename: ‘index.js’,
library: ‘systemInfoConfig’, // 指定的就是你使用 require 时的模块名
libraryTarget: ‘umd’, // 指定输出格式
// 为了支持多种使用场景,我们需要选择合适的打包格式。
// 常见的打包格式有 CMD、AMD、UMD,CMD 只能在 Node 环境执行,
// AMD 只能在浏览器端执行,UMD 同时支持两种执行环境。
// 显而易见,我们应该选择 UMD 格式
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
用户管理公共组件
核心概念是把 用户管理的四个页面当作 路由直接抛出来,在父组件接收,并 addRoute 添加到项目工程中。
通过 VUEX 来动态改变我们要调整的细节。
代码如下:
公共组件,配置路由的时候,强烈建议 使用 import , 这样打包好的 dist 目录中,只有一个 js 文件(使用 require,就会按需加载了,在父组件一直报错)。
import VueRouter from ‘vue-router’
import BangcleComponent from ‘User-management-common-module’
const customerRoute = BangcleComponent.customerRoute
const App = resolve => require([‘../App.vue’], resolve)
const appManage = {
path: ‘/’,
component: App,
redirect: ‘/manage/customer/customer’,
children: [
managePlatform,
customerRoute
]
}
const routers = [{
path: “/tologin”,
component(resolve) {
require.ensure([‘views/login.vue’], () => {
resolve(require(‘views/login.vue’))
})
}
}, ]
let unfound = {
path: ‘*’,
component(resolve) {
require.ensure([‘components/nofound.vue’], () => {
resolve(require(‘components/nofound.vue’))
})
}
};
// 采用 push, 不然子组件的路由信息,都是 404 了
routers.push(unfound);
const router = new VueRouter({
mode: ‘history’,
routes: routers
})
// 动态加载路由
router.addRoutes([appManage]);
export default router