为什么将 Vue 集成到项目中的方式如此不同?Vue 文档中的基本教程是将脚本放在文件的头部,.html
在另一个脚本中包含以下内容:
new Vue({
el: '#app',
data: {
estado: 'Critico'
}
})
而当我使用 Vue Cli 创建项目时,文件main.js
具有以下内容:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'#app',
render: h => h(App)
})
使用 Laravel,文件的代码app.js
是:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
以及bootstrap.js
似乎添加诸如 vue axios 之类的附加功能的文件:
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
我有很多问题。为什么render:
显示的第三个实例的属性消失了?
为什么第二个使用import
而第三个使用require
?他们都使用 Node,对吧?
因为文件的第一行bootstrap.js
被分配了一个require('lodash')
属性_
在继续使用 Vue 之前,您建议学习什么?我知道一些基本的 javascript,因为有人建议我在使用任何框架之前学习 Vanilla JS,但是查看bootstrap.js
带有的文件window.$
,为其分配一个值,并在同一行为后者分配另一个值。我很困惑。
Vue 允许您像这样使用它:
选项1
对项目的依赖并以与 JQuery 一样的传统方式包含它,也就是说,您在 HTML 文档的末尾通过标记
script
通过src
.对于上述情况,您只需要 Vue 作为X语言或X框架的新项目或现有项目中的工作插件。
要处理的语法如下:
选项 2
Vue CLI 允许您创建一个项目,其中 Vue 可以作为完整的前端工作,并且这部分使用的语言完全是 JavaScript,我们只寻求使用X语言或框架中项目的某些端点生成的数据。
这里已经产生了第一个差异,即:
appname/src/components
.vue
template
:script
和style
代码
参考NodeJS中模块的语法
更新
选项 3
在 Laravel 的情况下,请记住,对于 webpack 的使用,它具有laravel mix将指向
app.js
所有脚本将编译并存储所述操作结果的目标文件。尽管从技术上讲,在 Laravel 中,您可以通过以下方式将 Vue 包含为经典调用:
Laravel 让你有机会通过 NodeJS 调用它,因为在项目的主文件夹中,你可以找到一个package.json,其中 Vue 已经被声明为依赖项,你可以将其用作:
npm install
也就是说,在 Laravel 中:
myapp/resources/js/components
app/resources/myapp.js
使用这种语法:
这是我们简化任务的地方,因为您可以在开发和生产中编译以使用以下两个命令
laravel mix
来减小输出文件的大小:最后,为了能够访问你的组件,不像用 Vue-CLI 做的项目,这里你只需要通过 helper 调用视图中的
asset()
app.js 文件,如下所示:并且已经在视图中,您可以像这样使用您的组件:
对于您提到的额外内容,它们不是真的;请记住:
fetch
npm install
关于:
import
和require
Require
遵循考虑以下步骤的commonJS的基本语法:[
Import/Export
]查看上面建议的链接一个可能非常大的区别是,如果您在项目中使用传统语法包含 Vue:
您将使用这些组件的方式如下:
以上取决于创建的Vue实例和
saludo
对象上的属性值data
single file components
如果您同时使用选项 2 或 3,您将通过具有以下特征的所谓选项进行管理:<template></template>
.vue
句法
参考
您可以在此处阅读有关上述内容的更多信息。
关于渲染属性?
关于你的最后一个问题,你自己已经回答了你必须学习 JavaScript