vue简单使用

安装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>