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引入 组件挂载：

components:

src/router 新建：

yarn add  vue-router

layout 布局：

App.vue

路由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:

效果：