1.结局yarn 禁用问题
powershell windows:
以管理员身份运行执行:
set-ExecutionPolicy RemoteSigned
输入:y
2. 设置yarn 淘宝mirror:
npm config set registry https://registry.npm.taobao.org
其次需要对node-sass镜像源进行设置
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
最后:
yarn add ant-design-vue
安装babel-plugin-import:
yarn add babel-plugin-import
配置babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
]
}
App引入 组件挂载:
<template> <!-- <img alt="Vue logo" src="./assets/logo.png"> --> <HomePage /> </template> <script> import HomeNav from '@/components/HomeNav.vue' export default { name: 'App', components: { HomeNav } } </script>
components:
src/router 新建:
yarn add vue-router
layout 布局:
App.vue
<template> <router-view></router-view> </template> <script> // import HomeNav from '@/components/HomeNav.vue' export default { name: 'App', components: { } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: left; color: #2c5038; height: 100%; 100%; } </style>
路由routers/index.js:
import { createRouter, createWebHashHistory } from "vue-router" const LayoutHome = () => import("@/components/LayoutHome.vue") const OrderTable = () => import("@/components/TableDemo.vue") const routes = [ { path: "/", redirect: "/index" , name:"/"}, { path: "/index", name: "index", component: LayoutHome, children:[ { path: "/order", name: "order", component: OrderTable } ] } ] const router = createRouter({ history: createWebHashHistory(), routes: routes }) export default router ;
layouts布局:
header 、slider、content,核心关注router-view:
<template> <a-layout class='lay'> <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible style="height:100%" > <div class="logo" /> <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline"> <a-menu-item key="1"> <user-outlined /> <router-link to="/order"> <span>销售</span> </router-link> </a-menu-item> <a-menu-item key="2"> <video-camera-outlined /> <span>仓库</span> </a-menu-item> <a-menu-item key="3"> <upload-outlined /> <span>统计</span> </a-menu-item> </a-menu> </a-layout-sider> <a-layout> <a-layout-header style="background: #fff; padding: 0 "> <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" /> <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" /> </a-layout-header> <a-layout-content class="content-class"> <router-view></router-view> </a-layout-content> </a-layout> </a-layout> </template> <script> import { UserOutlined, VideoCameraOutlined, UploadOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'; import { defineComponent, ref } from 'vue'; export default defineComponent({ components: { UserOutlined, VideoCameraOutlined, UploadOutlined, MenuUnfoldOutlined, MenuFoldOutlined }, setup() { return { selectedKeys: ref(['1']), collapsed: ref(false), }; }, }); </script> <style lang="less"> #components-layout-demo-custom-trigger .trigger { font-size: 18px; line-height: 64px; padding: 0 24px; cursor: pointer; transition: color 0.3s; } #components-layout-demo-custom-trigger .trigger:hover { color: #1890ff; } #components-layout-demo-custom-trigger .logo { height: 32px; background: rgba(255, 255, 255, 0.3); margin: 16px; } .site-layout .site-layout-background { background: #fff; } .lay{ 100%; height: 100%; } </style>
效果: