Home >PHP Framework >ThinkPHP >How to use vue in thinkphp

How to use vue in thinkphp

王林Original: 2023-05-28 22:30:071535browse

With the continuous development of Web technology, the separation of front-end and back-end has become a trend. The front-end framework Vue.js is becoming more and more popular now, so how to use Vue in ThinkPHP? This article will introduce how to integrate Vue.js using the ThinkPHP5.1 framework.

1. Install Node.js

Before you start, make sure you have installed the Node.js environment. If not, you can go to the official website to download and install it.

2. Create a new project

Use the Composer command and enter the following command in the terminal:

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

After running the above command, a myapp folder will be generated in the current path. Then run the following to enter the directory and install ThinkPHP dependencies:

cd myapp
composer install

3. Install front-end dependencies

After confirming that you have entered the myapp directory, enter the following instructions in the command line tool to install the required front-end dependencies :

npm install

After the installation is completed, you can see the successfully installed dependency packages in the node_modules folder under the myapp directory.

4. Configuration webpack.mix.js

The webpack.mix.js file is used to introduce the connection between the custom compiler and the front-end dependency package. Through the webpack.mix.js file, you can customize how the front-end code is built and packaged.

In the myapp project folder, create a new file webpack.mix.js and add the following code:

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

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

The function of the above code is:

Introduction Laravel Mix tool
Specify the entry file resources/js/app.js and the resource compilation output path public/js
Specify the Sass entry file path resources/sass/app.scss and the compilation output path public /css

By the way, Laravel Mix is a tool that combines Webpack with other build tools to unify front-end workflow.

5. Create Vue.js components

Before you start writing Vue.js components, you first need to create a resources/views directory, and create a new folder index under it. In the index file Create a new file named vue.blade.php in the folder. This file will be the rendering template of the Vue.js component. The code is as follows:

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

In the above code:

00e3e25c073cfb0205419538fcd81244 Used for cross-domain attack defense;
cb4723489a7fcd4566e660a234563d9a Introducing styles;
2e4c03ba1a844f9ccaa1fdeb1b48713f As a container for Vue.js components;
f669a2fb010860baaa34b3e329e9ddc39711b247f42f43ca3168f4ff0acf0adf is the Vue.js component.

Next, create a new folder components in the resources/js/ directory, and create a new ExampleComponent.vue file in it. This file is a Vue single-file component that will be rendered to the vue.blade.php file. The code is as follows:

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

In the above code:

##d477f9ce7bf77f53fbcf36bec1b69b7a tag is used to insert HTML template;
< The ;script> tag is used to insert JavaScript code and export the Vue single-file component through export default; the
c9ccee2e6ea535a969eb3f532ad9fe89 tag is used to insert the style of the single-file component.

6. Use the Vue.js component in the Blade template

After completing the above steps, you can use the Vue.js component in the Blade template to add the following code:

@extends('index.vue')

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

@extends('index.vue') in the above code refers to the vue.blade.php template just created, @section('content') is Vue. The js component specifies the rendering position and specifies the called component name through example-component.

7. Compile the front-end code

When you execute the following command to compile, public/js/app.js and public/css/app.css will be automatically generated. The effect can be seen through the HTML file in the public directory.

npm run dev

8. Integrate Vue.js

After integrating Laravel Mix into the ThinkPHP project, the next step is to integrate Vue.js. Laravel Mix and Lodash.debounce dependencies are used here. The code is as follows:

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
      }
    }
  });
}

In the above code:

.babel() is used to run Vue.js in IE8;
.webpackConfig() is used to add other rules and configuration items to the builder.

9. Ready

After completing all the above steps, you can successfully use Vue.js in the ThinkPHP project. Run the following command to start the local server to see the effect:

php think run

The above are some methods and steps for using Vue.js in ThinkPHP. On this basis, you can also solve more complex problems through more detailed configuration, such as transmitting data through API, configuring routing, etc. I hope the above methods can help you in your practice.

The above is the detailed content of How to use vue in thinkphp. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How js interacts with thinkphp5 dataNext article：How js interacts with thinkphp5 data

See more

How to use vue in thinkphp

Related articles