찾다

집 >PHP 프레임워크 >ThinkPHP >thinkphp에서 vue를 사용하는 방법

thinkphp에서 vue를 사용하는 방법

王林
王林원래의
2023-05-28 22:30:071501검색

웹 기술의 지속적인 발전으로 프론트엔드와 백엔드의 분리가 트렌드가 되었습니다. 프런트엔드 프레임워크인 Vue.js가 점점 더 대중화되고 있는데, ThinkPHP에서 Vue를 어떻게 사용하나요? 이 기사에서는 ThinkPHP5.1 프레임워크를 사용하여 Vue.js를 통합하는 방법을 소개합니다.

1. Node.js 설치

시작하기 전에 Node.js 환경이 설치되어 있는지 확인하세요. 그렇지 않은 경우 공식 웹사이트로 이동하여 다운로드하여 설치할 수 있습니다.

2. 새 프로젝트 만들기

Composer 명령을 사용하여 터미널에 다음 명령을 입력합니다. 

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

위 명령을 실행하면 현재 경로에 myapp 폴더가 생성됩니다. 그런 다음 다음을 실행하여 디렉터리를 입력하고 ThinkPHP 종속성을 설치합니다. 

cd myapp
composer install

3. 프런트엔드 종속성을 설치합니다.

myapp 디렉터리를 입력했는지 확인한 후 명령줄 도구에 다음 지침을 입력하여 필수 항목을 설치합니다. front-end dependency: 

npm install

설치가 완료되면 myapp 디렉터리 아래 node_modules 폴더에서 성공적으로 설치된 종속성 패키지를 확인할 수 있습니다.

4. 구성 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을 다른 빌드 도구와 결합하여 프런트 엔드 작업 흐름을 통합하는 데 사용됩니다.

5. Vue.js 구성 요소 만들기

Vue.js 구성 요소 작성을 시작하기 전에 먼저 resources/views 디렉터리를 만들고 그 아래에 새 폴더 색인을 만든 다음 색인 폴더에 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>

위 코드에서:

  • 102817a4cdf10ee9f239c375285fbd7c 도메인 간 공격 방어에 사용됩니다. b5b92cce0821c3bee9a20511635af1b3 用于跨域攻击防御；
  • 4ad18ce1a6ba3ce77702a0160620e402 引入样式；
  • 0668f9b9672fb8bee085b6d77157e8a9 作为 Vue.js 组件的容器；
  • f669a2fb010860baaa34b3e329e9ddc39711b247f42f43ca3168f4ff0acf0adf 即为 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>

以上代码中：

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

六、在 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

5206c77e2f048ad4f962a3665f84266c Vue.js 구성 요소의 컨테이너로

2e4c03ba1a844f9ccaa1fdeb1b48713f 소개; ;/example-comComponent>는 Vue.js 구성 요소입니다.

다음으로 resources/js/ 디렉터리에 새 폴더 구성 요소를 만들고 그 안에 새 exampleComponent.vue 파일을 만듭니다. 이 파일은 vue.blade.php 파일로 렌더링되는 Vue 단일 파일 구성 요소입니다. 코드는 다음과 같습니다. 

npm run dev

위 코드에서:

d477f9ce7bf77f53fbcf36bec1b69b7a 태그는 HTML 템플릿을 삽입하는 데 사용됩니다.
  • 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그 JavaScript 코드를 삽입하는 데 사용되며 내보내기 기본값을 통해 Vue 단일 파일 구성 요소를 내보내는 데 사용됩니다.
  • c9ccee2e6ea535a969eb3f532ad9fe89 태그는 단일 파일 구성 요소의 스타일을 삽입하는 데 사용됩니다.
  • 6. 블레이드 템플릿에서 Vue.js 구성 요소 사용

위 단계를 완료한 후 블레이드 템플릿에서 Vue.js 구성 요소를 사용하여 다음 코드를 추가할 수 있습니다. 

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

@extends(' code index.vue')는 방금 생성된 vue.blade.php 템플릿을 참조하고, @section('content')는 example -comComponent는 호출할 구성 요소 이름을 지정합니다.

7. 프론트엔드 코드 컴파일

🎜다음 명령어를 실행하여 컴파일하면 public/js/app.js와 public/css/app.css가 자동으로 생성됩니다. 효과는 공개 디렉토리의 HTML 파일을 통해 확인할 수 있습니다. 🎜
php think run
🎜8. Vue.js 통합🎜🎜Laravel Mix를 ThinkPHP 프로젝트에 통합한 후 다음 단계는 Vue.js를 통합하는 것입니다. 여기서는 Laravel Mix 및 Lodash.debounce 종속성이 사용됩니다. 🎜rrreee🎜위 코드에서: 🎜🎜🎜.vue({ version: 2 }) 는 Laravel Mix 프로젝트에 다음 버전을 사용하도록 지시하는 데 사용됩니다. Vue.js; 🎜🎜.babel()은 IE8에서 Vue.js를 실행하는 데 사용됩니다. 🎜🎜.webpackConfig()는 빌더에 다른 규칙 및 구성 항목을 추가하는 데 사용됩니다. 🎜🎜🎜9. Ready🎜🎜위의 모든 단계를 완료하면 ThinkPHP 프로젝트에서 Vue.js를 성공적으로 사용할 수 있습니다. 다음 명령을 실행하여 로컬 서버를 시작하여 효과를 확인하세요. 🎜rrreee🎜위는 ThinkPHP에서 Vue.js를 사용하는 몇 가지 방법과 단계입니다. 이를 기반으로 API를 통한 데이터 전송, 라우팅 구성 등 보다 세부적인 구성을 통해 보다 복잡한 문제도 해결할 수 있습니다. 위의 방법들이 귀하의 실무에 도움이 되기를 바랍니다. 🎜

위 내용은 thinkphp에서 vue를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：js가 thinkphp5 데이터와 상호작용하는 방법다음 기사：js가 thinkphp5 데이터와 상호작용하는 방법

관련 기사

더보기