Ant Design Vue使用记录

最新推荐文章于 2022-03-02 09:23:12 发布

_翔

最新推荐文章于 2022-03-02 09:23:12 发布

阅读量321

点赞数

本文链接：https://blog.csdn.net/qq_23838217/article/details/102816266

版权

本文详细记录了使用Ant Design Vue进行项目开发的过程，包括环境搭建、使用vue-router打开指定页面、Vue操作DOM以及Ant Design Vue的增删改查实例。通过示例代码，展示了如何配置路由、操作DOM元素以及使用Ant Design Vue组件实现表格的增删改查功能。

摘要由CSDN通过智能技术生成

------------------------------------------------------------------------------------
-
-
1.ant-design-vue 环境搭建
------------------------------------------------------------------------------------
1.首先需搭建vue环境
可参考https://www.jianshu.com/p/0c6678671635
2.安装环境（根据官网）
npm install -g @vue/cli （建议国内不使用npm安装，使用cnpm这样会快点）cnpm install -g @vue/cli
3.新建一个项目
切换到需要创建项目文件夹下，运行创建项目命令
vue create antd-demo
4.进入项目并启动
cd antd-demo
npm run serve

------------------------------------------------------------------------------------
-
-
2.用vue-ant ruter打开指定VUE页面
------------------------------------------------------------------------------------
1.新建Test.vue页面，内容如下：
<template>
<div>
测试Text
</div>
</template>

2.main.js代码：
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import test from './components/Test.vue'

Vue.config.productionTip = false
Vue.use(VueRouter);

let router1 = new VueRouter({
routes: [
{ path: '/aaa', component: test }
]
});

new Vue({
router: router1,
render: h => h(App),
}).$mount('#app')

3.App.vue代码：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>

4. URL访问：http://localhost:8080/#/aaa

------------------------------------------------------------------------------------
-
-
3.VUE Dom
------------------------------------------------------------------------------------
vue1.*版本中

在标签中加上el='dom'，然后在代码中this.$els.dom这样就拿到了页面元素

例如：<div class='box' el='myBox'>你好</div>

让你好的颜色显示为红色：this.$els.myBox.style.color = 'red'

vue2.*版本中

在标签中加上ref='dom'，然后在代码中this.$refs.dom这样就拿到了页面元素

例如：<div class='box' ref='myBox'>你好</div>

让你好的颜色显示为红色：this.$refs.myBox.style.color = 'red'

--------------------------------------------------

注：

可以用 $nextTick 来确保 Dom 变化后再执行一些事情例：

<ul ref="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

this.$nextTick( () => {
this.$refs.nav.children[0].style.color = 'red';
})

--------------------------------------------------