首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Laravel-Mix:在Laravel-Mix升级到v6后,Vue在app.js和bootstrap.js中不可用

Laravel-Mix是一个用于前端开发的工具,它提供了一种简化和优化前端资源管理的方式。在Laravel-Mix升级到v6后,Vue在app.js和bootstrap.js中不可用的原因是Laravel-Mix v6默认不再内置Vue的相关依赖和配置。

为了在Laravel-Mix v6中使用Vue,你需要手动安装Vue的相关依赖和进行配置。以下是一些步骤和推荐的腾讯云相关产品:

  1. 首先,你需要在项目中安装Vue的相关依赖。可以使用npm或者yarn进行安装。在命令行中执行以下命令:
  2. 首先,你需要在项目中安装Vue的相关依赖。可以使用npm或者yarn进行安装。在命令行中执行以下命令:
  3. 或者
  4. 或者
  5. 安装完Vue后,你需要在app.js或bootstrap.js中引入Vue。可以使用以下代码:
  6. 安装完Vue后,你需要在app.js或bootstrap.js中引入Vue。可以使用以下代码:
  7. 接下来,你需要在webpack.mix.js文件中进行配置,以确保Laravel-Mix正确处理Vue的相关文件。以下是一个示例配置:
  8. 接下来,你需要在webpack.mix.js文件中进行配置,以确保Laravel-Mix正确处理Vue的相关文件。以下是一个示例配置:
  9. 这个配置告诉Laravel-Mix在编译时使用Vue的相关插件。
  10. 最后,你可以使用Laravel-Mix提供的其他功能,如编译Sass、压缩JavaScript等。具体的配置和使用方法可以参考Laravel-Mix官方文档

总结一下,升级到Laravel-Mix v6后,Vue在app.js和bootstrap.js中不可用,需要手动安装Vue的相关依赖并进行配置。以上是使用Laravel-Mix v6和Vue的基本步骤和推荐的腾讯云相关产品。请注意,这只是一个简单的示例,具体的配置和使用方法可能因项目而异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Laravel 项目中使用 webpack-encore

    安装依赖 首先当然是安装依赖 yarn add -D @symfony/webpack-encore 需要注意的是,webpack-encore 没有像 laravel-mix 那样自己内部依赖 vue-tempplate-compiler...vendor.js app.js 了。...(scripts) 因为 laravel 项目默认 package.json develop 等相关的脚本都是使用 laravel-mix 的,为了方便日常开发,现在要对它们进行一些调整,改用 webpack-cocore...调整大致如下,你也可以根据自己实际应用情况进行其它调整 "scripts": { "dev": "npm run development", "development": "cross-env...相比于 laravel-mi,encore 的 API 以及一些默认配置方面考虑得更为科学全面,想要配置 vue-loader 或者 ts-loader 之类的,只需要调用相应的方法。

    2.1K20

    laravel + passport + vue安装过程遇到的麻烦

    环境: composer npm 完全使用中国镜像。...是前端页面login.blade.php里面包含了vue的入口文件app.js ---- vue登录界面logincontroller是PHP artisan ui vue --auth命令复制文件而来的...~~app.js就应该放在.blade.php文件里,但同时改文件里面也有vue写法,说明引入app.js就可以使用vue语法了(即使用.blade.php文件来写也可以)?...关键是也加载了app.js文件。也就是说:这个登录界面必须设置为vuejs首页,那其想要的真正首页要用vue-router来设置? 还是再装一个app.js?...---- 样式(丑不丑)取决于css/app.css文件 app.js应该是vue.jslaravel里使用的时候,必须这样做的一个打包文件(囊括了普通vue项目的所有文件)吧!

    1.4K20

    webpack构建优化:bundle体积从3M到400k之路

    可以看到,app.js里面大头分别是vuevue-router、vue-i18n组件(好家伙,这些组件都是app.js里面import进来的)。...我们将他们踢出去: a、webpack.app.config.js里面添加externals参数,这样即使我们没将这几个组件打包到app.js,我们依然能将其import进来并use: module.exports...因为vuevue-routercdn上都提供了min版的js,已经是压缩精简版的,而vue-i18n.js的官方网站也建议使用cdn方式引入,没必要将都打包到app.js。...还使用element-ui,所以webpack.app.config.js需要在external添加该项element-uijquery: module.exports = { externals...':'ElementUI', 'jquery': 'jQuery.noConflict()' }}; index.html添加jquery.all.jselement-ui,引入的js

    4K50

    将博客主题替换成 Clean Blog

    public 目录下新建 js 子目录用于存放编译打包的 JavaScript 脚本文件。...app.js 进行编译打包,然后将处理app.js 文件分发到 public/js 目录下。...然后 webpack.mix.js 补充对应的处理逻辑: const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public...5、编译前端资源文件 完成以上编码就可以项目根目录下执行 npm run dev 编译打包前端资源了: ? 编译成功,就可以 public 目录下看到对应的新文件了: ?...7、演示最终效果 完成视图模板代码重构,就可以浏览器访问替换主题的博客首页了: ? ? ? 下篇教程,我们将演示联系表单页面构建以及将表单数据传递给后端进行验证存储。

    73320

    前后端分离探索——MVC 项目升级的一个过渡方案

    传统 MVC 项目直接升级到前后端分离需要大量的时间与人力,在业务多变的阶段并不适合,所以便有了本文的过渡方案探索 路由先不分离,仍然采用 PHP 提供的路由 模板部分分离,原 PHP 模板,引入...Vue 编译的模板,为此需要约定 # 示例 新建控制器 TestController.php <?...Vue 访问路由,PHP 渲染模板,返回给浏览器 浏览器加载 Vue,交由 Vue 渲染页面 # 局限 不能做到全局自动加载组件 编译的文件大小可能会很大 # 优势 可以更好地编写复杂的页面 更好的维护性...# 更新 2020/03/13 随着页面重构,文件越来越多,导致编译总文件大小足足 150 M,而且 Git 合并困难,大大降低了开发效率前端性能,这明显不合预期; 分析原因:每个页面都引入了公共模块...34 35 36 37 /public/mix/resources/js 文件夹可以删掉了,编译后的总文件大小约 2.5 M 至此,优化完成,完美解决了开发流程的痛点 # 后记 目前仍在不断地探索

    1.2K20

    Homestead + laravel-mix 环境下 hmr 的两种玩法

    对于 Laravel 官方首推的 Homestead 当然也是可以的,只不过用法上有些差别,于加上 laravel-mix 本身的一些 BUG( issue 里搜索 hmr 结果就有好几页 :smile...1.vagrant ssh 连接虚拟机,进入项目目录安装前端依赖 yarn install 2. webpack.mix.js 调整相关配置 使用 mix.Webpack() 配置 devServer...虚拟机终端执行yarn run hot,然后浏览器中使用绑定的测试域名(如:laravel.test)访问 34.修改 JS 等,自动编译浏览器页面即自动更新 玩法二:使用宿主机的 Node...与玩法一不一样,不再需要特别在 hmrOptions 中指定 devServer host port,使用默认的就好(事实上也不能像前面那样指定,因为会出现 IP/端口 冲突) 3.宿主机终端执行...修改 JS 等,自动编译浏览器页面即自动更新 总结 两种方法并没有谁好谁坏之分,具体使用哪种方法视具体场景及个人喜好而定。

    1.6K10

    页面布局(下):引入 Tailwind CSS 框架构建博客应用 UI 界面

    在上篇教程,学院君给大家演示了单页面博客应用前端路由页面布局的基本构建,不过由于没有应用任何 CSS 样式代码,所以 UI 界面很丑陋,今天,学院君将引入 Tailwind CSS 框架来美化这个博客应用的...这个前端依赖包: npm install laravel-mix-tailwind --save-dev 安装完成,需要在项目根目录下的 webpack.mix.js 引入它: const mix...纯手工编写 Tailwind 样式代码 你可以 resources/views/app.blade.php 仿照上篇教程给出的 WordPress 博客主题模板手动编写调试页面布局样式代码如下:...') }}"> 然后浏览器刷新应用首页,就可以看到如下布局视图了,左侧是菜单导航,右侧是主体内容: 你如果喜欢自己倒腾设计的话,可以结合...Vue 教程,很好理解。

    2.8K20

    让 F5 歇一会儿——laravel-mix 自动刷新之道

    因为近几年来大部分时假与 Laravel 打交道,使用 laravel-mix 已成家常便饭,所以想着总结并分享一下 laravel-mix 工作流的自动刷新之道。...Browsersync 、 Hot Module Replacement LiveReload 实现自动刷新。...安装依赖 yarn add -D browser-sync browser-sync-webpack-plugin webpack.mix.js 文件调用 mix.browserSync() 启动...打开页面,修改页面引用的前端资源(如 js,css)并保存,页面将自动刷新 因为使用 laravel-mix 编译,一般修改 resource/ 目录下的文件,但实际上直接修改 public/ 目录的文件也是可以触发刷新的...但同时需要注意的是 laravel-mix 环境下使用 hmr 也存在一些问题(当前最新版本 4.0.15 仍存在),例如与 mix.extract() 没法同时使用( 见 Issue ) 以及windows

    2.4K20

    引入 Laravel Mix 管理前端资源

    引言 到目前为止,我们还是使用很原始的方式引入前端资源文件 —— 特定目录下存放完整的 CSS、JavaScript 文件,然后 HTML 文档静态引入。...API 帮助我们对 CSS JavaScript 资源文件进行预处理,细节可参考 Mix 官方文档。...Mac 系统默认已经安装,只是版本较低,Windows 系统如果使用 Laragon 作为集成开发环境,也默认安装了 NPM,通过 Cmder 即可使用。...安装完成可以命令行通过 npm --version 验证 NPM 是否安装成功: 如果版本较低,可以使用如下命令升级: npm i -g npm blog 根目录下通过 npm init 命令按照向导生成.../webpack.config.js" }, "devDependencies": { "axios": "^0.19", "cross-env": "^7.0", "laravel-mix

    1.6K20

    CSS 预编译语言 Sass 快速入门教程

    1、CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量、函数、继承等机制,因此很容易写出大量没有逻辑、难以复用扩展的代码,日常开发使用,如果没有完善的编码规范...Sass 与 Less 等其它预编译语言不存在优劣之分,一般来说,Sass 的功能更加强大或者说 Sass 的语言层面更接近于一门完整的编程语言,而 Less 则更接近于 CSS 语法,所以我们 Vue...Mix 进行前端资源的编译,当我们通过 npm install 安装 laravel-mix 的过程,系统会自动安装 laravel-mix 声明的依赖,其中就包括了编译 Sass 所需要的 node-sass...4、结语 好了,通过以上语法的介绍相信你已经具备了编写 Sass 样式文件的能力,基于 Laravel + Vue.js 驱动的项目中,我们通常会在两个地方编写样式代码,一个是 resources/sass...目录下独立的 .scss 文件,另一个是 Vue 组件,我们属性设置 lang="scss" 表示这里面是 Sass 代码,需要 Laravel

    7.1K41

    Webpack5 跨应用代码共享 - Module Federation

    │ ├── App.js │ └── NewsList.js ├── package.json └── webpack.config.js 项目 A、B 的差异主要在 App.js import...所以,我们使用 Module Federation 的时候一定要记得,将公共依赖配置到 shared 。另外,一定要两个项目同时配置 shared ,否则会报错。...接下来,我们浏览器打开项目 A, Chrome 的 network 面板,可以看到项目 A 直接使用了项目 B 的 react/react-dom。 ?...项目 C 加载逻辑 这里有一个点需要特别注意,就是入口文件 index.js 本身没有什么逻辑,反而将逻辑放在了 bootstrap.js ,index.js 去动态加载 bootstrap.js。...去除 bootstrap.js 主要原因是 remote 暴露的 js 文件需要优先加载,如果 bootstrap.js 不是一个异步逻辑, import NewsList 的时候,会依赖 app2

    2.8K22

    引入 SB Admin 2 作为后台管理系统主题

    就可以 webpack.mix.js 中将上述资源文件编译打包为对应的 JavaScript Css 代码了: const mix = require('laravel-mix') // 编译前台资源...datatables.net-bs4/css/dataTables.bootstrap4.css', 'public/css/table.css'); 运行 npm run dev 之后,我们就可以视图模板引入对应的前端资源文件了...@index'); 对应的请求处理逻辑位于后台控制器 Admim\DashboardController 的 index 方法,如果没有创建这个控制器,现在创建它( app/http/controller...项目根目录下运行 composer dump-auto 让新增文件命名空间可以被自动加载到。...5、测试整体效果 blog 项目的 public 目录下运行 php -S localhost:9000 启动 PHP 内置 Web 服务器,然后浏览器访问 http://localhost:9000

    4.2K10
    领券