Ant Design Vue项目解析-前言
源码系列文章很长时间没有更新,一是在考虑文章用什么方式写质量会更高,用什么方式总结更易于扩展和总结知识点,加上工作、看书、健身占用的时间比较多所以也没时间去整理。最近在网上看到一篇文章感觉这种方式不错,刚好ant Desgin of vue发布,就想试试用这种方式写文章,而且通过画思维导图来整理整个知识点:
还没有整理完,里面经常会有打问号的解释是因为要看到后面才能知道这个组件的用途。后续会将其补充完整。还想记录下我在不熟悉源码结构下怎么牵出一个线头顺藤摸瓜的属性整个项目。
把ant Desgin of Vue源码下载后大概看了下目录,可能最容易知道的是components文件夹是组件的源码,其他文件就知道里面是什么,不用太着急知道其他文件的内容。我拿到项目会先看package.json配置文件,主要是因为里面记录项目的一些指令。
其他指令不太好理解但红色框内的指令经过很好理解,上面框内是本地调试运行的指令,下面框内是打包指令。
运行指令:
npm install
安装依赖的包
然后在运行npm start
可以看到这个页面
可以知道本地调试是能看到ant Desgin of Vue官网api页面,然后想到看webpack.config.js配置文件中配置的入口文件。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.config');
module.exports = merge(baseWebpackConfig, {
mode: 'development',//配置模式
output: {
path: path.resolve(__dirname, './dist'),//输出路径
publicPath: '/',//路径前缀
filename: 'build.js',//文件名称
},
module: {
rules: [//解析less、css文件
{
test: /\.less$/,
use: [
{ loader: 'vue-style-loader' },
{
loader: 'css-loader',
options: { sourceMap: true },
},
{ loader: 'less-loader', options: { sourceMap: true, javascriptEnabled: true } },
],
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader'],
},
],
},
devServer: {//测试环境的配置
port: 3000,//端口号
host: '0.0.0.0',//用ip可以访问
historyApiFallback: {//当使用 HTML5 History API 时,任意的 404 响应都可能需要被替代为 index.html
rewrites: [{ from: /./, to: '/index.html' }],
},
disableHostCheck: true,//设置为true时,此选项会绕过主机检查。
headers: { 'Access-Control-Allow-Origin': '*' },//在所有响应中添加首部内容
},
performance: {//通过这些选项,您可以控制webpack如何通知您超出特定文件限制的资产和入口点。
hints: false,//关闭提示
},
devtool: '#source-map',//此选项控制是否生成,以及如何生成 source map。
plugins: [//打包过程用到的插件
new HtmlWebpackPlugin({
template: 'site/index.html',//设置生成html模板
filename: 'index.html',//输出的文件名称
inject: true,//当传递true或body时,所有javascript资源都将放在body元素的底部。头将把脚本放在头元素中
}),
],
});
以上注释来自于《webpack中文文档》
引用的包
- path
path 模块提供用于处理文件路径和目录路径的实用工具
(from:《Node.js v10.15.3 文档》)
- html-webpack-plugin
HtmlWebpackPlugin简化了HTML文件的创建,以便为您的 webpack bundle 提供服务。这对于被更改文件的文件名中包含每次编译哈希(hash) 的webpack bundle尤其有用。您可以让插件为您生成一个HTML文件,使用lodash templates提供您自己的模板,或使用自己的加载器(loader)。
(from:《webpack 2.2中文文档》)
template设置生成html模板;filename输出的文件名称;inject当传递true或body时,所有javascript资源都将放在body元素的底部,头将把脚本放在头元素中。
- webpack-merge
合并公共配置
(参考文章:《webpack》《webpack-merge - Merge》)
代码中引入了webpack.base.config.js文件对象合并配置对象,在来看webpack.base.config.js代码
const path = require('path');
const hljs = require('highlight.js');
const Token = require('markdown-it/lib/token');
const cheerio = require('cheerio');
const WebpackBar = require('webpackbar');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const getBabelCommonConfig = require('./antd-tools/getBabelCommonConfig');
const babelConfig = getBabelCommonConfig(false);
babelConfig.plugins.push(require.resolve('babel-plugin-syntax-dynamic-import'));
const fetch = (str, tag, scoped) => {
};
/**
* `{{ }}` => `<span>{{</span> <span>}}</span>`
* @param {string} str
* @return {string}
*/
const replaceDelimiters = function(str) {
};
/**
* renderHighlight
* @param {string} str
* @param {string} lang
*/
const renderHighlight = function(str, lang) {
};
const md = require('markdown-it')
const vueLoaderOptions = {
};
module.exports = {
mode: 'production',//配置模式
entry: {
index: [`./site/${process.env.ENTRY_INDEX || 'index'}.js`],//入口文件
},
module: {
rules: [
{
test: /\.md$/,//解析md文件
use: [
{
loader: 'vue-loader',
options: vueLoaderOptions,
},
{
loader: 'vue-antd-md-loader',
options: Object.assign(md, {
wrapper: 'div',
raw: true,
}),
},
],
},
{
test: /\.vue$/,//解析vue文件
loader: 'vue-loader',
options: vueLoaderOptions,
},
{
test: /\.(js|jsx)$/,//解析js|jsx文件
loader: 'babel-loader',
exclude: /node_modules/,
options: babelConfig,
},
{
test: /\.(png|jpg|gif|svg)$/,//解析png|jpg|gif|svg文件
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
},
},
],
},
resolve: {//配置模块如何解析
modules: ['node_modules', path.join(__dirname, '../node_modules')],//告诉 webpack 解析模块时应该搜索的目录。绝对路径和相对路径都能使用,但是要知道它们之间有一点差异。
extensions: ['.js', '.jsx', '.vue', '.md'],//自动解析的扩展
alias: {//创建 import 或 require 的别名,来确保模块引入变得更简单
vue$: 'vue/dist/vue.esm.js',
antd: path.join(__dirname, 'components'),
'ant-design-vue': path.join(__dirname, 'components'),
'@': path.join(__dirname, ''),
},
},
plugins: [new VueLoaderPlugin(), new WebpackBar()],//打包过程用到的插件,应该使用的额外的解析插件列表
};
因为有很多是插件的配置,为了让结构好理解,把配置的部分删除了,rules用到插件解析会后面单独篇幅。
引用的包
cheerio:cheerio是jquery核心功能的一个快速灵活而又简洁的实现,主要是为了用在服务器端需要对DOM进行操作的地方(参考文章:《cheerio中文文档》 《cheerio》)
highlight:代码高亮(参考文章:《highlight》)
markdown-it:一个辅助解析 markdown 的库(参考文章:《markdown-it》 《读 VuePress(三)使用 markdown-it 解析 markdown 代码》)
vue-antd-md-loader:基于markdown-it的解析插件
webpackbar:可视化打包进度条(参考文章:《webpackbar》)
在代码中index: [
./site/${process.env.ENTRY_INDEX || 'index'}.js],//入口文件
知道入口文件是在site文件夹下的index.js文件,下一篇来看site文件夹里的内容。
Ant Design Vue项目解析-前言的更多相关文章
- Ant Design Vue Pro 项目实战-项目初始化(一)
写在前面 时间真快,转眼又是新的一年.随着前后端技术的不断更新迭代,尤其是前端,在目前前后端分离开发模式这样的一个大环境下,交互性.兼容性等传统的开发模式已经显得有些吃力.之前一直用的是react,随 ...
- Ant Design Vue select下拉列表设置默认值
在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="query ...
- 基于Ant Design Vue封装一个表单控件
开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...
- Ant Design Pro项目打开页设为登录或者其他页面
Ant Design Pro项目打开页设为登录或者其他页面 一.打开页设为登录页 首先找到utils包中的authority文件,在该文件中找到如下代码: export function getAut ...
- 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换
使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...
- 使用npm安装 Ant Design Vue 时报错—ant-design-vue@latest(sha1-qsf / gCIFcRYxyGmOKgx7TmHf1z4 =)seems to be corrupted.
安装 Ant Design Vue 时报错: npm install ant-design-vue --save ant-design-vue @ latest(sha1-qsf / gCIFcRYx ...
- Vue3学习(二)之集成Ant Design Vue
一.集成Ant Design Vue npm install ant-design-vue@2.0.0-rc.3 --save 兼容性 Ant Design Vue 2.x 支持所有的现代浏览器. 如 ...
- Vue项目解析
各个文件夹 node_modules:用来放环境依赖 public:用来放公共资源,里面的index.html文件,就是初始的挂载点.被app.vue给取代了. src:放各种资源的. assets: ...
- Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
前言 写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值 简化了渲染的子组 ...
随机推荐
- 碰撞检測之OBB-OBB的SweepTest
提要 当物体在运动的时候.普通的每帧进行碰撞检測已经无法满足要求,比方子弹的运动 两帧的位置已经直接将中间的板子穿过了,所以 t 时刻和 t +1 时刻的检測都是失效的.这时候须要用到的就是sweep ...
- postgresql 导出建表语句的方法-类似describe table
https://www.youtube.com/watch?v=PMfcsYzj-9M 这个视频不错, The Definitive Guide to Object-Oriented JavaScr ...
- UVA 1482 - Playing With Stones(SG打表规律)
UVA 1482 - Playing With Stones 题目链接 题意:给定n堆石头,每次选一堆取至少一个.不超过一半的石子,最后不能取的输,问是否先手必胜 思路:数值非常大.无法直接递推sg函 ...
- svn简单介绍
版本号控制(Revision control)是维护project蓝图的标准做法,能追踪project蓝图从诞生一直到定案的过程.是一种记录若干文件内容变化.以便将来查阅特定版本号修订情况的系统. 能 ...
- Android eclipse 项目R文件无法生成
这个问题相信非常多人从网上已经搜到不少的解决方式. android 无法生成R文件 是件痛苦的事情.即使有时候你xml文件没有错误,他都无法生成. 针对此问题,我总结下面几个方面的原因. 一.xml本 ...
- underscore.js 页面数据渲染
1.underscore.js 源码 // Underscore.js 1.8.3 // http://underscorejs.org // (c) 2009-2015 Jeremy Ashken ...
- CSS3 animation(动画) 属性
一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...
- Oracle db中禁止使用sqlplus的方法
先记录下来: How to Disable a SQL*Plus Connection for a User (文档 ID 124121.1)
- BZOJ 3732 Network 最小瓶颈路
题目大意:给出一个无向边,非常多询问,问x,y两地之间的最长路最短是多少. 思路:乍一看好像是二分啊. 的确这个题二分能够做.可是时间会慢非常多,有的题直接就T掉(NOIP2013货车运输). 事实上 ...
- mysql关闭skip-grant-tables快速重置mysql密码
如果你忘记了mysql密码几乎是没有什么好办法可以直接修改密码了,但我们可以在my.ini把加上skip-grant-tables,然后重启mysql就不需要密码了,这时我们再修改root密码,最后再 ...