nodejs(9): 使用vue + ant design 开发后台admin项目
前言
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
- vue-admin-pro使用vue开发的中后台管理解决方案ant desgn pro设计风格
- nodejs(13):使用 ant-design-pro-vue 修改配置文件打包 ,去掉sourceMap,保证代码安全
- vue,vuex的后台管理项目架子structure-admin,后端服务nodejs,前端vue页面
- 使用Nodejs开发微信公众号后台服务实例
- 使用 NodeJs 实现一个本地接口数据系统,无需数据库,让前端独立于后台开发
- 使用nodejs开发cli项目实例
- 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)
- 一个完整的包含server,admin,client,其中server使用express搭建,admin和client基于vue开发。
- 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
- vue2.0项目后台管理中使用ueditor富文本编辑器
- 在你的新项目中局部使用Vue来提升开发效率
- 使用Nodejs+Yeoman定制前端开发项目构建工具
- java后台开发例子--使用Maven建立springmvc的web项目
- php设置报错级别,项目后台使用YII框架开发
- 使用vue开发项目需要注意的问题和可能踩到的坑
- flask项目结构(六)快速开发后台flask-admin
- 使用@vue/cli搭建vue项目开发环境
- 使用ANT协助开发java项目
- windows下关于使用eclipse开发web服务器后台项目完整配置(jsp+javabean+servlet)
- 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用