thinkphp中如何使用vue

随着 Web 技术的不断发展,前后端分离已经成为了一种趋势。前端框架 Vue.js 目前也越来越流行,那么在 ThinkPHP 中如何使用 Vue 呢?本文将介绍使用 ThinkPHP5.1 框架集成 Vue.js 的方法。

一、安装 Node.js

在开始之前,确保你已安装 Node.js 环境,若未安装可前往官网下载并进行安装。

ThinkPHP+Vue,打造高效开发利器!

二、创建新项目

使用 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>


<
script src="
{{ mix('js/app.js') }}"
>
<
/script>

<
/body>

<
/html>

以上代码中:

  • <
    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>


<
script>

export default {
data () {
return {
message: 'Hello, Vue!'
}
}
}
<
/script>


<
style>

.container {
margin: 0 auto;

max-width: 640px;

}

.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 传输数据、配置路由等等。希望以上方法能为你的实践带来帮助。



Vue是一款轻量级的前端框架,它的数据驱动能力和组件化开发思想让Web开发更加高效。而ThinkPHP是一款优秀的PHP开发框架,它面向对象的思想和快速开发的特性极富吸引力。本文将介绍如何在ThinkPHP中使用Vue,进而提升Web开发的效率。
一、安装Vue
首先,我们需要在ThinkPHP项目中安装Vue。使用NPM命令,在项目根目录中运行以下命令:
npm install vue
这将会在项目中安装所有Vue相关的依赖,包括Vue本身和Vue插件。接着,在需要使用Vue的页面中,使用以下脚本引用Vue:

二、创建Vue实例
Vue实例是Vue应用的入口点,创建Vue实例后,我们就能使用Vue提供的各种功能和API了。在ThinkPHP中,我们可以在视图页面中创建Vue实例,例如:

{{ message }}


这里,我们将Vue实例绑定在id为“app”的div元素上,并使用data属性绑定了一个message变量,最后将Vue实例赋值给了变量app。
三、使用Vue组件
Vue的组件化开发思想是其最大的特色之一,通过组件把页面分解成多个功能单一的模块,使得开发者能够更加清晰地组织代码和管理项目。在ThinkPHP中,我们可以使用Vue组件来实现类似的效果。例如:





这里,我们定义了一个名为“hello-world”的Vue组件,并在页面中使用自定义标签来引用该组件。通过template属性定义了组件的HTML模板,并通过data属性添加了title和content变量。最后,将组件注册到Vue实例中,即可完成组件的使用。
四、发送AJAX请求
在实际开发中,我们通常会与后端服务器交互。Vue提供了一个非常方便的方式来发送Ajax请求。例如:

这里,我们使用Vue自带的$http对象来发送Ajax请求。在mounted函数中发送GET请求,获取到后端服务器返回的数据后,将其保存到Vue实例的items变量中。通过这种方式,我们可以在前端页面中轻松地获取后端服务器的数据,实现真正的前后端分离。
总结
以上,我们介绍了如何在ThinkPHP中使用Vue,包括安装Vue、创建实例、使用组件和发送Ajax请求。通过合理地利用这些技术,我们能够更加高效地进行Web开发,实现更多更好的功能。希望本文能够对读者有所帮助,欢迎大家反馈意见和建议。