文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 本文章是以学习为主,练习一下vue的操作,可能存在一些不足,首先明确功能: 要有权限控制 存在会话记录 不使用第三方插件,从而自定义通用组件 在开始撸代码之前,先准备一下项目所需求的一些工具,俗话说:工欲善其事必先利其器. Mock.js 由于本文没有后台做支撑,那么问题来了,如何去模拟数据?难道打算一个个去写模拟的json数据…

无论是静态网页还是动态交互网页,实现原则是将他们分块,然后各个击破. 很明显的饿了么首页分为三个部分(组件), 上面的头部(商家信息), 中间路由 购物车 每部分先占住自己位置,然后挨个将这三部分分别实现完整. 我理解的vue里,index.html好比是车轱辘,main.js就好比是变速箱,App.vue就好比是汽车方向盘和档把子,其他各个组件就好比是方向盘上的喇叭,转向等等,一环扣一环的关系. 我们操作是方向盘,就是写App.vue里的各种组件.当然引入一些工具文件时候别忘了在main.js…

安装脚手架vue-cli npm install -g vue-cli 建立项目 vue init webpack sell(sell是项目名称) 进入项目目录 cd sell 可以看目录结构: ls ll -a 安装依赖 npm install 运行项目 npm run dev 项目都建立在src目录下,src目录下建文件夹 - 公共文件[common]- 公共文件下建3个文件夹:js.fonts.stylus stylus:是css预处理器,和Less.Sass功能差不多,但语法略有区别  …

1.vue cli给我们提供了npm run build命令打包项目,在packa.json文件中scripts对象中有build属性,当我们执行npm run build时,就执行build对应的"node build/build.js"脚本 build完成后显示 进入项目文件夹,找到dist文件夹,这些是打包后产生的文件 2.webpack打包过程中会将css和js文件单独提取出来,且会根据path存放进相应的文件夹下,形成如上图的根目录,文件名是根据内容产生的哈希值,文件内容改变…

1.flex 属性是 flex-grow.flex-shrink 和 flex-basis 属性的简写属性. flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量. flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量. flex-basis 项目的长度.合法值:"auto"."inherit" 或一个后跟 "%"."px"."em" 或任何其他长度单位的数字.…

1.数据传递的理解 在App.vue中用到了header组件,首先注册组件 components: { 'v-header': header } 然后才能引用 <v-header :seller="seller"></v-header> :seller="seller"的意思是将seller对象传递给v-header中的seller,而v-header中从哪里获得seller呢? 通过props从父组件中获得,且要指定数据类型 export…

1.页面骨架开发 1.1组件拆分 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分. <meta name="viewport" content="width=device-width,inital-scale=1.0, maximum-scale=1.0,user-scalab…

一.安装node 1-  点击这里进入node官网下载 2- 3- 下载完成是这样的 4-  双击打开进行安装,一路next,安装完成是这样 5-  打开cmd进入安装node的文件夹,输入node –v,回车,出现版本号说明node安装成功 二.vue-cli的安装 进入cmd找到刚才安装node的文件夹,输入npm install –g vue-cli安装vue-cli,此时安装的vue是2.x版本,如需安装3.x版本需先卸载2.x(通过npm uninstall vue-cli –g),再…

http://www.mtons.com/content/1819.htm http://www.tuicool.com/articles/F7BnaiY https://segmentfault.com/a/1190000007784366 http://www.tuicool.com/articles/7zUruij https://segmentfault.com/a/1190000008018314 moment组件 https://github.com/moment/moment/…

1.在重复使用的组件中,要把重复使用组件的需要在数据的请求的地方设置为在富组件中,通过props船只到子组件,这样在重复调用次组件的时候既可以很好的避免组件的值的冲突 2.getData的使用,把所有的axios请求都在getData中使用,然后在请求的action中进行引入然后进行数据的处理 mutation-type mutation-type是对mutation的使用,是对mutation方法的命名 在vscode中分子显示不全的问题 点击查看--->命令面板---->输入{{fetch…