成人国产一区二区三区,a级毛片免费观看完整,国产,日韩亚洲欧美第一第二区

PHP ?????

ThinkPHP

thinkphp?? vue? ???? ??

王林

May 28, 2023 pm 10:30 PM

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

? ????:

<meta name="csrf-token" content="{{ csrf_token () }}" > ??? ? ?? ??? ?????. <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/ 目錄下新建一個(gè)文件夾 components，并在其中新建 ExampleComponent.vue 文件。這個(gè)文件是一個(gè) Vue 單文件組件，將會(huì)被渲染到 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> 標(biāo)簽用于插入 HTML 模板；
<script> 標(biāo)簽用于插入 JavaScript 代碼，通過 export default 導(dǎo)出 Vue 單文件組件；
<style> 標(biāo)簽用于插入單文件組件的樣式。

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

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

@extends('index.vue')

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

以上代碼中的 @extends('index.vue') 引用了剛才創(chuàng)建的 vue.blade.php 模板， @section('content') 為 Vue.js 組件指定了渲染位置，通過 example-component

<link rel="stylesheet" href="{{ mix('css/app.css') }}" /> Vue.js ?? ??? ?????

<div id="app"> ??; ;/example-comComponent>< /code>? Vue.js ?? ?????.

???? resources/js/ ????? ? ?? ?? ??? ??? ? ?? ? exampleComponent.vue ??? ????. ? ??? vue.blade.php ??? ????? Vue ?? ?? ?? ?????. ??? ??? ????.

npm run dev

? ????:

<template> ??? HTML ???? ???? ? ?????.

<script> ?? JavaScript ??? ???? ? ???? ???? ???? ?? Vue ?? ?? ?? ??? ???? ? ?????.
<style> ??? ?? ?? ?? ??? ???? ???? ? ?????.

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