0.0.3 • Published 4 years ago
vue-ant-second-packag v0.0.3
vue-npm
##以ant design vue 为基础ui框架，二次开发组件，发布npm
引入less
学习地址：https://juejin.im/post/6844904000655998984#heading-0
vue.config.vue配置
//引入nodejs中fs模块在处理文件信息
const fs = require('fs');
//引入nodejs中path模块来处理文件路径。
const path = require('path');
//把目标路径按当前文件路径转成绝对路径的方法
function resolve(dir) {
return path.resolve(__dirname, dir)
}
const join = path.join
function getEntries(path) {
let files = fs.readdirSync(resolve(path));
const entries = files.reduce((ret, item) => {
const itemPath = join(path, item)
const isDir = fs.statSync(itemPath).isDirectory();
if (isDir) {
ret[item] = resolve(join(itemPath, 'index.js'))
} else {
const [name] = item.split('.')
ret[name] = resolve(`${itemPath}`)
}
return ret
}, {})
return entries
}
//开发环境配置
const devConfig ={
pages:{
index:{
entry:'examples/main.js', //程序入口
template:'public/index.html',
filename:'index.html'
},
},
configureWebpack:{
resolve:{
extensions:['.js','.vue','.json'],
//配置别名，在项目中可缩减引用路径
alias:{
'@' : resolve('packages'),
'assets' : resolve('examples/assets'),
'views' : resolve('examples/views')
}
}
},
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages')
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
return options
})
},
devServer: {
port: 8091,
hot: true, //开启热更新
open: 'Google Chrome' //固定打开浏览器
}
}
//生成环境配置
const buildConfig = {
css: {
sourceMap: true,
extract: {
filename: 'style/[name].css'
}
},
configureWebpack: {
entry: {
...getEntries('packages'),
},
output: {
filename: '[name]/index.js',
libraryTarget: 'commonjs2',
}
},
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages')
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
return options
})
config.optimization.delete('splitChunks')
config.plugins.delete('copy')
config.plugins.delete('html')
config.plugins.delete('preload')
config.plugins.delete('prefetch')
config.plugins.delete('hmr')
config.entryPoints.delete('app')
config.module
.rule('fonts')
.use('url-loader')
.tap(option => {
option.fallback.options.name = 'static/fonts/[name].[hash:8].[ext]'
return option
})
},
outputDir: 'lib', //我们将组件库打包编译后放在lib文件夹中，在vue.config.js文件中配置内容
productionSourceMap: false, //关闭source map
}
module.exports = process.env.NODE_ENV === 'development' ? devConfig : buildConfig;三、多入口文件页面打包配置
在Vue CLI3搭建的项目中借助babel-plugin-import这个webpack插件并且配置babel.config.js,
来实现组件库的按需引入的前提是组件库是多入口文件页面打包的。组件开发完成
npm run build 打包编译package.json 部分配置
{
"name": "vue-ant-second-packag", //包名称
"version": "0.0.1", //版本号
"description": "学习npm发布组件,ant design vue 二次封装",
"main": "lib/index/index.js", //入口
"private": false, //是否私有 false 时才能发布npm
"license": "MIT",
"author": "ducong",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name vue-ant-second-packag --dest lib packages/index.js"
},
}设置忽略文件
然后创建 .npmignore 文件，设置忽略文件
该文件的语法和 .gitignore 的语法一样，设置发布到 npm 时忽略哪些目录或文件
.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*npm 发布
如果以前改过 npm 的镜像地址，比如使用了淘宝镜像，就先改回来 npm config set registry http://registry.npmjs.org
npm login 登陆npm
npm publish 发布（注意：包名要唯一，否则发布不成功）项目中应用
##引入包
npm i vue-ant-second-packag全局引入
main.js
import AndSender from 'vue-ant-second-packag'
import 'vue-ant-second-packag/lib/style/formColl.css' //引入css
Vue.use(AndSender)
页面内应用
<color-red></color-red>
<form-coll :formData="formData"></form-coll>
formData:[
{formType:'aDate',placeholder:'请选择',initValue:'',prop:'date',name:'日期'},
{formType:'aInput',placeholder:'请选择',initValue:'',prop:'name',name:'姓名'},
{formType:'aRadio',initValue:'',prop:'sex',name:'单选',radioLable:[{value:0,lable:'男'},{value:1,lable:'女'}]},
{formType:'aSelect',placeholder:'请选择',initValue:'',prop:'type',name:'类型选择',selectLable:[{value:0,lable:'aInput'},{value:1,lable:'aRadio'}]},
],//表单数据 formType：表单类型 placeholder：表单提示，initValue：初始值 prop：绑定的字段 ，name：表单名按需引入
（1）在引用组件库demo中,执行npm install babel-plugin-import --save-dev安装babel-plugin-import插件，利用它实现组件按需引入。
（2）在根目录下.babelrc.js文件中按如下配置
module.exports = {
"presets": ["@vue/app"],
"plugins": [
[
"import",
{
"libraryName": "vue-ant-second-packag",//组件库名称【注意：改成自己发布包的名字】
"camel2DashComponentName": false,//关闭驼峰自动转链式
"camel2UnderlineComponentName": false//关闭蛇形自动转链式
"style": (name) =>{
const cssName = name.split('/')[2];
console.log(cssName)
return `vue-ant-second-packag/lib/style/${cssName}.css`
}
}
],
]
}
（3）在main.js写入
import { formColl,colorRed } from 'vue-ant-second-packag'
Vue.use(formColl)
Vue.use(colorRed)
（4）在页面中引入
<color-red></color-red>
<form-coll :formData="formData" :formStyle="formStyle" @inputsData="getInputsData"></form-coll>组件的使用
(1)页面引入方式
<form-coll :formData="formData" :formStyle="formStyle" @inputsData="getInputsData"></form-coll>
（2） formData 数据格式
[
{formType:'aDate',placeholder:'请选择',initValue:'',prop:'date',name:'日期'},
{formType:'aInput',placeholder:'请选择',initValue:'',prop:'name',name:'姓名'},
{formType:'aRadio',initValue:'',prop:'sex',name:'单选',radioLable:[{value:0,lable:'男'},{value:1,lable:'女'}]},
{formType:'aSelect',placeholder:'请选择',initValue:'',prop:'type',name:'类型选择',selectLable:[{value:0,lable:'aInput'},{value:1,lable:'aRadio'}]},
],//表单数据
（3）formType：表单类型 主要分为 aDate（日期类型）aInput（input框）aRadio(单选框) aSelect（下拉选择）
placeholder：表单提示，(单选时，此值可不定义)
initValue：初始值 ，
prop：绑定的字段 ，
name：表单名,
radioLable 单选数据（在类型为aRadio 时存在） 数据类型Array
selectLable 下拉框数据（在类型为aSelect 时存在） 数据类型Array
(4) formStyle 表单样式 非必填项 默认值 {formLayout:'inline',colSm:12,colMd:24}
（5）@inputsData="getInputsData" 接收子组件传回值