<h1>Vue CLI3搭建组件库并实现按需引入实战操作</h1>
<blockquote>
<p>在<a href="https://juejin.im/post/6844903926941089806#heading-23">Vue CLI3搭建组件库并用npm发布实战操作</a>中介绍了单个组件的组件库怎么开发，本文将一步一步教大家怎么开发多个组件集成的组件库，怎么实现组件库按需引入。觉得有用点个赞支持一下。</p>
</blockquote>
<blockquote>
<p>本文将略过安装Vue CLI3、搭建组件库的项目、清洁组件库项目的步骤，不懂的地方可以看<a href="https://juejin.im/post/6844903926941089806#heading-23">Vue CLI3搭建组件库并用npm发布实战操作</a></p>
</blockquote>
<h2>一、建立两个git仓库放本文的示例代码</h2>
<ul><li><a href="https://github.com/532pyh/Vue_Cli3_MAPLib">组件库</a></li><li><a href="https://github.com/532pyh/Vue_Cli3_MAPLib_Test">引用组件库demo</a></li></ul>
<h2>二、组件库项目中webpack一些基础配置</h2>
<blockquote>
<p>在Vue CLI3中，项目的webpack配置是要在根目录下新建vue.config.js来配置。</p>
</blockquote>
<h3>1、区分开发环境和生成环境的配置</h3>
<p>因为多入口组件库中开发环境和生成环境的配置是不同，所有要区分开来。 通过<code>process.env.NODE_ENV</code>变量来判断，生产环境时<code>process.env.NODE_ENV</code>为<code>development</code>。</p>
<pre class="blockcode"><code>//开发环境配置
const devConfig = {
//...
}
const buildConfig = {
//...
}
module.exports = process.env.NODE_ENV === 'development' ? devConfig : buildConfig;
复制代码</code></pre>
<h3>2、更改src文件夹的名字</h3>
<p>在Vue组件库项目中原来src文件夹的内容是demo展示的内容，所以文件名改成examples，比较形象。</p>
<h3>3、重新配置项目入口文件</h3>
<p>在vue.config.js文件中配置内容如下：</p>
<pre class="blockcode"><code>const devConfig={
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html',
},
},
}
复制代码</code></pre>
<h3>4、配置文件别名</h3>
<p>文件别名会在写demo中用到。在vue.config.js文件中配置内容如下：</p>
<pre class="blockcode"><code>const path = require('path');
function resolve(dir) {
return path.resolve(__dirname, dir)
}
const devConfig = {
configureWebpack: {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('packages'),
'assets': resolve('examples/assets'),
'views': resolve('examples/views'),
}
},
},
}
复制代码</code></pre>
<h3>5、配置devServer项</h3>
<p>在vue.config.js文件中配置内容如下：</p>
<pre class="blockcode"><code>const devConfig = {
devServer:{
port: 8091,//固定端口
hot: true,//开启热更新
open: 'Google Chrome'//固定打开浏览器
}
}
复制代码</code></pre>
<h3>6、在根目录下新建packages文件夹</h3>
<p>组件的代码在packages文件夹中开发</p>
<h3>7、将新增的packages文件夹加入babel转码编译</h3>
<p>在vue.config.js文件中配置内容如下：</p>
<pre class="blockcode"><code>const devConfig = {
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages')
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
return options
})
},
}
复制代码</code></pre>
<blockquote>
<p><strong>以上是开发环境的配置，下面来写一下生产环境的配置</strong></p>
</blockquote>
<h3>8、在生产环境下也要将新增的packages文件夹加入babel转码编译</h3>
<pre class="blockcode"><code>const buildConfig = {
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages')
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
return options
})
},
}
复制代码</code></pre>
<h3>9、配置生产环境构建文件的目录</h3>
<p>我们将组件库打包编译后放在lib文件夹中，在vue.config.js文件中配置内容如下：</p>
<pre class="blockcode"><code>const buildConfig = {
outputDir: 'lib',
}
复制代码</code></pre>
<h3>10、关闭source map</h3>
<p>关闭source map有两个好处</p>
<ol><li>减少打包编译的时间；</li><li>避免在生产环境中用F12开发者工具在Sources中看到源码。</li></ol>
<p>在vue.config.js文件中配置内容如下：</p>
<pre class="blockcode"><code>const buildConfig = {
productionSourceMap: false,
}
复制代码</code></pre>
<h2>三、多入口文件页面打包配置</h2>
<blockquote>
<p>在Vue CLI3搭建的项目中借助<code>babel-plugin-import</code>这个webpack插件并且配置babel.config.js,来 |
|
转播
