vue-cli3 ant-design-vue组件部分加载以及二次封装发布到npm
vue-cli3 ant-design-vue组件部分加载以及二次封装发布到npm由头ant的部分加载二次封装发布到npm打包发布测试完全 o98ko!由头最近做项目时遇到许多组件重用问题,恰巧公司前辈和我提起组件封装问题,就花时间研究了一下。文章分为两部分:1.ant的部分加载2.自定义组件发布到npm它俩好像不相关,但是我在写的时候因为经验不足,误以为有关系,因此把他们写到一起。...
由头
最近做项目时遇到许多组件重用问题,恰巧公司前辈和我提起组件封装问题,就花时间研究了一下。
文章分为两部分:
1.ant的部分加载
2.自定义组件发布到npm
它俩好像不相关,但是我在写的时候因为经验不足,误以为有关系,因此把他们写到一起。
ant的部分加载
-
项目是基于 vue-cli3构建的,我用 vue create xxxx创建的项目 ,
需要先npm install ant-design-vue --save-dev
安装组件库
然后按照文档说明,修改babel.config.js内容:
需要注意,文档要求安装babel-plugin-import
插件,我当时就就给忘了,一直报错,
另外:如果没有添加less、less-loader
插件的话,这里需要npm install一下,ant组件库需要。 -
使用
在main.js中//main.js import Vue from 'vue' import {Pagination, Row, Col } from 'ant-design-vue'; import App from './App.vue' Vue.component(Pagination.name, Pagination); Vue.component(Row.name, Row); Vue.component(Col.name, Col); Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') }
这样 npm run serve 运行。(忐忑)
果然报错了 图找不到了 错误就是Inline JavaScript is not enabled. Is it set in your options?
网上找到解决办法 Vue-cli2.x的看这里
根目录下创建vue.config.js文件,添加如下内容:module.exports = { css: { loaderOptions: { less: { javascriptEnabled: true } } } }
npm run serve !!! OK!
二次封装发布到npm
部分加载搞完,下面就开始开发组件了。
仅仅做了一个很小的组件,带分页的列表。
- 创建项目 vue create xxxx 目录如下:
- 创建packages(随便)目录,用于存放组件源码文件,把src改为examples(名随便)当做示例:
- 由于项目默认入口文件是
src/main.js
,这样修改后就需要在vue.config.js中添加pages配置,现在vue.config.js成这样了:
module.exports = {
pages: {
index: {
//页面入口
entry: 'examples/main.js',
//模板来源
template: 'public/index.html',
//输出文件名
filename: 'index.html'
}
},
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}
这里先运行下项目,如果不报错再进行组件的开发。
- 开发组件
- 之前已经创建了一个 packages 目录,用来存放组件;
- 该目录下存放每个组件单独的开发目录,和一个 index.js 整合所有组件,并对外导出;
- 每个组件都应该归类于单独的目录下,包含其组件自身源码目录 src和 index.js 便于外部引用;
- 这里以 pageList组件为例,完整的 packages 目录结构如下:
这里pageList.vue是具体组件代码,其中组件必须添加name属性,表示使用时的标签名
-
packages/pageList/index.js用于导出单个组件
import PageList from './src/pageList.vue'; //为组件添加 install 方法,用于按需引入 PageList.install = function (Vue) { Vue.component(PageList.name, PageList); } export default PageList;
-
packages/index.js 文件,实现组件的全局注册(you will back!)
//导入单个组件 import PageList from './pageList/index'; //按需导入ant 组件 babel已经配置过 //这里修改一下 如果在这里注册第三方组件 项目中也会全局注册。 //所以在某个组件中使用哪些就在单文件(.vue)里面导入,在components里注册: //类似 [Pagination.name]: Pagination //import { Pagination, Row, Col } from 'ant-design-vue'; //保存 便于遍历 这里只放自定义的插件 (修改时间2019-8-23) const components = [ PageList, //Pagination, //Row, //Col ]; const install = function (Vue) { if (install.installed) return; install.installed = true; components.map(component => { Vue.component(component.name, component); }) } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } // 这里可以用es6的解构语法导入组件 大概就是这个意思 毕竟没有用插件 export {PageList} export default { install, //...components //这个经过测试 似乎没啥用 }
到这里组件就开发完了, 先试一下可不可以用,main.js里:
import tPageList from '../packages/index' Vue.use(tPageList)
直接使用
<t-page-list :dataSource="[1,2,3]"></t-page-list>
运行不报错 o98k!
打包
vue-cli 3.x 提供了一个库文件打包命令
主要需要四个参数:
.1. target: 默认为构建应用,改为 lib 即可启用构建库模式
.2. name: 输出文件名
.3. dest: 输出目录,默认为 dist,这里我们改为 lib
.4. entry:入口文件路径
,默认为 src/App.vue,这里改为 packages/index.js打包命令:
在package.json的scripts里添加新命令,这里叫 lib"scripts": { ... "lib": "vue-cli-service build --target lib --name t-pagelist --dest lib packages/index.js" },
然后 npm run lib编译项目,之后会在lib目录下看到编译好的文件
发布
- 每个项目都可以做为一个模块,package.json就是来描述模块信息的(就像maven管理包,模块化,微~,扯远了…).
name: 包名,该名不能和已有的名称冲突;
version: 版本号,不能和历史版本号相同;
description: 简介;
main: 入口文件,应指向编译后的包文件;
keyword:关键字,以空格分割;
author:作者;
private:是否私有,需要修改为 false 才能发布到 npm;
license:开源协议。- 我的如下:
"name": "t-pagelist", "version": "0.1.0", "description": "relax page list", "main": "lib/t-pagelist.umd.min.js", "license": "MIT", "author": "ztj", "private": false,
- 创建 .npmignore 文件,设置忽略文件,和.gitignore语法一样:
.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*
测试
- 创建新项目 vue create newxxx;
import tPageList from 't-pagelist'
<t-page-list :dataSource="[1,2,3]"></t-page-list>
- npm install t-pagelist --save-dev;
- (激动)npm run serve;
- wtf? 样式呢?--|--
- 最后发现忘记导入样式了
完整main.jsimport Vue from 'vue' import tPageList from 't-pagelist' import 't-pagelist/lib/t-pagelist.css'//不要忘记 import App from './App.vue' Vue.use(tPageList) Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
记住使用时添加css样式
(我就忘记添加,还以为不能按需加载css)
完全 o98ko!
参考文档:
vue-cli 3.x 开发插件并发布到 npm
使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
[VUE-CLI3] 使用iView自定义主题运行项目时报错 Inline JavaScript is not enabled. Is it set in your options?
更多推荐
所有评论(0)