您的位置:首页 > Web前端 > Vue.js

nodejs(9): 使用vue + ant design 开发后台admin项目

2019-02-22 16:41 1061 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。博主地址:http://blog.csdn.net/freewebsys https://blog.csdn.net/freewebsys/article/details/87879235

前言

NodeJS 分类: https://blog.csdn.net/freewebsys/article/category/6904116

本文的原文连接是: https://blog.csdn.net/freewebsys/article/details/87879235
未经博主允许不得转载。
博主地址是:http://blog.csdn.net/freewebsys

1,关于

人家 ant design 之前是支持 react 的,现在 vue 火了,也支持vue js 了。
https://ant-design-vue.gitee.io/docs/vue/getting-started-cn/
安装文档一步一步开发就行:

npm install -g @vue/cli
vue create antd-demo
npm i --save ant-design-vue

这使用的 vue-cli 3.0 的版本了。所以启动命令变了:

npm run serve

修改index.js:

import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false
Vue.use(Antd)
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})

2,使用

写一个 hello word 比较麻烦呢,现在流行使用 ant-design-pro 进行项目开发。
https://pro.ant.design/index-cn
直接就是一个做好的 ant-desing 工程,然后下载了直接使用。
git地址:
https://github.com/ant-design/ant-design-pro/
预览地址:
https://preview.pro.ant.design/dashboard/analysis

3,ant-design-pro-vue

https://github.com/sendya/ant-design-pro-vue
克隆下载代码之后进入项目:

cd ant-design-pro-vue
npm install
npm run serve

然后进入登录页面:用户名admin,密码1

登录完成之后:

代码啥的都是写好了。优化好了的。需要咋改就咋改。
比如:

4,总结

ant design pro vue 非常好,可以直接开箱使用了。然后根据做自己的业务删除点没有用的东西。
做个后台系统,报表系统够用了。

本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/87879235

博主地址是:http://blog.csdn.net/freewebsys

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: