thinkphp中如何使用vue

开发运维 2023-08-06 大树 手机阅读

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

一、安装 Node.js

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

二、创建新项目

使用 Composer 命令，在终端输入以下命令：

composer create-project topthink/think=5.1.* myapp登录后复制

cd myapp composer install登录后复制

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

npm install登录后复制

四、配置 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 组件的渲染模板，代码如下：

Vue component - ThinkPHP 登录后复制

  • 用于跨域攻击防御；
  • 引入样式；
  • 作为 Vue.js 组件的容器；
  • 即为 Vue.js 组件。

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

Vue component - ThinkPHP

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

六、在 Blade 模板中使用 Vue.js 组件

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

@extends('index.vue') @section('content') @endsection登录后复制

七、编译前端代码

在执行以下命令进行编译时，会自动生成 public/js/app.js 和 public/css/app.css。通过 public 目录下的 HTML 文件即可看到效果。

npm run dev登录后复制

在将 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: //i } } }); }登录后复制

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

九、准备就绪

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

php think run登录后复制

以上就是thinkphp中如何使用vue的详细内容，更多请关注每日运维网(www.mryunwei.com)其它相关文章！