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

使用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

ant-design-vue 2.X + VUE3.0 学习笔记_第1张图片

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






最主要的环境,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": ""
}

 

你可能感兴趣的:(技术类,vue)