学习 Laravel —— 前端篇(持续更新)

laravel 6.0

  1. 一开始在 homestead 环境中使用 npm install / npm run dev 各种报错,无法解决。最后在 windows 下安装了最新的 node.js 和修改 package.json 中将 resolve-url-loader 版本改为 2.3.2,在 windows下运行了成功。重点:是在 windows下运行 npm install & npm run dev windows! windows! windows!
  2. 当然也可以自行升级 homestead 中的 node.js 的版本,参考: 简书 linux node.js 升级
  3. 使用验证码,参考:Mews/captcha
本作品采用《CC 协议》,转载必须注明作者和本文链接
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 15

求 win 10 Homestead 环境搭建 到 编译 教程。
我被环境折磨了很久很久了,至今环境还没搭建好。网上的教程我也试过,但结果总是失败。

4年前 评论
miaotiao (楼主) 4年前
bing_ (作者) 4年前

以下就是按照教程安装出现的问题。也是前一天虚拟机还用得好好的,第二天进来出现的问题。
file

Vagrant was unable to mount VirtualBox shared folders. This is usually
because the filesystem "vboxsf" is not available. This filesystem is
made available via the VirtualBox Guest Additions and kernel module.
Please verify that these guest additions are properly installed in the
guest. This is not a bug in Vagrant and is usually caused by a faulty
Vagrant box. For context, the command attempted was:
mount -t vboxsf -o actimeo=1,nolock,uid=1000,gid=1000 home_vagrant_Code /home/vagrant/Code
The error output from the command was:
fmask     =<arg> umask of regular files

file

file

file

file

4年前 评论
miaotiao (楼主) 4年前
bing_ (作者) 4年前
miaotiao (楼主) 4年前
PreferMa 4年前
bing_ (作者) 4年前
  1. 安装 homestead 报错

网上说是 virtualBox版本过低的问题

建议 virtualBox 升级最新版本,vagrant 升级最新版本。

virtualBox 下载地址: 点我

vagrant 下载地址: 点我

参考:

https://blog.csdn.net/ifeng6/article/detai...

4年前 评论
bing_ 4年前

file

==> homestead: Booting VM...
There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.

Command: ["startvm", "46c78c44-2322-4023-a7f5-e7a7976e3754", "--type", "headless"]

Stderr: VBoxManage.exe: error: Failed to open/create the internal network 'HostInterfaceNetworking-VirtualBox Host-Only Ethernet Adapter #2' (VERR_INTNET_FLT_IF_NOT_FOUND).
VBoxManage.exe: error: Failed to attach the network LUN (VERR_INTNET_FLT_IF_NOT_FOUND)
VBoxManage.exe: error: Details: code E_FAIL (0x80004005), component ConsoleWrap, interface IConsole

正在尝试网上搜来的各种方法。

4年前 评论
miaotiao (楼主) 4年前
bing_ (作者) 4年前
miaotiao (楼主) 4年前

好的。我现在的环境是
win 10 专业版
VirtualBox-6.0.12-133076-Win
vagrant_2.2.5_x86_64
virtualbox.box 是执行以下命令获得下载地址,之后用迅雷下载来的:

> vagrant box add laravel/homestead
https://vagrantcloud.com/laravel/boxes/homestead/versions/8.2.1/providers/virtualbox.box

( 迫不得已才安装全新的版本)

Administrator@893ZOVMS8SXX2CW MINGW64 ~/Homestead (master)
$ vagrant box list
laravel/homestead (virtualbox, 0)
laravel/homestead (virtualbox, 8.2.1)

Laravel

 homestead: /tmp/vagrant-shell: line 14: mysql: command not found
The SSH command responded with a non-zero exit status. Vagrant
assumes that this means the command failed. The output for this command
should be in the log above. Please read the output to determine what
went wrong.

现在又开始找办法填坑。
我如何删除 laravel/homestead (virtualbox, 0) 这个?
我现在能够进入虚拟机,但无法使用。
Laravel

    homestead: /home/vagrant/Code => C:/Users/Administrator/Code
Vagrant was unable to mount VirtualBox shared folders. This is usually
because the filesystem "vboxsf" is not available. This filesystem is
made available via the VirtualBox Guest Additions and kernel module.
Please verify that these guest additions are properly installed in the
guest. This is not a bug in Vagrant and is usually caused by a faulty
Vagrant box. For context, the command attempted was:
mount -t vboxsf -o actimeo=1,nolock,uid=1000,gid=1000 home_vagrant_Code /home/vagrant/Code
The error output from the command was:
unknown mount option `actimeo=1'
valid options:
  rw         mount read write (default)
  ro         mount read only
  uid       =<arg> default file owner user id
  gid       =<arg> default file owner group id
  ttl       =<arg> time to live for dentry
  iocharset =<arg> i/o charset (default utf8)
  convertcp =<arg> convert share name from given charset to utf8
  dmode     =<arg> mode of all directories
  fmode     =<arg> mode of all regular files
  umask     =<arg> umask of directories and regular files
  dmask     =<arg> umask of directories
  fmask     =<arg> umask of regular files

Laravel

4年前 评论
miaotiao (楼主) 4年前
bing_ (作者) 4年前

我理了一下头绪,又重头来了一次,结果报以下错 :

==> homestead: Booting VM...
There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.
Command: ["startvm", "157f5d04-9f39-4aa3-9242-922946cbe722", "--type", "headless"]
Stderr: VBoxManage.exe: error: Failed to open/create the internal network 'HostInterfaceNetworking-VirtualBox Host-Only Ethernet Adapter #2' (VERR_INTNET_FLT_IF_NOT_FOUND).
VBoxManage.exe: error: Failed to attach the network LUN (VERR_INTNET_FLT_IF_NOT_FOUND)
VBoxManage.exe: error: Details: code E_FAIL (0x80004005), component ConsoleWrap, interface IConsole

file

于我用之前那位同学的方法查看了一下:
file
file
file

一连十天了,好累。。。。。。

4年前 评论
miaotiao (楼主) 4年前
bing_ (作者) 4年前

好熟悉的画面。。。。。。。。。。。。。
file

实在太累了,先睡觉了。谢谢今天有你搭理我! 晚安!

4年前 评论
miaotiao (楼主) 4年前

刚才我用管理员身份进入虚拟机尝试安装项目成功了:
file
file

后来我看到你的回复,便想退出虚拟机尝试不用管理员权限再进入虚拟机创建项目,退出之前我想到了改变一下指令,于是执行了以下命令:
$ chsh -s $(which zsh)
密码。。。
再退出关闭,重新进入虚拟机,竟然看到了一个全新的画面:
file

这下我连退出都不会了。

$ vagrant ssh
Welcome to Ubuntu 18.04.3 LTS (GNU/Linux 4.15.0-64-generic x86_64)
0 packages can be updated.
0 updates are security updates.
Last login: Sat Oct  5 15:36:18 2019 from 10.0.2.2
This is the Z Shell configuration function for new users,
zsh-newuser-install.
You are seeing this message because you have no zsh startup files
(the files .zshenv, .zprofile, .zshrc, .zlogin in the directory
~).  This function can help you with a few settings that should
make your use of the shell easier.
You can:
(q)  Quit and do nothing.  The function will be run again next time.
(0)  Exit, creating the file ~/.zshrc containing just a comment.
     That will prevent this function being run again.
(1)  Continue to the main menu.
(2)  Populate your ~/.zshrc with the configuration recommended
     by the system administrator and exit (you will need to edit
     the file by hand, if so desired).
--- Type one of the keys in parentheses ---
4年前 评论
miaotiao (楼主) 4年前

提权创建项目成功! 多注意身体!晚安!
file
file
file

明天开始安装教程里用到的那些工具,还有编译。不知还要折腾多久。。。。。。。。。。。。。。。

4年前 评论
miaotiao (楼主) 4年前
bing_ (作者) 4年前
miaotiao (楼主) 4年前
bing_ (作者) 4年前
miaotiao (楼主) 4年前
bing_ (作者) 4年前

教程里:

由于国内的网络环境原因,我们特意为大家定制了适用于国情的 Homestead 安装包,该安装包提供了以下内容:

Composer 加速,配置了 Composer 中国全量镜像 支持;        //   请问这一步怎么操作?
默认集成 Heroku 工具;              //  这一步可以省略
默认集成 Yarn,并为 Yarn 加了淘宝镜像的加速;          //   这一步怎么操作?
使用 CNPM 对 NPM 进行加速。           //   这一步怎么操作?

[定制的 Homestead 中] 我们已经内置安装了 Elasticsearch ,但是由于 Elasticsearch 运行时会占用较多系统资源,默认是关闭的。使用的时候你只需要进入虚拟机中,将其开启即可。。。。。。。

默认安装了 [elasticsearch-analysis-ik](https://github.com/medcl/elasticsearch-analysis-ik) 中文分词插件。。。。
4年前 评论
miaotiao (楼主) 4年前
bing_ (作者) 4年前

编辑资源 Mix 还是报之前出现的错:
file
file
file
file

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2019-10-06T01_47_26_686Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2019-10-06T01_47_26_725Z-debug.log

看来逃避不了,只能找办法解决这个问题。

4年前 评论
miaotiao (楼主) 4年前
bing_ (作者) 4年前

更换了一个 shell 安装 laravel 项目成功!
file
file

只是每次安装项目,都会出现一大堆的建议。。。。。。。。。。。。。。。。。。。。。。。。。。。
如何是好???????????????

symfony/routing suggests installing symfony/config (For using the all-in-one router or any loader)
symfony/routing suggests installing symfony/yaml (For using the YAML loader)
symfony/routing suggests installing symfony/expression-language (For using expression matching)
symfony/routing suggests installing doctrine/annotations (For using the annotation loader)
symfony/event-dispatcher-contracts suggests installing psr/event-dispatcher
symfony/event-dispatcher suggests installing symfony/dependency-injection
symfony/http-kernel suggests installing symfony/browser-kit
symfony/http-kernel suggests installing symfony/config
symfony/http-kernel suggests installing symfony/dependency-injection
symfony/service-contracts suggests installing symfony/service-implementation
symfony/console suggests installing symfony/lock
swiftmailer/swiftmailer suggests installing true/punycode (Needed to support internationalized email addresses, if ext-intl is not installed)
paragonie/random_compat suggests installing ext-libsodium (Provides a modern crypto API that can be used to generate random bytes.)
ramsey/uuid suggests installing ircmaxell/random-lib (Provides RandomLib for use with the RandomLibAdapter)
ramsey/uuid suggests installing ext-libsodium (Provides the PECL libsodium extension for use with the SodiumRandomGenerator)
ramsey/uuid suggests installing ext-uuid (Provides the PECL UUID extension for use with the PeclUuidTimeGenerator and PeclUuidRandomGenerator)
ramsey/uuid suggests installing moontoast/math (Provides support for converting UUID to 128-bit integer (in string form).)
ramsey/uuid suggests installing ramsey/uuid-doctrine (Allows the use of Ramsey\Uuid\Uuid as Doctrine field type.)
ramsey/uuid suggests installing ramsey/uuid-console (A console application for generating UUIDs with ramsey/uuid)
symfony/translation suggests installing symfony/config
symfony/translation suggests installing symfony/yaml
monolog/monolog suggests installing graylog2/gelf-php (Allow sending log messages to a GrayLog2 server)
monolog/monolog suggests installing doctrine/couchdb (Allow sending log messages to a CouchDB server)
monolog/monolog suggests installing ruflin/elastica (Allow sending log messages to an Elastic Search server)
monolog/monolog suggests installing elasticsearch/elasticsearch (Allow sending log messages to an Elasticsearch server via official client)
monolog/monolog suggests installing php-amqplib/php-amqplib (Allow sending log messages to an AMQP server using php-amqplib)
monolog/monolog suggests installing ext-amqp (Allow sending log messages to an AMQP server (1.0+ required))
monolog/monolog suggests installing ext-mongodb (Allow sending log messages to a MongoDB server (via driver))
monolog/monolog suggests installing mongodb/mongodb (Allow sending log messages to a MongoDB server (via library))
monolog/monolog suggests installing aws/aws-sdk-php (Allow sending log messages to AWS services like DynamoDB)
monolog/monolog suggests installing rollbar/rollbar (Allow sending log messages to Rollbar)
monolog/monolog suggests installing php-console/php-console (Allow sending log messages to Google Chrome)
league/flysystem suggests installing league/flysystem-eventable-filesystem (Allows you to use EventableFilesystem)
league/flysystem suggests installing league/flysystem-rackspace (Allows you to use Rackspace Cloud Files)
league/flysystem suggests installing league/flysystem-azure (Allows you to use Windows Azure Blob storage)
league/flysystem suggests installing league/flysystem-webdav (Allows you to use WebDAV storage)
league/flysystem suggests installing league/flysystem-aws-s3-v2 (Allows you to use S3 storage with AWS SDK v2)
league/flysystem suggests installing league/flysystem-aws-s3-v3 (Allows you to use S3 storage with AWS SDK v3)
league/flysystem suggests installing spatie/flysystem-dropbox (Allows you to use Dropbox storage)
league/flysystem suggests installing srmklive/flysystem-dropbox-v2 (Allows you to use Dropbox storage for PHP 5 applications)
league/flysystem suggests installing league/flysystem-cached-adapter (Flysystem adapter decorator for metadata caching)
league/flysystem suggests installing league/flysystem-sftp (Allows you to use SFTP server storage via phpseclib)
league/flysystem suggests installing league/flysystem-ziparchive (Allows you to use ZipArchive adapter)
laravel/framework suggests installing aws/aws-sdk-php (Required to use the SQS queue driver, DynamoDb failed job storage and SES mail driver (^3.0).)
laravel/framework suggests installing doctrine/dbal (Required to rename columns and drop SQLite columns (^2.6).)
laravel/framework suggests installing guzzlehttp/guzzle (Required to use the Mailgun mail driver and the ping methods on schedules (^6.0).)
laravel/framework suggests installing league/flysystem-aws-s3-v3 (Required to use the Flysystem S3 driver (^1.0).)
laravel/framework suggests installing league/flysystem-cached-adapter (Required to use the Flysystem cache (^1.0).)
larav
4年前 评论
miaotiao (楼主) 4年前

node.js 我已安装最新,执行 npm install & npm run dev 报以下错:

file

Administrator@893ZOVMS8SXX2CW MINGW64 /d/install/node-v12.11.1-x64
$ npm install & npm run dev
[1] 407
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path D:\install\node-v12.11.1-x64\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'D:\install\node-v12.11.1-x64\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-10-06T02_40_47_465Z-debug.log

Administrator@893ZOVMS8SXX2CW MINGW64 /d/install/node-v12.11.1-x64
$ up to date in 0.85s

换一个位置执行命令 > npm install & npm run dev :
Laravel


Administrator@893ZOVMS8SXX2CW MINGW64 /d/install
$ npm install & npm run dev
[1] 155
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path D:\install\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'D:\install\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-10-06T03_01_30_511Z-debug.log

Administrator@893ZOVMS8SXX2CW MINGW64 /d/install
$ npm WARN saveError ENOENT: no such file or directory, open 'D:\install\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'D:\install\package.json'
npm WARN install No description
npm WARN install No repository field.
npm WARN install No README data
npm WARN install No license field.

up to date in 0.279s
$

然后我:

Administrator@893ZOVMS8SXX2CW MINGW64 /d/install
$ npm -v
6.11.3
4年前 评论
miaotiao (楼主) 4年前
bing_ (作者) 4年前
miaotiao (楼主) 4年前

执行 $ npm install && npm run dev 报以下错:
file

vagrant@homestead ~/Code/weibo
 % npm install && npm run dev
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code EIO
npm ERR! syscall symlink
npm ERR! path ../jsesc/bin/jsesc
npm ERR! dest /home/vagrant/Code/weibo/node_modules/css-selector-tokenizer/node_modules/.bin/jsesc
npm ERR! errno -5
npm ERR! EIO: i/o error, symlink '../jsesc/bin/jsesc' -> '/home/vagrant/Code/weibo/node_modules/css-selector-tokenizer/node_modules/.bin/jsesc'

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2019-10-06T03_35_39_936Z-debug.log
vagrant@homestead ~/Code/weibo
 % npm install --no-bin-links
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
4年前 评论

上面执行 $ npm install && npm run dev 之后,
再执行 $ npm run watch-poll
OK了!
太好了,终于OK了,终于OK了,终于OK了,终于OK了。。。。。。。。。。。。。。。。。。。

谢谢楼主 @miaotiao !!!!!!
谢谢楼主 @miaotiao !!!!!!
谢谢楼主 @miaotiao !!!!!!
谢谢楼主 @miaotiao !!!!!!。。。。。。。。。。。。。。。

file

总结编辑资源 Mix

环境(此刻全新最新,非教程里的):
win 10 专业版
node-v12.11.1-x64
VirtualBox-6.0.12-133076-Win
vagrant_2.2.5_x86_64
version": "8.2.1"
laravel 6.x

vagrant@homestead ~/Code/weibo
$ composer require laravel/ui --dev
$ php artisan ui bootstrap

$ npm install --no-bin-links
删除 pakage.json 文件 scripts 下的 3 个 cross-env
$  npm run dev

就这样就 OK 了。

接下来就是安装教程里的:

默认安装了 Elasticsearch
默认安装了 [elasticsearch-analysis-ik](https://github.com/medcl/elasticsearch-analysis-ik) 中文分词插件。。。。
4年前 评论
miaotiao (楼主) 4年前
miaotiao (楼主) 4年前
bing_ (作者) 4年前
miaotiao (楼主) 4年前
miaotiao (楼主) 4年前
bing_ (作者) 4年前
miaotiao (楼主) 4年前
bing_ (作者) 4年前
miaotiao (楼主) 4年前
bing_ (作者) 4年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!