我要投稿

thinkphp中如何使用vue

猪小侠源码 PHP教程

2023-05-29 0 4,898

随着 Web 技术的不断发展，前后端分离已经成为了一种趋势。前端框架 Vue.js 目前也越来越流行，那么在 ThinkPHP 中如何使用 Vue 呢？本文将介绍使用 ThinkPHP5.1 框架集成 Vue.js 的方法。
一、安装 Node.js
在开始之前，确保你已安装 Node.js 环境，若未安装可前往官网下载并进行安装。
二、创建新项目
使用 Composer 命令，在终端输入以下命令：

composer create-project topthink/think=5.1.* myapp

运行以上命令后，会在当前路径下生成一个 myapp 文件夹。接着运行以下进入目录并安装 ThinkPHP 依赖：

cd myapp
composer install

三、安装前端依赖
在确认已进入 myapp 目录后，在命令行工具中输入以下指令，安装所需前端依赖：

npm install

安装完成后，可在 myapp 目录下的 node_modules 文件夹中，看到已成功安装的依赖包。
四、配置 webpack.mix.js
webpack.mix.js 文件用于引入自定义的编译器和前端依赖包之间的联系。通过 webpack.mix.js 文件，能够定制如何构建和打包前端代码。
在 myapp 项目文件夹下，创建一个新文件 webpack.mix.js，添加以下代码：

let mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.sCSS', 'public/css');

以上代码的作用是：

引入 Laravel Mix 工具
指定入口文件 resources/js/app.js 和资源编译输出路径 public/js
指定 Sass 入口文件路径 resources/sass/app.scss 和编译输出路径 public/css

顺便说一句，Laravel Mix 是一个将 Webpack 与其他构建工具结合的工具，用于统一前端工作流程。
五、创建 Vue.js 组件
在开始编写 Vue.js 组件之前，首先需要新建一个 resources/views 目录，并在其下新建一个文件夹 index，在 index 文件夹中新建一个名为 vue.blade.php 的文件。这个文件将会是 Vue.js 组件的渲染模板，代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Vue component - ThinkPHP</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
</head>
<body>
<div id="app">
<example-component></example-component>
</div>

以上代码中：

<meta name="csrf-token" content="{{ csrf_token() }}"> 用于跨域攻击防御；
<link rel="stylesheet" href="{{ mix('css/app.css') }}" /> 引入样式；
<div id="app"> 作为 Vue.js 组件的容器；
<example-component></example-component> 即为 Vue.js 组件。

接下来在 resources/js/ 目录下新建一个文件夹 components，并在其中新建 ExampleComponent.vue 文件。这个文件是一个 Vue 单文件组件，将会被渲染到 vue.blade.php 文件。代码如下：

<template>
<div class="container">
<h1 class="title">Vue component - ThinkPHP</h1>
<p>Message: {{ message }}</p>
</div>
</template>

.title {
font-size: 32px;
color: #333;
}
</style>

以上代码中：

<template> 标签用于插入 HTML 模板；
<script> 标签用于插入 JavaScript 代码，通过 export default 导出 Vue 单文件组件；
<style> 标签用于插入单文件组件的样式。

六、在 Blade 模板中使用 Vue.js 组件
完成以上步骤后，即可在 blade 模板中使用 Vue.js 组件添加以下代码：

@extends('index.vue')

@section('content')
<example-component></example-component>
@endsection

以上代码中的 @extends('index.vue') 引用了刚才创建的 vue.blade.php 模板， @section('content') 为 Vue.js 组件指定了渲染位置，通过 example-component 指定调用的组件名称。
七、编译前端代码
在执行以下命令进行编译时，会自动生成 public/js/app.js 和 public/css/app.css。通过 public 目录下的 HTML 文件即可看到效果。

npm run dev

八、集成 Vue.js
在将 Laravel Mix 集成到 ThinkPHP 项目中后，下一步就是集成 Vue.js。这里使用了 Laravel Mix 和 Lodash.debounce 依赖，代码如下：

let mix = require('laravel-mix');
let debounce = require('lodash.debounce');

// styles
mix.sass('resources/assets/sass/app.scss', 'public/css');

// scripts
mix.js('resources/assets/js/app.js', 'public/js')
.vue({ version: 2 })
.babel(['public/js/app.js'], 'public/js/app.js')
.webpackConfig({
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
}
]
}
});

// browserSync
if (process.env.NODE_ENV !== 'production') {
mix.browserSync({
proxy: process.env.APP_URL || 'localhost:8000',
notify: false,
files: [
'app/**/*.php',
'resources/views/**/*.php',
'public/**/*.{css,js}'
],
snippetOptions: {
rule: {
match: /</body>/i
}
}
});
}

以上代码中：

.vue({ version: 2 }) 用于告诉 Laravel Mix 项目使用 Vue.js 的版本；
.babel() 用于在 IE8 中运行 Vue.js；
.webpackConfig() 用于为构建器增加其他的规则和配置项。

九、准备就绪
完成以上所有步骤后，即可在 ThinkPHP 项目中顺利使用 Vue.js。运行以下命令开启本地服务器即可看到效果：

php think run

以上是在 ThinkPHP 中使用 Vue.js 的一些方法及步骤。在此基础上，你还可以通过更细致的配置解决更加复杂的问题，例如通过 API 传输数据、配置路由等等。希望以上方法能为你的实践带来帮助。

资源下载此资源下载价格为1小猪币，终身VIP免费，请先

由于本站资源来源于互联网，以研究交流为目的，所有仅供大家参考、学习，不存在任何商业目的与商业用途，如资源存在BUG以及其他任何问题，请自行解决，本站不提供技术服务！由于资源为虚拟可复制性，下载后不予退积分和退款，谢谢您的支持！如遇到失效或错误的下载链接请联系客服QQ：442469558

收藏 (0) 点赞 (0)

：本文采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可，转载请附上原文出处链接。
1、本站提供的源码不保证资源的完整性以及安全性，不附带任何技术服务！
2、本站提供的模板、软件工具等其他资源，均不包含技术服务，请大家谅解！
3、本站提供的资源仅供下载者参考学习，请勿用于任何商业用途，请24小时内删除！
4、如需商用，请购买正版，由于未及时购买正版发生的侵权行为，与本站无关。
5、本站部分资源存放于百度网盘或其他网盘中，请提前注册好百度网盘账号，下载安装百度网盘客户端或其他网盘客户端进行下载；
6、本站部分资源文件是经压缩后的，请下载后安装解压软件，推荐使用WinRAR和7-Zip解压软件。
7、如果本站提供的资源侵犯到了您的权益，请邮件联系： 442469558@qq.com 进行处理！

猪小侠源码-最新源码下载平台 PHP教程 thinkphp中如何使用vue https://www.20zxx.cn/761350/xuexijiaocheng/qes.html

[db:TAG标签]