How to use vue in thinkphp-ThinkPHP-php.cn

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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>

Copy after login

In the above code:

<meta name="csrf-token" content ="{{ csrf_token() }}"> Used for cross-domain attack defense;
<link rel="stylesheet" href="{{ mix('css/app .css') }}" /> Introducing styles;
<div id="app"> As a container for Vue.js components;
<example-component></example-component> 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>

Copy after login

In the above code: