vue3 入门ant-vue

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%;
  width: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{
    width:100%;
    height: 100%;
}

</style>

　

效果：