本文介绍了几种前端框架的使用。包括jeecgboot的JDictSelectTag字典下拉使用，Ant Design Vue 2.28和3的弹窗、下拉框等组件使用及datePicker踩坑，还讲述了React的安装、环境要求、项目创建，以及单页面HTML引用React和Ant Design时的报错与解决办法。
❤使用框架篇
1、jeecgboot 使用
❤ jeecgboot 使用
JDictSelectTag 字典下拉
JDictSelectTag 字典下拉去掉请选择
JDictSelectTag
2、❤ Ant Design Vue 2.28的使用
（1）弹窗
//按钮
<a-button type="primary" @click="showModal">Open Modal</a-button>
//窗口
<a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
<script lang="ts">
import { defineComponent, ref } from 'vue'; //引入
export default defineComponent({
setup() {
const visible = ref<boolean>(false); //定义窗口开关
//定义窗口事件
const showModal = () => {
visible.value = true;
};
//窗口事件
const handleOk = (e: MouseEvent) => {
console.log(e);
visible.value = false;
};
//返回数值
return {
visible,
showModal,
handleOk,
};
},
});
</script>
（2）下拉框
<a-select
ref="select"
v-model:value="value1"
style="width: 120px"
@focus="focus"
@change="handleChange">
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
<a-select-option value="disabled" disabled>Disabled</a-select-option>
<a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>
//数据
const options1 = ref<SelectTypes['options']>([
{
value: 'jack',
label: 'Jack',
},
{
value: 'lucy',
label: 'Lucy',
},
{
value: 'disabled',
label: 'Disabled',
disabled: true,
},
{
value: 'yiminghe',
label: 'Yiminghe',
},
]);
//方法
const focus = () => {
console.log('focus');
};
const handleChange = (value: string) => {
console.log(`selected ${value}`);
};
（3）按钮tooltip 提示
<div class="appBody">
<el-tooltip class="item" effect="dark" content="没有点击的权限" placement="top">
<el-button type="primary" disabled>同意</el-button>
</el-tooltip>
<el-button type="primary">驳回</el-button>
</div>
（4）ant-design-vue 3的使用
安装
yarn add ant-design-vue@3
引入和使用
// 引入ant-design-vue@3部分
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
app.use(Antd)
（5）datePicker使用
<template>
<div class="lintaibai compad20">
<a-space direction="vertical">
<a-date-picker v-model:value="value1" />
<a-date-picker v-model:value="value2"picker="month" />
<a-range-picker v-model:value="value3"/>
</a-space>
</div>
</template>
<script setup>
import {ref} from 'vue'
import { useRouter } from 'vue-router'
import dayjs, { Dayjs } from 'dayjs';
const dateFormat='YYYY-MM-DD';
const router = useRouter();
const value1 = ref(dayjs('2015-06-06', 'YYYY-MM-DD'));
const value2 = ref(dayjs('2015-06', 'YYYY-MM'));
const value3 = ref([
dayjs('2019-09-03', dateFormat),
dayjs('2019-11-22', dateFormat),
]);
</script>
最后的效果
踩坑 datePicker
dayjs实现了moment的大多数功能，Api基本一致，压缩后体积却不到2k，是优秀的替代方案
Ant-Design实现Date-Picker时使用了moment，所以在项目中不使用moment也不管用，一样会打包进来…
需要格外注意：
Ant-Design-Vue仍没有跟进.的问题
这个问题，在React版的Ant-Design又已经是做了处理的了，允许用户选择dayjs或moment。同样的，Ant-Design-Vue仍没有跟进…
3、React的安装和使用（原生和组件式create-react-app）
1、环境检测和准备
环境要求
要求：Node>=8.10 并且 npm>=5.6
建议：Node>=10.14.2，否则会报错：error babel-jest@26.6.3: The engine “node” is incompatible with this module. Expected version “>= 10.14.2”. Got “10.13.0”
查看本机器的node环境和npm环境
我本地直接用的比较新的
node -v //v20.11.0
npm -v. //10.2.4
2、React的安装和使用
主要安装react和react-dom这两个
npm i react react-dom
reactJs警告提示：
This version of tar is no longer supported, and will not receive security updates. Please upgrade asap
翻译：tar@2.2.2：此版本的tar不再受支持，将不会收到安全更新。请尽快升级。
简而言之：tar@2.2.2过期
运行：npm install -g tar
tar的版本更新到最新
检查React版本是否安装：
create-react-app -V
显示我的版本已经安装成功，猜测可能是安装成功再次安装给的提示！
3、创建项目并运行
1、 创建 react 项目
2、进入到项目里
cd my-app
3、安装 less 及 loader
yarn add -D less less-loader
4、将 webpack 配置暴露出来
yarn eject
5、打开 /config/webpack.config.js
全局搜索 style files regexes 找到如下代码位置
// style files regexes
const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
const sassRegex = /\.(scss|sass)$/
const sassModuleRegex = /\.module\.(scss|sass)$/
6、在这个代码的下边添加两行 less 的配置
// style files regexes
const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
const sassRegex = /\.(scss|sass)$/
const sassModuleRegex = /\.module\.(scss|sass)$/
const lessRegex = /\.less$/ // 新添加的
const lessModuleRegex = /\.module\.less$/ // 新添加的
7、全局搜索 test: sassModuleRegex，找到如下代码位置：
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
type: 'asset/resource',
},
9、添加 less 的 loader 就完成了
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
// ------------- 从这里往下都是添加的行
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
// ------------- 从这里往上都是添加的行
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
type: 'asset/resource',
},
10、配置结束
直接在项目里引入一个 less 文件，就可以正常的使用了
4、❤ 单页面HTML引用React 和 Ant Design使用
（1）引入React 和 Ant Design
第一步：引用React
第二步：引用antd和相关依赖库
第三步：使用antd组件,antd.components
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>antd</title>
<!-- 1 引用React -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 2 引用babel转化React-->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<!-- 3 引用moment React-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<!-- 4 引用antd-->
<script src="https://unpkg.com/antd@3.9.3/dist/antd.min.js"></script>
<link rel="https://unpkg.com/antd@3.9.3/dist/antd.min.css" />
</head>
<body>
<script type="text/babel">
ReactDOM.render(
<div>
Hello antd
<br/>
<antd.Button type="primary">Primary</antd.Button>
</div>,
document.getElementById("app")
)
</script>
<div id="app">
<antd.Button type="primary">Primary</antd.Button>
</div>
</body>
</html>
（2）引入生厂环境和开发环境cdn
// 适用于开发环境:
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
// 适用于生产环境:
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
// babel v6或稳定版
<!-- v6 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
（3）报错
报错：Uncaught TypeError: Wf(…) is not a function和Uncaught ReferenceError: antd is not defined
原因：antd有个依赖库moment.js没有被引入，所以antd对象不能生成。
解决：把moment.js引入即可，
扫一扫
64万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
