TODO:搭建Laravel VueJS SemanticUI

Laravel是一套简洁、优雅的PHP开发框架(PHP Web Framework)。可以让你从面条一样杂乱的代码中解脱出来;它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁、富于表达力。

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

SematicUI 是完全语义化的前端界面开发框架,跟 Bootstrap 和 Foundation 比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。易于学习和使用,对于社区贡献来说是比较开放的。有一个非常好的按钮实现,情态动词,和进度条。在许多功能上使用图标字体。

1. 创建Laravel项目

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

2. 运行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进行构建项目,非常方便。

5. 访问出现

查看日志

拷贝.env文件重新执行php artisan key:generate生成APP_KEY

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

接下来把这个Example显示在页面上

在welcome.blade.php加入以下代码

执行gulp自动构建编译代码

启动服务访问首页即可看到example组件

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

在首页也引入semantic.css

访问后的效果如图

到此一个简单的Laravel+VueJS+Semantic-UI的集成开发环境搭建成功了,有兴趣的朋友可以试试



wxgzh:ludong86

时间: 2024-10-16 21:18:52

TODO:搭建Laravel VueJS SemanticUI的相关文章

阿里云centos7.2 搭建 laravel 框架走过的坑

centos7.2 搭建 laravel框架走过的坑 前言 公司正在处于发展阶段最近开发的伙伴和运维的伙伴一直在忙碌着 开发人员一直在写laravel架构的代码以及新项目的拓展,时间很赶所以作为linux运维的我也不能怠慢. 首先搭建lnmp架构 nginx php 我选择的yum,wget的安装方法 mysql选择编译安装 因为我只认为MySQL我还有编译安装的需要(熟悉熟悉). 准备 : 1.PHP 7版本  2.openssl(yum安装)3.pdo扩展 mysql 4.安装compose

Mac系统搭建Laravel框架环境及遇到的问题

相信很多朋友都在学习和使用Laravel框架,作为当前最受欢迎的PHP框架,自然有其魅力所在.废话不多说,进入我们的实际步骤. 欲要工其事,必先利其器.首先我们需要所需的工具和材料.VirtualBox . vagrant .Box镜像文件.VirtualBox 是一个虚拟机软件,vagrant是一个虚拟机管理工具. 安装VirtualBoxVirtualBox下载地址 免费小巧非常适用,根据自己机器系统选择下载包(本人使用VirtualBox 6.0.0   OS X hosts) 安装vag

TODO:Laravel 内置简单登录

1. 激活Laravel的Auth系统Laravel 利用 PHP 的新特性 trait 内置了非常完善好用的简单用户登录注册功能,适合一些不需要复杂用户权限管理的系统,例如公司内部用的简单管理系统.运行以下命令: php artisan make:auth 运行成功显示 Authentication scaffolding generated successfully. 2. 在路由代码里面加入了 Auth::routes() 主要实现权限的登录.用户注册.用户退出登录访问http://127

搭建Laravel项目集成开发环境简明教程

phpRE+Composer+PhpStorm+Laravel安装与配置 既然人生苦短,我们还是尽量不要浪费大家的宝贵时光.你可能体验了"著名的WordPress五分钟建站",下面你即将体验到的是从没有搭建PHP运行开发环境phpRE的干净计算机上(当然搭建了也无妨)"5分钟一键安装创建Laravel项目".先在官网下载phpRE完整一键安装包phpRE_setup.exe,再"下一步下一步傻瓜安装"成功后,在浏览器地址栏输入本地虚拟主机就见到&

iBrand 教程 0.1:Windows + Homestead 5 搭建 Laravel 开发环境

统一开发环境 为了保证在学习和工作过程中避免因为开发环境不一致而导致各种各样的问题,Laravel 官方为了我们提供了一个完美的开发环境 Laravel Homestead,让我们无需再本地安装 PHP,web 服务器或任何服务软件. Homestead 可以在任何 Windows.Mac 或 Linux 系统上运行,它包括了 Nginx Web 服务器.PHP 7.1.MySQL.PostgresSQL.Redis.Memcached.Node 以及开发 laravel 应用所需的东西. Ho

宝塔搭建laravel所需要的lnmp环境linux-nginx-mysql-php-composer-git

示例是使用 CentOS 7.4 哈:如果还没有服务器建议购买阿里云的或者是腾讯云的:这台服务器需要是未安装过 php 的环境:如果服务器已经被折腾过一番:建议备份下数据后重装下环境:阿里云和腾讯云都有重装系统的选项: 一般应用于生产环境的的服务器都是安装的不带桌面的版本 linux 系统:面对着黑乎乎的命令行窗口:对于不熟悉服务器的童鞋来说:搭建 LNMP 环境来说是一件比较折腾的事:即便是稍微熟悉点的童鞋管理服务器也会觉得繁琐:这时候如果可以通过界面代替命令行来操作服务器那想必是极好的:宝塔

TODO:Laravel 使用blade标签布局页面

本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop,@push.使代码精简.提高页面下载速度.表现和内容相分离.站在开发者的角度看,web页面都可以提取相同的内容进行分离,让每个页面代码尽显主题内容,简洁明快,干扰信息少. 1. Laravel的blade标签代码格式是"命名.blade.php",这样是不是很简洁. 2. 创建统一布局风格的代码模板main.blade.php,使用HTML5

使用docker搭建laravel记叙

第一步,先从dockerhub上pull一个docker镜 1 docker pull laraedit/laraedit 这个docker镜像已经安装了 nginx.laravel和mysql,所以不需要自己再去安装,先创建一个文件夹 1 mkdir /usr/local/laravel 直接运行一个容器 docker run -it --name laravel -p 8088:80 -p:3306:3306 -v /usr/local/laravel:/var/www/html/app l

腾讯云centos7 从零搭建laravel项目

网页原创链接:https://www.cnblogs.com/lalaza/p/11258929.html 目标,访问网站出现: -----------------------分割线---------------------------------------- 一.Laravel Homestead 环境安装(腾讯云不支持!) 试了各种方法,一直报错,最后在旧版腾讯云贴吧里面找到官方解答 内心各种曹尼玛啊啊啊啊啊! 二.测试环境长期关闭 防火墙&SELinux //关闭 systemctl s