如何在 Laravel 8.29.0 中安装 Vue JS + TailwindCss答案

【问题标题】：How install Vue JS + TailwindCss in Laravel 8.29.0如何在 Laravel 8.29.0 中安装 Vue JS + TailwindCss
【发布时间】：2021-05-28 16:18:12
【问题描述】：

开始为我的 Laravel 项目安装插件。

1. Laravel 新公众号
1. npm 安装
1. 作曲家需要 laravel / ui
1. php artisan ui vue
1. npm install -D tailwindcss @latest postcss @latest autoprefixer @latest
1. npx tailwindcss 初始化
1. 在tailwind.config.js 清除中添加行：[ './resources//*.blade.php', './resources//.js', './resources/**/.vue', ],
1. 在 webpack.mix.js 中添加行 require ("tailwindcss")，
1. 添加im资源/css/app.css 3行@tailwind base； @tailwind 组件； @tailwind 实用程序；
1. 在主模板文件（main.blade.php）中添加链接样式表 {{asset ('css / app.css')}}

在上面提到的所有monipulations之后，我执行命令npm install && npm run dev，我得到一个错误

> npm run development


> @ development D:\laravel\public
> mix


× Mix
  Compiled with some errors in 6.30s

ERROR in ./resources/js/components/ExampleComponent.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|    <div>
|        <h3>Hey</h3>

webpack compiled with 1 error
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\****\AppData\Roaming\npm-cache\_logs\2021-02-26T09_06_38_033Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\***\AppData\Roaming\npm-cache\_logs\2021-02-26T09_06_38_066Z-debug.log

【问题讨论】：

这能回答你的问题吗？ How to fix the error "You may need an appropriate loader to handle this file type"
找了半天错误在哪里，原来是基础错误，我在.vue()这个地方连接了.view()

标签： node.js laravel vue.js webpack node-modules

【解决方案1】：

你会尝试这两种解决方案

1 - 运行 MacOS 或 Windows 超级用户 1.1 macOS sudo npm run development 1.2 视窗right click terminal open with Administrator

2-清除代码<a href="..."></a> to <a href="#"></a>

【讨论】：