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" 接收子组件传回值