未加星标

从零实现Vue的组件库(零)-基本结构以及构建工具

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

今年三月份入职以来,一直在做后台运营系统,其中重复性工作有很多,其中组件库就是一项。尽管现阶段有很多优秀的开源组件库,但是为了适应产品奇奇怪怪的需求,还是要手动实现一些组件。将其沉淀下来,积累一些自己东西。

概述:首先基于Vue-cli脚手架改装一个组件库的基本构建工具,它具备以下几点功能: webpack3.0 升级 webpack4.0 => 更好地完成组件的开发以及打包工作; 支持sass => 加速组件样式开发; 支持导入markdown以及markdown样式自定义、以及code高亮; 自动配置路由。 1. 实例 实例地址:[Fat-Ge UI library](http://fatge.xyz/blog/juejin-example-3#/) 代码地址:[UI-Library code](https://github.com/FatGe/UI-Library) 复制代码 2. 安装流程

环境:win-64位、node-v8.12.0

安装

npm install --global vue-cli

安装vue-cli,之后创建一个ui-library的项目

vue init webpack ui-library

创建的项目的package.json中,webpack的版本为3.6.0

"webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" 复制代码

为了升级webpack4.1.2,先把当前webpack以及其相关依赖uninstall

npm uninstall -D webpack webpack-bundle-analyzer webpack-dev-server webpack-merge npm uninstall -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin vue-loader 复制代码

安装webpack4,由于webpack4依赖webpack-cli,所以也需要安装

npm install -D webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge npm install -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin vue-loader 复制代码

手动替换 extract-text-webpack-plugin 插件 npm uninstall -D extract-text-webpack-plugin 替换为 npm install -D mini-css-extract-plugin

安装sass相关依赖 npm install -D node-sass sass-loader --save-dev

配置

首先配置webpack的mode,在webpack.dev.conf.js以及webpack.prod.conf.js中分别加上

const devWebpackConfig = merge(baseWebpackConfig, { mode: 'production', ... }) 复制代码 const webpackConfig = merge(baseWebpackConfig, { mode: 'development', ... }) 复制代码

配置webpack.base.conf.js文件

// 引入VueLoaderPlugin const { VueLoaderPlugin } = require('vue-loader') // 添加至 const devWebpackConfig = merge(baseWebpackConfig, { ... plugins: [ new VueLoaderPlugin(), ... ] }) 复制代码

配置webpack.prod.conf.js文件

需要删除

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

之后配置config项

const ExtractTextPlugin = require('extract-text-webpack-plugin') const { VueLoaderPlugin } = require('vue-loader') const webpackConfig = merge(baseWebpackConfig, { optimization: { splitChunks: { cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, chunks: 'initial', name: 'vendors', }, 'async-vendors': { test: /[\\/]node_modules[\\/]/, minChunks: 2, chunks: 'async', name: 'async-vendors' } } }, runtimeChunk: { name: 'runtime' } }, plugins: [ // 添加VueLoaderPlugin new VueLoaderPlugin(), ... // 引入MiniCssExtractPlugin new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[contenthash:7].css') }), // Compress extracted CSS. We are using this plugin so that possible // duplicated CSS from different components can be deduped. new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), // see https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }), // keep module.id stable when vendor modules does not change new webpack.HashedModuleIdsPlugin(), // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] } ]) ] 复制代码

修改utils.js

exports.cssLoaders = function(options) { options = options || {} // generate loader string to be used with extract text plugin function generateLoaders(loader, loaderOptions) { let loaders = [] if (loader) { loaders = [{ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }] } if (options.extract) { let extractLoader = { loader: MiniCssExtractPlugin.loader, options: {} } return [extractLoader, 'css-loader'].concat(['postcss-loader'], loaders) } else { return ['vue-style-loader', 'css-loader'].concat(['postcss-loader'], loaders) } } return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } } 复制代码 3. 支持导入markdown以及markdown样式自定义

由于 vue-markdown-loader 与vue-loader版本15有兼容性的问题,所以利用 text-loader 将Markdown文档导入并生成String,再编译为markdown文档。

首先 npm install -D text-loader 安装text-loader,用来引入*.md文件,再修改webpack.base.conf.js文件,添加text-loader

rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /.md$/, loader: 'text-loader' }, ... ] 复制代码

在引入 marked 对导入的String进行编译

<template> <div class="markdown-body" v-html="compiledMarkdown" v-highlight></div> </template> import markdown from '../../README.md' import marked from 'marked' export default { computed: { markdowonText () { // 编译markdown return marked(markdown) } } } 复制代码

觉得markdown的样式有些丑,可以导入 github-markdown-css

npm install -D github-markdown-css

对样式进行修改。如果markdown中存在着某些code,可以通过 highlight 进行高亮展示

npm install -D highlight

import hljs from 'highlight.js' // 调整高亮code的样式 import 'highlight.js/styles/vs2015.css' hljs.configure({ useBR: true }) // 注册一个directive用来添加code高亮 Vue.directive('highlight',function (el) { let blocks = el.querySelectorAll('code') blocks.forEach(block => { hljs.highlightBlock(block) }) }) 复制代码 4. 自动配置路由

利用 require.context 解析某个目录下的文件,将其生成Router的配置

const context = require.context('@/components/', true, /demo\.vue$/) const componentRouters = context.keys().map(url => { const start = url.indexOf('/') const end = url.lastIndexOf('/') const name = url.substring(start + 1, end) const path = `/${name}` return { name, path, component: require(`@/components${path}/demo`).default } }) export default new Router({ routes: [ { path: '/', name: 'mainPage', component: mainPage }, ...componentRouters ] } ) 复制代码

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:从零实现Vue的组件库(零)-基本结构以及构建工具
本站链接:https://www.codesec.net/view/620949.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(52)