vue-admin-template 本人项目地址

这是一个 极简的 vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint,这些搭建后台必要的东西。

https://github.com/Tkwkrystal/vue-admin-template

项目截图

登录
dashboard
table

vue.js官网:

https://cn.vuejs.org

vue-admin-template:

https://panjiachen.github.io/vue-element-admin-site/#/

vue调试:

chrome插件vue Devtools

UI 组件库:

移动UI 组件库:

  • mint
  • iview
  • vonic

app:

Weex 是阿里的跨平台用户界面开发框架,Weex 的 JavaScript 框架运行时用的就是 Vue。在此之后,在 Weex 的帮助下,使用 Vue 语法开发的组件不仅仅可以运行在浏览器端,还能被用于开发 iOS 和 Android 上的原生应用。

vue中less:

npm安装less-loader插件

总结:

vue + vuex+ axios + vue-router + webpack + es6 + less

安装路由模块

  • npm install vue-router --save-dev
  • npm install vue-resource --save-dev(http请求)

json接口

jsonplaceholder.typicode.com(提供一些常用的接口)

mock

七牛云:

融合cdn 域名 内容管理
gif动图七牛云地址:
http://pbn1z3d57.bkt.clouddn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif
(我自己的地址,现在不介意用七牛云,原因:现在给的测试域名只有一个月的试用时间!!!所以我改用阿里的,免费还功能强大)

阿里云对象存储(图片)

https://oss.console.aliyun.com/bucket/oss-cn-shenzhen/vue-admin-template/object
(图像处理-访问管理 在图片url后+‘-logingif’)

调试工具 vue-devtools

  • 最简单的:chrome扩展工具应用商店下载,然后
  • C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\4.1.5_0
  • manifest文件中:“persistent”: false, 改为true

vue-echarts

http://npm.taobao.org/package/vue-echarts-v3
github:https://github.com/xlsdg/vue-echarts-v3-demo

注意事项:

  1. 空格和注释报错:build-webpack.base.conf.js中:const createLintingRule = () => ({})内容注释饥即可
  2. 接口业务流程:e.g:views/login/index.vue绑定方法---->store/modules/user.js中actions---->api/login.js

webpack

执行脚本的命令有点麻烦,因此,我们可以利用 npm,把命令写在 package.json 中:

"scripts": {
	"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
	"start": "npm run dev",
	"build": "node build/build.js",
	"build:report": "npm_config_report=true npm run build",
	"lint": "eslint --ext .js,.vue src",
	"test": "npm run lint",
	"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
},

基础知识网站:https://github.com/wallstreetcn/webpack-and-spa-guide

进阶:https://juejin.im/post/5b56909a518825195f499806

build && config 文件夹说明

https://www.cnblogs.com/caideyipi/p/8496656.html

vue-route

https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

Logo

前往低代码交流专区

更多推荐