学习黑马vue

项目分析

项目下载地址:vue-admin-template-master: 学习黑马vue

项目下载后没有环境可参考我的篇文章,算是比较详细:vue安装与配置-CSDN博客

安装这两个插件可格式化代码,vscode这个软件是免费的,官网: Visual Studio Code - Code Editing. Redefined

视频学习地址:Day1-02.拉取基础模板_哔哩哔哩_bilibili 

学习黑马vue_第1张图片

学习黑马vue_第2张图片

项目启动成功后长这个样子:

学习黑马vue_第3张图片

项目目录,当拿到一个vue项目时,先看src下的文件代码

学习黑马vue_第4张图片

项目布局

学习黑马vue_第5张图片

学习黑马vue_第6张图片

布局组件

学习黑马vue_第7张图片

学习黑马vue_第8张图片

学习黑马vue_第9张图片

学习黑马vue_第10张图片

setting.js解析

学习黑马vue_第11张图片

false

学习黑马vue_第12张图片

学习黑马vue_第13张图片

true

学习黑马vue_第14张图片

permission.js

VUEX

学习黑马vue_第15张图片

侧边栏显示隐藏控制

学习黑马vue_第16张图片

学习黑马vue_第17张图片

 学习黑马vue_第18张图片

摸版中vuex的设计思想

  • 页面交互状态(折叠侧边栏-固定头部)使用全局状态Vuex
  • 根据功能拆分成不同的模块(modules)进行状态管理
  • 通过getters建立对于模块中属性的快捷访问

使用摸版中的icon图标

学习黑马vue_第19张图片

学习黑马vue_第20张图片

学习黑马vue_第21张图片 学习黑马vue_第22张图片

学习黑马vue_第23张图片

摸版图标实现思路

学习黑马vue_第24张图片

学习黑马vue_第25张图片

图标怎么运用到界面的?

学习黑马vue_第26张图片

学习黑马vue_第27张图片

学习黑马vue_第28张图片

 学习黑马vue_第29张图片

你可能感兴趣的:(vue.js,学习,javascript)