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

laravel 6.0版不包括vuejs文件assets/components,App.vue,在resources/js文件夹中。这就是为什么以及如何修复它?

laravel 6.0版不包括vuejs文件assets/components,App.vue,在resources/js文件夹中的原因是,laravel 6.0版默认使用了Laravel Mix来处理前端资源,其中包括了Vue.js的集成。在该版本中,Vue.js的相关文件被放置在resources/js文件夹中,而不再包括在assets/components和App.vue中。

要修复这个问题,可以按照以下步骤进行操作:

  1. 确保已经安装了Node.js和npm,因为laravel mix需要依赖它们来编译前端资源。
  2. 在项目根目录下,打开命令行工具,并执行以下命令来安装laravel mix:
  3. 在项目根目录下,打开命令行工具,并执行以下命令来安装laravel mix:
  4. 安装完成后,执行以下命令来编译前端资源:
  5. 安装完成后,执行以下命令来编译前端资源:
  6. 这将会编译resources/js文件夹中的Vue.js文件,并将编译后的文件放置在public/js目录下。
  7. 在你的视图文件中,使用编译后的Vue.js文件,例如:
  8. 在你的视图文件中,使用编译后的Vue.js文件,例如:
  9. 这将会引入编译后的Vue.js文件,使其在浏览器中可用。

通过以上步骤,你就可以修复laravel 6.0版不包括vuejs文件assets/components,App.vue,在resources/js文件夹中的问题,并且可以正常使用Vue.js来开发前端功能。

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

相关·内容

laravel5.5+vue+Element-ui+vux环境搭建(webpack+laravelMix)(转)

然后 resources\views\welcome.blade.php文件 ,将其修改为下面的代码 将原来的HTML删了,添加一个id为app的div,在其中使用app.js 中注册的组件,需要注意的就是要添加...crsf-Token的验证meta标签,和引入 app.js 文件,这个js文件也可以去根目录的 webpack.mix.js 文集中修改。...npm 安装一下 npm i element-ui -S //安装Element-ui 然后 resources\assets\js\app.js 引入Element-ui组件 import ElementUI...\assets\js 目录下创建 router.js 和 App.vue 文件  App.vue文件添加 模板代码: <router-view.../components/Example.vue'], resolve)) }, ] }) 然后我们来修改 app.js 文件,我们需要引入刚才的路由文件Vue创建时添加路由和

1.4K20

花五分钟重新认知 Vue 项目 src 目录

举例: src/common/components 文件夹下,你可以设置 Button.vue 全局共享的组件; helpers.ts 文件写公共方法以供多处调用。...,关于布局的更多问题可以见 这篇文章-Vue tricks: smart layouts for VueJS Middlewares “中间件”这个文件夹有点类似 vue router,你可以之下放置你的关于路由跳转判断文件...Views Views 文件夹是我们应用第二重要的文件夹了。我们都知道包含的也是业务组件。...但其实更应该是路由的一种映射,比如 /home /about /orders 这个路由, Views 文件夹下就应该有 Home.vue、 About.vue 、Orders.vue 这三个文件!...有以下优点: 更清晰的目录结构 更快速的了解路由 更直观看到根文件、根页面、以及它们与子组件、子业务是如何关联的。

37730

如何更有效率和质量地开发Vue项目

前言 自总结完了上篇前端工程化的思想,并在vue全家桶的项目加以实践,趁热给大家总结一篇如何更有效率与质量地开发vue项目,以及其中踩过的一个个坑。。。...项目应该都是用vue-cli初始化出来的,但是vue-cli只是满足了基础配置和功能,如果你有额外的配置需求或者要迎合团队的业务配置,每新建个项目都得重新安装额外配置,比如说vuex,sass,封装axios,以及相关的文件夹...目录结构 -- src -- assets # 私有资源 -- common # 通用组件 -- components...# js通用方法 -- app.vue # 顶层单文件 -- main.js # 入口 大家可以从目录结构中看出我整个项目分割的思维...然后config文件夹放置了环境变量文件env.js和封装http库文件http.js env.js ? http.js ?

96920

Vue3 | VueCli、node.js安装、nrm切换镜像源、vue项目结构解读、Router详解、VueX详解

package.json文件 VueX简述 VueX 框架的引入、数据的定义 以及 组件的使用 Home.vue 使用这个 VueX提供的 全局数据字段: 如何在任一组件 修改 VueX的.../App.vue' 指明App实例,来自于当前文件夹下的 App.vue文件; --- createApp(App).mount('#app')则 创建实例、挂载实例: App.vue文件 简读.../components/HelloWorld.vue', 可以看出其定义的地方,即 components文件夹目录下的HelloWorld.vue; <img alt=...view文件夹下; view目录下的文件 -- 可以看到Home.vue这里其实引用一个HelloWorld子组件: 例程,拓展一个Router页面 首先App.vue添加 router-link...props、provide、inject等语法去传递数据, 这个时候我们需要一个更加完善的数据管理方案; VueX 框架的引入、数据的定义 以及 组件的使用 main.jsuse: store

6.3K10

全栈的自我修养: 001环境搭建 (使用Vue,Spring Boot,Flask 完成Vue前后端分离开发)

则会将当前文件夹 epimetheus/epimetheus-frontend VSCode 打开, 如何你安装 VSCode 后,使用 code 命令时,提示 not fund, 可以通过 查看...,上面提到项目访问端口为:8080, 为了防止与其他项目造成冲突,这里将端口改为:7000, 具体配置 config/index.js 文件 [front_project_port.png] 使用...配置 main.js 写入以下内容: import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib...也就是通过 Vuex ,各个组件可以实时的共享状态 官网:https://vuex.vuejs.org/zh-cn/intro.html 安装 首先我们先安装 yarn add vuex epimetheus...配置 首先在 src 下创建 store 文件夹并在其下创建 store.js 文件 即 src/store/store.js, 同时创建 src/assets/util/cookie.js src/assets

1.1K20

三、VueJs 填坑日记之项目文件认识

|-prod.env.js // 编译配置文件 node_modules // 项目依赖包文件夹 src // 我们的项目的源码编写文件 |-assets // 初始项目资源目录,回头删掉...|-components // 组件目录 |-HelloWorld.vue // 测试组件 |-router // 路由配置文件夹 |-index.js // 路由配置文件...配置SRC目录 src |-api // 接口调用工具文件夹 |-index.js // 接口调用工具 |-components // 组件文件夹,目前为空 |-...|-js // 放一些第三方的JS文件,如 jquery 对于一些不经常修改变动的css和js咱们统一放到static目录里,因为src里面的文件,将来每次打包时都会对其进行打包,而文件特别多的情况下...而:id就是vuejs路由的动态路由配置。我们用id来区分显示不同的内容。

82870

vue-cli 搭建

开发环境下,命令行工具运行npm run dev 就相当于执行 node build/dev-server.js .也就是开启了一个node写的开发行建议服务器。.../build.js" }, 执行完npm run build命令后,在你的项目根目录生成了dist文件夹,这个文件夹里边就是我们要传到服务器上的文件。...二、main.js文件解读 main.js是整个项目的入口文件,src文件夹下: import Vue from 'vue' import App from '....四、router/index.js 路由文件 引文app.vue我们看到了路由文件,虽然router的内容比较多,但是我们先简单的看一下。下篇文章我们就开始讲Vue-router。...这个文件里就配置了一个路由,就是当我们访问网站时给我们显示Hello.vue的内容。 五、Hello.vue文件解读: 这个文件就是我们第一节课看到的页面文件了。

1.3K20

Vue.js 中使用无状态组件

预计阅读时间:8 分钟 作者:Nwose Lotanna 翻译:疯狂的技术宅 来源:logrocket image.png 本文中,你将了解功能组件,并了解如何在 Vue 中使用工作流的无状态组件...名为 example.js 的项目文件夹创建一个新文件,并将下面的代码块复制到该文件: export default { functional: true, render(createElement...打开你的 app.vue 文件并将下面的代码块复制到文件: <img alt="Vue logo" src="....示例组件<em>在</em>检查时显示为功能组件。 ? 添加点击事件 你可以<em>在</em>组件上添加单击事件,并在根组件<em>中</em>包含该方法。但是,你需要在 render 函数中使用 data object 参数来访问<em>它</em>。...<em>vuejs</em>.org/v2/guide/render-function.html#Functional-<em>Components</em>】。

1.9K10

Vue-cli教程

开发环境下,命令行工具运行npm run dev 就相当于执行 node build/dev-server.js  .也就是开启了一个node写的开发行建议服务器。.../build.js"  }, 执行完npm run build命令后,在你的项目根目录生成了dist文件夹,这个文件夹里边就是我们要传到服务器上的文件。...二、main.js文件解读 main.js是整个项目的入口文件,src文件夹下: 12345678910111213 import Vue from 'vue'      import App from...四、router/index.js 路由文件 引文app.vue我们看到了路由文件,虽然router的内容比较多,但是我们先简单的看一下。下篇文章我们就开始讲Vue-router。...这个文件里就配置了一个路由,就是当我们访问网站时给我们显示Hello.vue的内容。 五、Hello.vue文件解读: 这个文件就是我们第一节课看到的页面文件了。

1.9K80

Vue.js——60分钟browserify项目模板快速入门

概述 之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题。...首先,限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直接写在页面,这对于一些复杂的页面来说,不是好事情,代码的可读性会较差,也不便于管理。...其次,定义HTML页面的组件,无法被其他页面重用,我们只能通过复制粘贴的方式将组件代码拷贝到其他页面,这也违反了DRY原则。既然组件是Vue.js的重要概念,我们就应该利用好。...打开index.html文件,注意它所引用的build.js文件并不存在,后面我会告诉你dist/build.js文件如何生成的。 <!...浏览器输入地址127.0.0.1:8080,可以看到以下画面: ? 示例说明 注意main.js, App.vue和Hello.vue三者之间的关系。

1.3K20

使用Golang的Gin框架和vue编写web应用

src下的 $ tree -L 2 src src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue...├── main.js └── router └── index.js 注意: 可以看到一个vue项目的源码部分由这么几个部分组成 js文件main.js vue主文件App.vue 静态文件目录...assets 自定义组件components 路由目录router 我们首先来看一下App.vue代码 # 我们可以看到div 这里有个img标签,这里其实就是我们刚才看到欢迎页面的vue的logo.../HelloWorld.vue文件: # 其实就是我们刚才看到的欢迎页下面的一些超链接 $ cat components/HelloWorld.vue <div class="...# 其实<em>就是</em>定义我们<em>如何</em>能访问到这个资源 $ cat router/index.<em>js</em> import Vue from 'vue' import Router from 'vue-router' import

5.3K20
领券