最近使用 Broswerify 和 Vueify 升级到 Vue-2。在主应用程序中,我必须要求 vue/dist/vue.js
而不是 'vue' 因为我没有使用 Webpack,但是现在当我使用 Vue.use(require('vue-资源'));
我得到 $http 未定义。 Vue1 这个工作很顺利。为了让它与 Vue-2 一起工作,我缺少什么?
错误:
未捕获类型错误:无法读取未定义(…)的属性“get”
Main.js:
require('./bootstrap');
var Vue = require('vue/dist/vue.js');
Vue.use(require('vue-resource'));
// var amazon = require('amazon-affiliate-api');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
new Vue({
el: '#wrapper',
mounted: function () {
//use mounted instead of ready.
this.getHttp('/test', this.successFetch);
},
data: {
},
methods: {
successFetch: function (results) {
console.log(results);
},
//vue resource methods
getHttp: function (url,callback) {
const params = {
headers: {
'X-CSRF-TOKEN': this.token
}
}
this.$http.get(url, params).then(callback).catch(err => console.error(err));
},
Gulp.js:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
require('browserify');
require('vueify');
elixir(function(mix){
mix.sass('main.scss')
.browserify('app.js');
});
包.json:
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"aliasify": "^2.1.0",
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-14",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"vueify": "^9.3.0"
},
"dependencies": {
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"browserify": "^13.1.1"
}
}
最佳答案
如果您只是想将其设置为 SPA(不一定使用 laravel),那么我建议您查看 vue-cli当谈到搭建你的项目时。
在 cli 中,您将找到一个简单且更高级的 browserify 设置。
如果你搭建简单版本并添加 vue-resource: npm install vue-resource -save--dev
然后您可以按如下方式调整 main.js 设置:
import Vue from 'vue'
import VueResource from 'vue-resource'
import App from './App.vue'
Vue.use(VueResource)
new Vue({
el: '#app',
render: h => h(App),
mounted () {
this.getHttp('/')
},
methods: {
getHttp (url) {
this.$http
.get(url)
.then(response => console.log(response))
.catch(err => console.error(err))
},
},
})
App 组件只是 cli 构建的默认组件
如果您正在为 Laravel 进行构建,那么您在 Package.json 中有许多冗余模块,您可以考虑使用 laravel elixir vueify 。 npmjs 上有一个 Vue 2.0 的分支(还没尝试过):
npm 安装 laravel-elixir-vueify-2.0
我假设您遇到的问题是由于在构建 app.js
输出时需要 elixir 未使用的软件包而引起的。 laravel-elixir-vue-2
是一个 webpack 构建 - 所以可能没有做任何事情。
将 gulp 设置简化为:
var elixir = require('laravel-elixir');
require('laravel-elixir-vueify-2.0');
elixir(function(mix) {
mix.sass('main.scss')
.browserify('main.js');
});
理论上,您可以正确构建输出并使用 Vue 2.0 包来构建它。如果将其与上面的 vue-cli 结合起来,您应该能够使用经过尝试和测试的代码来构建这些早期阶段,从而使故障排除更加容易。
关于javascript - Vue 2 和 Vue-Resource [无法读取 undefined(...) 的属性 'get'],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40667639/