ant-design-vue 2.X + VUE3.0 学习笔记

最新推荐文章于 2024-07-21 23:22:20 发布

liln0530

最新推荐文章于 2024-07-21 23:22:20 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术类文章标签： vue

本文链接：https://blog.csdn.net/liln0530/article/details/113667451

技术类专栏收录该内容

17 篇文章

订阅专栏

本文档详细介绍了如何使用Node.js和Vue CLI创建一个Vue3项目，并集成Ant Design Vue 2.0。在过程中遇到Ant Design Vue的版本问题，最终选择了2.0的RC版本。项目配置包括主要的组件、路由和样式，同时也展示了部分代码示例。此外，还分享了关于表格定制行事件的解决经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用nodejs创建vue工程，先创建一个空项目文件夹，然后按照这篇文章https://www.cnblogs.com/benyu-aimao/p/8944475.html，但是注意他是这么安装vue，npm install vue ，我们要用npm install -g @vue/cli，3.0之后的版本需要 node.js 版本大于 8.9

main.js

import { createApp } from 'vue';
import 'ant-design-vue/dist/antd.less';
import App from './App';
import router from './router'

const app = createApp(App);
app.config.productionTip = false;
app.use(Antd);
app.use(router);
app.mount('#app');

App.vue

<template>  
  <a-config-provider :locale="locale">    
    <a-layout id="components-layout-demo-fixed-sider">
    <a-layout-sider :width="300" :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
      <home/>
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '301px'}">
      <!-- <a-layout-header :style="{ background: '#fff', padding: 0 }" /> -->
      <a-layout-content :style="{ overflow: 'initial' }">
        <router-view :key="$route.fullPath"></router-view><!-- :key 解决同一份组件在多个路由中使用不刷新的问题 -->
      </a-layout-content>
      <!-- <a-layout-footer :style="{ textAlign: 'center', height:'20px' }">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer> -->
    </a-layout>
  </a-layout>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import home from './components/home.vue' 
import 'moment/dist/locale/zh-cn';

export default {
  name: 'App',
  components: {
    home,
  },
  mounted: function() {
      /*var user = common.GetUser();
      console.log(user);
      if(user == "")
        window.location.href="https://wwww.baidu.com";//跳转到登录页面*/
        
  },
  data() {
    return {
      locale: zhCN,
      zhCN,
    };
  },
}
</script>

<style>
#app {
  font-family: Noto Sans CJK Regular, Arial, OPPOSans R;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  /* color: #2c3e50; */
  color: #2c3e50;
  background-color: rgb(255, 255, 255);
  margin: 0px;
  font-size: 14px;
}
.ant-layout-content{
  background-color: rgb(255, 255, 255);
}
.ant-table-tbody > tr > td {
  padding: 13px;
  white-space: nowrap;
}
.ant-table-tbody > tr > th {
  padding: 13px;
}
.ant-table-thead > tr > th {
  padding: 13px;
  text-align: center;
  white-space: nowrap;
}
.ant-table-pagination.ant-pagination {
  margin: 20px 0px
}
.ant-table table {
  text-align: center;
}

.light-row {background-color: white;}

.dark-row {background-color: #fafafa;}

.ant-table-body {
      overflow-x: auto !important;
}

</style>

最主要的环境，vue3 + antd 2.0rc9

这里特别主要我原来用的是2.0bate11,发现table的customRow有个单机事件无法实现，网上大多都是2.0，没找见3.0所以自己试，最后修改为2.0bate15之后就能起作用，所以干脆就上最新版本

{
  "name": "vue3-antd",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "ant-design-vue": "2.0.0-rc.9",
    "axios": "^0.20.0",
    "core-js": "^3.6.5",
    "less": "^3.12.2",
    "less-loader": "^7.1.0",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-rc.2",
    "vuex": "^4.0.0-rc.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "keywords": [],
  "description": ""
}