安装vue脚手架
npm install -g @vue/cli
# OR
yarn global add @vue/cli
创建项目
vue create 项目名称
cd 项目名称 # 进入项目
npm run serve # 启动项目
选择创建的方式,Manually select features配置完后,直接执行
解决控制台报警告
在vue.config.js文件中添加代码重启服务,不重启不生效
const {defineConfig} = require('@vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
# 下列代码可以解决问题
chainWebpack: (config) => {
config.plugin('define').tap((definitions) => {
Object.assign(definitions[0], {
__VUE_OPTIONS_API__: 'true',
__VUE_PROD_DEVTOOLS__: 'false',
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
});
return definitions
})
}
});
如果还有警告在main.js中加上对应的代码
import {createApp} from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import Antd from 'ant-design-vue';
import settings from "@/settings";
import 'ant-design-vue/dist/reset.css';
const app = createApp(App);
app.use(store).use(router).use(Antd).mount('#app');
app.config.globalProperties.$settings = settings;
// 屏蔽错误信息
app.config.errorHandler = () => null;
// 屏蔽黄色警告信息
app.config.warnHandler = () => null;
// 用于去掉eazyplayer警告,开发时禁用,打包开启
app.config.warnHandler = (msg, instance, trace) => {
}
===============组合前端框架===========================================
import './assets/main.css';
import {createApp} from 'vue';
import {message} from 'ant-design-vue';
// import { Button } from 'ant-design-vue';
// 导入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 导入bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// 导入layui
import Layui from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'
// 导入Antd
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css';
// 引入图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import * as IconsOutlined from "@ant-design/icons-vue";
// 导入路由
import router from './router/router'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.use(Layui)
app.use(Antd)
app.use(router)
app.mount('#app')
app.config.productionTip = false;
app.config.globalProperties.$message = message;
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
// 判断该组件是否被注册过,如注册则跳过注册,不然控制台会报警告,强迫证
if (!app.component(key)) {
app.component(key, component);
}
}
for (const [key, component] of Object.entries(IconsOutlined)) {
if (!app.component(key)) {
app.component(key, component);
}
}
导入ant-design-vue报错找不到ant-design-vue/dist/antd.css文件,只需修改antd为reset,
import 'ant-design-vue/dist/reset.css';
main.js配置
import './assets/main.css';
import { createApp } from 'vue';
import { Button, message } from 'ant-design-vue';
// 导入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 导入bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// 导入layui
import Layui from '@layui/layui-vue'
import '@layui/layui-vue/lib/index.css'
// 导入Antd
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css';
// 导入路由
import router from './router/router'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.use(Layui)
app.use(Antd)
app.use(router)
app.use(Button)
app.mount('#app')
app.config.productionTip = false;
app.config.globalProperties.$message = message;
router.js路由配置,创建vue时没有路由相关配置,可以手动创建
import { createRouter,createWebHistory } from "vue-router";
import base from "@/components/base.vue";
// import base from '../components/base.vue'; //两种都可以用
const router = createRouter({
history:createWebHistory(),
routes:[
{
path:'/',
component:base,
children:[
//子路由
]
}
]
})
export default router;
一个简单的vue页面,结合了layui-vue和ant-design-vue、element-plus
<template>
<a-layout style="min-height: 100vh">
<a-layout-sider v-model:collapsed="collapsed" collapsible>
<div class="logo" />
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
<a-menu-item key="1">
<pie-chart-outlined />
<span>Option 1</span>
</a-menu-item>
<a-menu-item key="2">
<desktop-outlined />
<span>Option 2</span>
</a-menu-item>
<a-sub-menu key="sub1">
<template #title>
<span>
<user-outlined />
<span>User</span>
</span>
</template>
<a-menu-item key="3">Tom</a-menu-item>
<a-menu-item key="4">Bill</a-menu-item>
<a-menu-item key="5">Alex</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #title>
<span>
<team-outlined />
<span>Team</span>
</span>
</template>
<a-menu-item key="6">Team 1</a-menu-item>
<a-menu-item key="8">Team 2</a-menu-item>
</a-sub-menu>
<a-menu-item key="9">
<file-outlined />
<span>File</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-header style="background: #fff; padding: 0" >
<div aria-label="A complete example of page header">
<el-page-header @back="onBack">
<template #breadcrumb>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: './page-header.html' }">
homepage
</el-breadcrumb-item>
<el-breadcrumb-item>
<a href="./page-header.html">route 1</a>
</el-breadcrumb-item>
<el-breadcrumb-item>route 2</el-breadcrumb-item>
</el-breadcrumb>
</template>
<template #content>
<div class="flex items-center">
<el-avatar
class="mr-3"
:size="32"
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
/>
<span class="text-large font-600 mr-3"> Title </span>
<span
class="text-sm mr-2"
style="color: var(--el-text-color-regular)"
>
Sub title
</span>
<el-tag>Default</el-tag>
</div>
</template>
<template #extra>
<div class="flex items-center">
<el-button>Print</el-button>
<el-button type="primary" class="ml-2">Edit</el-button>
</div>
</template>
</el-page-header>
</div>
</a-layout-header>
<a-layout-content style="margin: 0 16px">
<a-breadcrumb style="margin: 16px 0">
<a-breadcrumb-item>面包屑</a-breadcrumb-item>
<a-breadcrumb-item>Bill</a-breadcrumb-item>
</a-breadcrumb>
<div style="{ 'padding': '24px', 'background': '#fff', 'minHeight': '360px' }">
内容模板
</div>
</a-layout-content>
<a-layout-footer style="text-align: center">
Ant Design ©2018 Created by Ant UED
</a-layout-footer>
</a-layout>
</a-layout>
</template>
<style>
#components-layout-demo-side .logo {
height: 32px;
margin: 16px;
background: rgba(255, 255, 255, 0.3);
}
.site-layout .site-layout-background {
background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
background: #141414;
}
</style>
<script lang="ts" setup>
import { ref } from 'vue';
import {
PieChartOutlined,
DesktopOutlined,
UserOutlined,
TeamOutlined,
FileOutlined,
} from '@ant-design/icons-vue';
const collapsed = ref<boolean>(false);
const selectedKeys = ref<string[]>(['1']);
</script>
解决图标和文本对不齐的方式
1、通过 CSS 调整图标或文字的 vertical-align 属性来使它们对齐。例如,如果图标相对于文字偏上,你可以给图标添加 vertical-align: middle; 或 vertical-align: text-bottom;
2、使用 Flexbox:将图标和文字放在一个使用 Flexbox 布局的容器中,这样你可以更容易地控制它们的对齐方式。
3、调整行高:有时候调整 的 line-height 也可以帮助对齐,方式有许多,看自己喜欢那种
我喜欢使用:Flexbox
<div style="display: flex; align-items: center;">
<file-outlined/>
<span>菜单5</span>
</div>