thinkphp中怎样使用vue
随着 web 手艺的一直生长，前后端疏散已经成为了一种趋势。前端框架 vue.js 现在也越来越盛行，那么在 thinkphp 中怎样使用 vue 呢？本文将先容使用 thinkphp5.1 框架集成 vue.js 的要领。
一、装置 Node.js
在最先之前，确保你已装置 Node.js 情形，若未装置可前往官网下载并举行装置。
二、建设新项目
使用 Composer 下令，在终端输入以下下令：
连忙学习“PHP免费学习条记（深入）” ；
composer create-project topthink/think=5.1.* myapp
登录后复制
运行以上下令后，会在目今路径下天生一个 myapp 文件夹。接着运行以下进入目录并装置 ThinkPHP 依赖：
cd myapp composer install
登录后复制
三、装置前端依赖
在确认已进入 myapp 目录后，在下令行工具中输入以下指令，装置所需前端依赖：
npm install
登录后复制
装置完成后，可在 myapp 目录下的 node_modules 文件夹中，看到已乐成装置的依赖包。
四、设置 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 组件的渲染模板，代码如下：
<!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>
登录后复制
以上代码中：
用于跨域攻击防御 ；
引入样式 ；
作为 Vue.js 组件的容器 ；
即为 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>
登录后复制
以上代码中：
标签用于插入 HTML 模板 ；
