最近使用Broswerify和Vueify升级到Vue-2 . 在主应用程序中,我不得不要求 vue/dist/vue.js
而不是'vue',因为我不使用Webpack,但是现在当我使用 Vue.use(require('vue-resource'));
时,我得到$ http是未定义的 . Vue1这很顺利 . 使用Vue-2时我错过了什么?
错误:
Uncaught TypeError: Cannot read property 'get' of undefined(…)
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');
});
的package.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"
}
}
2 回答
如果您只是想将此设置为SPA(不一定使用laravel),那么我建议在脚手架项目时查看vue-cli .
在cli中,您将找到一个简单且更高级的browserify设置 .
如果你支持简单版本并添加vue-resource:
npm install vue-resource -save--dev
然后你可以调整你的main.js设置如下:
App组件只是cli构建的默认组件
如果你正在为laravel构建,那么你在Package.json中有许多冗余模块,你可以使用laravel elixir vueify . 有's a fork for Vue 2.0 on npmjs (haven' t曾尝试过):
npm install laravel-elixir-vueify-2.0
我假设您遇到的问题是由于在构建
app.js
输出时需要elixir未使用的软件包引起的 .laravel-elixir-vue-2
例如是一个webpack构建 - 所以可能没有做任何事情 .简化您的gulp设置:
理论上,您将正确构建输出并使用Vue 2.0包来构建它 . 如果你将它与上面的vue-cli结合起来,你应该能够使用久经考验的代码来支撑这些早期阶段,以便更轻松地进行故障排除 .
我修复了以下模式的问题:
在main.js
创建bootstrap.js
在App.vue中