zoukankan      html  css  js  c++  java
  • Laravel 5.4+Vue.js 初体验:Laravel下配置运行Vue.js

    生产材料
    PHP:PHP 5.6+
    Laravel 5.4:https://github.com/laravel/laravel/releases/
    Composer:http://getcomposer.org/
    Node.js:http://nodejs.org/
    Node Package Manager:http://www.npmjs.com/
    生产环境
    系统环境:Windows 7 x64
    Web服务器:WAMPServer 3 64bit:https://sourceforge.net/projects/wampserver/files/
    生产工具
    开发工具:PhpStorm 2016:http://www.jetbrains.com/phpstorm/

    一、检测环境是否正常

    打开Cmd,然后分别输入以下命令每个软件是否安装正确且版本是否符合要求。

    1

    2

    3

    4

    5

    6

    7

    php –v

    composer -V

    node –v

    npm -v

    二、创建Laravel项目

    首先打开PhpStorm ,然后新建一个空项目,然后打开Terminal,我们用Composer来安装一个Laravel,在Terminal内输入
    composer create-project --prefer-dist laravel/laravel temp

    然后等待安装完毕。


    安装完毕后会出现一个temp,然后我们将temp目录下所有文件剪切或拷贝到newproject根目录下,并删除temp即可(然后在Terminal输入一次 composer update 更新一下包防止出错)。

    三、初次运行Laravel项目

    安装好WAMPServer环境后运行 Laravel 项目。首先访问默认的地址localhost,然后点击 Add a Virtual Host,然后输入相应的参数,
    如图

    Virtual Host 的名字,其实就是我们浏览器访问时候要输入的域名,一般填写项目名,如newproject,
    VirtualHost IP 一般填写127.x.y.z IP段,如127.0.0.8
    Complete absolute path 就是我们这个项目的绝对路径,但是在项目最后记得加上/public,这样我们直接访问
    http://newproject/ 时可以直接访问到public目录下的index.php,而无需输入 http://newproject/public/ 去访问,Laravel 官方(https://laravel.com/docs/5.4/)也是如此建议我们的,主要是为了考虑安全方面的问题。填好参数后然后点击Start the creation of the VirtualHost 创建VirtualHost,创建好后,你可以重开WAMPServer一次或Refresh。

    然后在浏览器内输入http://newproject/ 访问当前项目,运行成功。

    四、初次运行Vue组件

    为了保证接下来的操作无其他影响,首先在Terminal输入 npm install ,来刷新项目内的nodejs module,这个过程会比较漫长。。。

    因为Laravel 用上了vue,而vue基于nodejs,需要用到构建工具gulp或webpack。而vue官方推荐用webpack来构建vue的代码,所以从5.4开始Laravel 抛弃gulp改用webpack来构建JavaScript代码,并用Laravel Mix 来编译SASS/Less成纯CSS代码。
    这样我们就可以在Laravel项目根目录看到一下几个文件:webpack.mix.js(Mix编译SASS/Less 引用文件)、resources/assets/js/app.js(Vue组件的实例化文件或其他用途)、resources/assets/js/bootstrap.js(构建js代码的源构建引导js代码文件)、public/js/app.js(webpack 构建后的js代码文件)、public/js/app.js(Mix 编译后的css代码文件)。
    接下来找到resources/views/welcome.blade.php ,删除部分无用内容,仅留html结构,然后引用 public/js/app.js,然后引用resources/assets/js/app.js 中被声明的vue component(http://vuejs.org/v2/guide/)。

    然后在Terminal 输入 npm run dev  编译,然后打开浏览器再次输入http://newproject/ 访问成功。

  • 相关阅读:
    leetcode 673. 最长递增子序列的个数 java
    leetcode 148. 排序链表 java
    leetcode 98. 验证二叉搜索树 java
    leetcode 29. 两数相除 java
    leetcode 234. 回文链表 java
    Valid Palindrome LeetCode Java
    Single Number II LeetCode Java
    Single Number LeetCode java
    Search in Rotated Sorted Array II LeetCode Java
    Search in Rotated Sorted Array leetcode java
  • 原文地址:https://www.cnblogs.com/mouseleo/p/8197848.html
Copyright © 2011-2022 走看看