TODO：搭建Laravel VueJS SemanticUI

最新推荐文章于 2021-02-18 14:14:46 发布
最新推荐文章于 2021-02-18 14:14:46 发布
阅读量591 收藏
点赞数
分类专栏： 科技 文章标签： Laravel VueJS Semantic-UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36342775/article/details/53700833
版权

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

qrcode_for_gh_6bb1f39ae99c_258-1

OneTODO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Laravel开发-laravel-vue-semantic-ui
08-28
Laravel开发-laravel-vue-semantic-ui Laravel 5 Starter语义用户界面vue2
semantic-ui_与Laravel和Semantic-UI一起使用的VueJS 2.x分页
cuk5239的博客
07-22 197
semantic-ui Laravel Vue语义UI分页 (Laravel Vue Semantic-UI Pagination) A Vue.js pagination component for Laravel paginators that works with Semantic-UI. 一个适用于Laravel分页器的Vue.js分页组件，可与Semantic-UI一起使用。 Thi...
用VueJS+webpack+semantic-UI+Laravel开发单页应用
weixin_34161029的博客
04-14 172
为什么80%的码农都做不了架构师？>>> ...
laravel5-example:这是 Laravel 5 和 Semantic-UI 的简单评论系统演示项目
06-12
Laravel 5 示例 这个 repo 供我个人使用，开始用于 Laravel 5 和 Yii 2 的比较。 原来的laravel-admin项目变成了laravel-blog （因为我需要一个干净的博客系统），就。 这是一个用Laravel 5和Semantic-UI编写的评论系统 DEMO，如果你能从这里了解Laravel 5 ，我会为你感到高兴。 写完这个，我发现了一个，你可能会喜欢。 如果你对学习Yii 2感兴趣，我的另一个OMG，我的代码在 Github 上丢失可能会演示一点 Yii 2。 去做 编写某种 Laravel 5 101
vuex_todo：使用Laravel，TailwindCSS，Vue和Vuex的简单Todo应用程序
02-25
【vuex_todo：使用Laravel，TailwindCSS，Vue和Vuex的简单Todo应用程序】 这个项目是一个基于现代Web开发技术的Todo应用程序实例，它利用了PHP框架Laravel的强大功能，结合了前端流行的Vue.js和Vuex的状态管理库，...
todo:Laravel 树屋待办事项列表
07-09
这个项目是一个基于 Laravel 框架构建的待办事项（Todo）管理应用，名为“树屋待办事项列表”。它利用了 PHP 的 Laravel 框架的强大功能，结合 Jquery 和 Bootstrap，实现了创建、读取、更新和删除（CRUD）等核心...
laravel-todo：Laravel待办事项应用程序
02-26
Laravel减轻了许多Web项目中使用的常见任务，从而减轻了开发过程中的痛苦，例如： 。 。 用于和存储的多个后端。 直观的表达 。 数据库不可知。 。 。 Laravel易于访问，功能强大，并提供大型，强大的应用程序所需...
vue-todo:使用vuejs的待办事项
05-20
Vue-todo •我使用vuejs构建了待办事项应用程序，这与之前使用vanillajs所做的完全相同。 •待办事项应用程序使用axios和firebase数据库。 •对于实时预览： : 构建设置 # install dependencies npm install # ...
nuxt-todo:使用vuejs和nuxt的todo应用
05-18
Yunseop-todo 我的粉碎Nuxt.js项目构建设置 # install dependencies$ yarn install# serve with hot reload at localhost:3000$ yarn run dev# build for production and launch server$ yarn run build$ yarn start...
在 Vue-cli 中引入 Semantic UI
weixin_34227447的博客
10-22 1519
首先，我们需要先安装 jQuery npm install --save jquery 然后在 webpack.dev.config.js 文件中，添加 // plugins 区块内 new webpack.ProvidePlugin({ $ : "jquery", jQuery : "...
Vue 引入semantic-ui 使用vue.config.js配置文件
qq_44614115的博客
02-18 949
本文记录了Vue 如何引入Sematic-ui
semantic-ui懒方法使用
弱小和无知不是生存的障碍 傲慢才是！
10-26 2384
先去 下载地址 然后 <link rel="stylesheet" href="semantic.min.css"> <script src="jquery-1.9.1.min.js"></script> <script src="semantic.min.js"></script> 就O
TODO：小程序手机预览调试
OneTODO
11-12 9181
TODO：小程序手机预览调试 1. 小程序注册，目前还未开通个人注册，主体类型为企业、政府、媒体、其他组织 2. 登录小程序，绑定开发者，获取AppID 3. 下载微信小程序示例-新片预告 https://github.com/CFETeam/weapp-demo-video 这个地址有很详细的教程，大家可以按教程来部署。主要部署mysql服务器，https服
TODO：GitHub创建组织的步骤
OneTODO
12-07 5412
使用GitHub进行团队合作，写这个步骤主要作用是为了OneTODO作为一个团队组织进行代码的分享，让更多人来参与。一个简单、完整的GitHub使用过程，希望对你有帮助。
TODO：Windows10的使用感想及兼容Linux
OneTODO
02-10 3943
TODO：Windows10的使用感想及兼容Linux 这段时间一直使用了Windows10，介绍一下本机配置，双核CPU，8G内存，C盘100G。把不必要的软件卸载掉之后，Windows10给小O的感觉是win7+win8的结合体，总体使用还算流畅。适合开发者使用。 左下角的win键，弹出的内容个人有些花俏，也许是考虑到手机版和触屏版的体验，如果你习惯了win7，可能你会发现很多功能
TODO：小程序开发环境搭建
OneTODO
11-13 2123
TODO：小程序开发环境搭建 1.第一步当然是要先注册小程序了 2.登录到小程序 a)完善小程序信息，如名称，图标，描述 3.绑定开发者 4.获取AppID，并设置服务器信息 5.下载并安装开发者工具 a)使用管理员或者绑定到开发者微信号扫描登录，选择本地小程序项目 b)创建或打开项目，需要填写AppID、项目名称和本地开发目录。开发者工具左边是模拟器可
TODO：Golang语言TCP/UDP协议重用地址端口
OneTODO
11-30 1964
TODO：Golang语言TCP/UDP协议重用地址端口 这是一个简单的包来解决重用地址的问题。 go net包（据我所知）不允许设置套接字选项。 这在尝试进行TCP NAT时尤其成问题，其需要在同一TCP端口上进行侦听和拨号的过程。 这个包使我有可能实现这个功能。 这是一个非常小众的用例，但也许这个软件包可以随着时间的推移变得更普遍。 此包允许从同一TCP端口侦听和拨
填充下面这个程序中所有出现// TODO: fill the code这个任务的地方#include <iostream> #include <cstring> #include "ourstring.h" #include "strlib.h" using namespace std; OurString::OurString(){ // TODO: fill the code } OurString::OurString(const char *str){ // TODO: fill the code } OurString::OurString(const OurString &dstr){ // TODO: fill the code } OurString::~OurString(){ // TODO: fill the code } string OurString::toString() const{ // TODO: fill the code } OurString OurString::subStr(unsigned int start, unsigned int n) const{ // TODO: fill the code } bool OurString::operator > (const OurString &dstr) const{ // TODO: fill the code } bool OurString::operator < (const OurString &dstr) const{ // TODO: fill the code } bool OurString::operator == (const OurString &dstr) const{ // TODO: fill the code } unsigned int OurString::length () const{ // TODO: fill the code } const OurString& OurString::operator = (const OurString &dstr){ // TODO: fill the code } const OurString& OurString::operator = (const char *str){ // TODO: fill the code } char& OurString::operator[](int index){ // TODO: fill the code } const OurString OurString::operator + (const OurString &dstr) const{ // TODO: fill the code } const OurString OurString::operator + (const char *str) const{ // TODO: fill the code } const OurString& OurString::operator += (const OurString &dstr){ // TODO: fill the code } const OurString& OurString::operator += (const char *str){ // TODO: fill the code } ostream & operator<<(ostream &os, const OurString &dstr){ // TODO: fill the code } istream & operator>>(istream &is, OurString &dstr){ // TODO: fill the code }
最新发布
05-29
好的，下面是填充后的代码，每个 TODO 已经被替换成相应的实现： ```c++ #include <iostream> #include <cstring> #include "ourstring.h" #include "strlib.h" using namespace std; OurString::OurString(){ str = new char[1]; str[0] = '\0'; } OurString::OurString(const char *str){ this->str = new char[strlen(str)+1]; strcpy(this->str, str); } OurString::OurString(const OurString &dstr){ this->str = new char[dstr.length()+1]; strcpy(this->str, dstr.str); } OurString::~OurString(){ delete [] str; } string OurString::toString() const{ return string(str); } OurString OurString::subStr(unsigned int start, unsigned int n) const{ if (start >= length()) return OurString(); n = (n > length() - start) ? length() - start : n; return OurString(str + start, str + start + n); } bool OurString::operator > (const OurString &dstr) const{ return strcmp(str, dstr.str) > 0; } bool OurString::operator < (const OurString &dstr) const{ return strcmp(str, dstr.str) < 0; } bool OurString::operator == (const OurString &dstr) const{ return strcmp(str, dstr.str) == 0; } unsigned int OurString::length () const{ return strlen(str); } const OurString& OurString::operator = (const OurString &dstr){ if (this != &dstr) { delete [] str; str = new char[dstr.length()+1]; strcpy(str, dstr.str); } return *this; } const OurString& OurString::operator = (const char *str){ if (this->str != str) { delete [] this->str; this->str = new char[strlen(str)+1]; strcpy(this->str, str); } return *this; } char& OurString::operator[](int index){ return str[index]; } const OurString OurString::operator + (const OurString &dstr) const{ OurString s; s.str = new char[length() + dstr.length() + 1]; strcpy(s.str, str); strcat(s.str, dstr.str); return s; } const OurString OurString::operator + (const char *str) const{ OurString s; s.str = new char[length() + strlen(str) + 1]; strcpy(s.str, this->str); strcat(s.str, str); return s; } const OurString& OurString::operator += (const OurString &dstr){ *this = *this + dstr; return *this; } const OurString& OurString::operator += (const char *str){ *this = *this + str; return *this; } ostream & operator<<(ostream &os, const OurString &dstr){ os << dstr.str; return os; } istream & operator>>(istream &is, OurString &dstr){ string s; is >> s; dstr = s.c_str(); return is; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值