.layout-con{height:100%;宽度：100%；}.menu-itemspan{显示：内联块；溢出：隐藏；宽度：69px；文本溢出：省略号；空白：nowrap；垂直对齐：底部；过渡：宽度.2s缓和.2s；}.menu-itemi{转换：translateX(0px);transition:font-size.2sease,transform.2sease;垂直对齐：中间；字体大小：16px；}.collapsed-menuspan{宽度：0px；菜单i{转换：translateX(5px);过渡：字体-size.2sease.2s,transform.2sease.2s;垂直对齐：中间；字体大小：22px；}简介代码地址laravel-vue-iview的github仓库点这里，仓库已经更新到laravel7，本文暂未更新。注：本文只是将vue集成到Laravel项目中，没有添加前后端权限控制，所以只适合新手学习这两个技术栈和相关的iview、vue-router等。Laravel创建一个项目。Laravel最新版本是5.6，但是5.5是长期支持版本，所以这里还是用5.5#blog是项目名，可以修改composercreate-project--prefer-distlaravel/laravelblog》5.5.*”运行项目进入新建的项目，执行phpartisanserve，访问127.0.0.1:8000Vue扩展包package.json配置刚接触Vue的同学，通常会迷茫安装什么扩展包。以下是Laravelpackage.json中默认的扩展包："devDependencies":{"axios":"^0.17","bootstrap-sass":"^3.3.7","cross-env":"^5.1","jquery":"^3.2","laravel-mix":"^1.0","lodash":"^4.17.4","vue":"^2.5.7"}bootstrap-sass提供bootstrap编写sass支持，因为我们要使用iview所以这个扩展可以删掉。与Vue直接相关的是vue和axios（网络请求工具）。如果开发中大型项目，vue-router（路由管理工具）和vuex（状态管理工具）也是必不可少的。还有其他常用的扩展，比如支持cookie操作的js-cookie，支持多语言开发的vue-i18n，支持Sass语法的node-sass等。本项目前端使用iview框架，加上这些常用的扩展package.json:"devDependencies":{"axios":"^0.17","cross-env":"^5.1","jquery":"^3.2","laravel-mix":"^2.0","lodash":"^4.17.4","node-sass":"^4.7.2","vue":"^2.5.7"},"dependencies":{"css-loader":"^0.28.9","iview":"^2.9.2","js-cookie":"^2.2.0","less":"^3.0.0","less-loader":"^4.0.5","particles.js":"^2.0.0","vue-i18n":"^7.4.2","vue-router":"^3.0.1","vuex":"^3.0.1"}cssloader，less解析工具，粒子前端动画等也加入了，不需要的可以自行删除。要安装扩展包，将上面的配置直接粘贴到你的package.json文件中，然后执行cnpminstall或yarninstall。如果没有cnpm，需要设置淘宝镜像。npm下载国外的镜像，比较慢，可能会下载失败。#设置淘宝镜像命令npminstall-gcnpm--registry=https://registry.npm.taobao.org如果想单独安装扩展，可以执行命令如下：cnpminstallvue-router--保存前端结构构建vue前端文件结构在/recources/assets/js目录下。Vue主要可以渲染两个操作。Vue挂载到页面的节点上。Vue-router处理路由并渲染相应的组件。1、新建一个html文件，在resource/views.php新建一个index.blade，代码如下laravel-vue-iview项目
