TODO:搭建Laravel VueJS SemanticUI

TODO:搭建Laravel VueJS SemanticUI

图片 1

Laravel是一套简洁、优雅的PHP开发框架(PHP Web
Framework)。可以让您从面条一样纷纷扬扬的代码中抽身出来;它可以帮您构建一个两全的网络APP,而且每行代码都得以简单、富于表明力。

VueJS是一款渐进式JavaScript框架,有着易用,灵活,高效的有些。简单小巧的中坚,渐进式技术栈,足以应付任何规模的运用。

SematicUI 是截然语义化的前端界面开发框架,跟 Bootstrap 和 Foundation
比起来,如故多少不同的,在效用特色上、布局规划上、用户体验上均设有很多差异。易于学习和利用,对于社区进献来说是相比开放的。有一个十分好的按钮实现,情态动词,和进度条。在成千上万效益上接纳图标字体。

  1. 创建Laravel项目

composer create-project laravel/laravel 项目名称,网速有点慢要小等

图片 2

  1. 运作npm install安装nodejs对应的包

3.
安排bower,bower是吗?Bower是一个客户端技术的软件包管理器,它可用以搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。在此地关键用来管理html5shiv,semantic。需要添加多个布局bower.json管理要用的js包,还有一个布局文件.bowerrc用于管理转变的文本夹路径。安装方式很简单npm直接能够安装(npm
install bower);项目设置bower配置的网络资源,则运行bower install。

4.
依靠与nodejs的条件,安装那多少个工具都很便捷。Laravel自动gulp构建工具的配置文件,执行安装好gulp,即可使用gulp举办构建项目,万分有利。

  1. 做客出现

图片 3

翻开日志

图片 4

拷贝.env文件再一次履行php artisan key:generate生成APP_KEY

  1. 默认laravel已经自带集成vuejs

图片 5

接下去把这多少个Example突显在页面上

在welcome.blade.php参与以下代码

图片 6

图片 7

推行gulp自动构建编译代码

图片 8

启航服务走访首页即可看到example组件

图片 9

  1. 引入semantic-ui,在Example.vue加入semantic对应的class

图片 10

在首页也引入semantic.css

做客后的效用如图

图片 11

到此一个简便的Laravel+VueJS+Semantic-UI的购并开发条件搭建成功了,有趣味的爱人可以尝试


wxgzh:ludong86

图片 12

相关文章