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/ 访问成功。

  • 相关阅读:
    node作为反向代理服务器
    引擎模板jade常见用法
    express4中模板引擎ejs
    express4+mysql博客项目
    关于zepto需要注意的地方
    css中需要注意的地方
    typescript基础类型
    vue全文搜索高亮显示
    js搜索全文高亮显示
    js随机验证码
  • 原文地址:https://www.cnblogs.com/mouseleo/p/8197848.html
Copyright © 2011-2022 走看看