Laravel 11 如何使用 Vue 3 & Typescript
在 Laravel 11 中集成 Vue 3 和 TypeScript 是一个相对直接的过程。下面是实现。
第一步：安装项目
首确保你已经安装了 Laravel，我这里使用全局安装器进行安装，如何你没有配置，可以使用 compoer 进行安装项目。
$ laravel new laravel-vue3-ts
第二步：安装 vue 3 和 typescript
在项目中安装 Vue 3 和 Typescript。
# 安装 vue
$ pnpm install vue@latest
$ pnpm install --save-dev @vitejs/plugin-vue
# 安装 typescript
$ pnpm i -D typescript
$ pnpm i -D vue-tsc
第三步：vite 配置引入 vue
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.ts'],
refresh: true,
}),
// 引入 vue
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
第四步：修改 app.js 格式
现在使用的是 ts，因此，需要把 app.js 修改为 app.ts，并挂在 vue 主文件。
resources/js/app.ts
import './bootstrap';
// 导入组件
import app from './src/App.vue';
// 导入挂载方法
import { createApp } from 'vue';
// 挂载 vue
createApp(app).mount('#app')
第五步：添加 app.vue 文件
resources/js/src/App.vue
<template>
<div class="m-10 p-10">
<h1 class="text-blue-500 font-bold mb-4">Laravel 11 使用 Vue & TS & Vite</h1>
{{ name }}
{{ age }}
<button class="px-4 py-1 bg-green-500 text-white font-semibold rounded" @click="age++">自增</button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const name = ref('自如初')
const age = ref(18)
</script>
第六步：使用组件
resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 11 & Vue 3 & TS</title>
@vite('resources/css/app.css')
</head>
<body id="app">
@vite('resources/js/app.ts')
</body>
</html>
第七步：启动服务
$ php artisan serve
$ pnpm dev
第七步：测试应用
浏览器中访问 http://127.0.0.1:8000/ 就可以看到界面了。
到这里，Laravel 中 Vue 3 & Ts 的使用就已经结束了。
后面的步骤是，对 TS 及相关文件做一个配置。
第八步：生成 tsconfig.json 文件
前面安装了 vue-tsc，现在就需要用到它了。由于不是全局安装，因此，可以在 package.json 中配置一个命令来执行它。
package.json
...
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build", // 修改命令
"tsc-init": "tsc --init", // 配置命令
},
...
命令配置完成后，执行命令生成 tsconfig.json文件。
$ pnpm run tsc-init
第九步：修改 tsconfig.json 文件
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"moduleResolution": "Node",
"target": "esnext",
"jsx": "preserve",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"isolatedModules": true,
"types": ["vite/client"]
},
"exclude": ["node_modules", "public"],
"include": [
"resources/js/**/*.ts",
"resources/js/**/*.d.ts",
"resources/js/**/*.vue",
"resources/js/app.ts",
],
}
第十步：安装可能使用到的包（非必须）
$ pnpm i vue-router
$ pnpm i pinia
$ pnpm i vue-toast-notification
$ pnpm i laravel-vue-pagination
$ pnpm i --save vue3-apexcharts
第十一步：组件测试
Vue 和 Ts 的使用真的成功了吗？通过测试来看，已经成功了。现在我们添加一个组件来看看。
resources/js/src/components/Demo.vue
<template>
<h3 class="text-amber-500 bg-green-500 mt-3">Demo</h3>
{{ msg }}
</template>
<script setup lang="ts">
import { ref } from 'vue'
const msg = ref('Hello World')
</script>
resources/js/src/App.vue
<template>
<div class="m-10 p-10">
<h1 class="text-blue-500 font-bold mb-4">Laravel 11 使用 Vue & TS & Vite</h1>
{{ name }}
{{ age }}
<button class="px-4 py-1 bg-green-500 text-white font-semibold rounded" @click="age++">自增</button>
<Demo></Demo>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Demo from "./components/Demo.vue";
const name = ref('自如初')
const age = ref(18)
</script>
这些步骤打下来，Laravel 11 使用 Vue 3 和 TS 就完成。
请登录后再评论