我尝试将vue.js与laravel 5.3集成。我称之为“gulp”，它在公共文件夹中创建main.js文件。我可以在浏览器中看到加载了js文件但是没有显示“message”的值。它只写成{{message}}。有什么想法吗？
<body>
<div class="container">
<div class="content">
<div class="title">
<p>@{{ message }}</p>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
gulpfile：
var elixir = require('laravel-elixir');
require('laravel-elixir-browserify-official');
require('laravel-elixir-vueify');
elixir(mix => {
mix.sass('app.scss').browserify('main.js');
});
main.js：
import Vue from 'vue';
var app = new Vue({
el: 'body',
data: {
message: 'Hello Vue!'
}
})
的package.json：
"dependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browserify-official": "^0.1.3",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-vueify": "^1.0.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3"
}
答案 0 :(得分：1)
修改
<强>的package.json
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_product_detail);
this.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setTitle("Product Details");
supportInvalidateOptionsMenu();
toolbar.setTitleTextColor(Color.WHITE);
session = new SessionManager(getApplicationContext());
itemCode = getIntent().getExtras().getString("ItemCode");
itemName = getIntent().getExtras().getString("ItemName");
stockAvailibility = (ImageView) findViewById(R.id.stock_image);
code = (TextView) findViewById(R.id.item_code);
price = (TextView) findViewById(R.id.price_txt);
name = (TextView) findViewById(R.id.product_name);
productImage = (ImageView) findViewById(R.id.image_big);
stock = (TextView) findViewById(R.id.stock);
stock_status = (TextView) findViewById(R.id.stock_text);
quantity_txt = (EditText) findViewById(R.id.unit_number);
qtyText = (TextView) findViewById(R.id.selectQty);
addCart = (Button) findViewById(R.id.btn_add_cart);
callProductDetail(itemCode);
addCart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String selectedQty = quantity_txt.getText().toString();
if (session.isLoggedIn()) {
if (!selectedQty.isEmpty() && Integer.parseInt(selectedQty) > Integer.parseInt(qty)) {
AlertDialog.Builder builder = new AlertDialog.Builder(ProductDetailActivity.this);
builder.setMessage("You can not add more than" + " " + qty + " " + "units")
.setCancelable(false)
.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
//do things
}
});
AlertDialog alert = builder.create();
alert.show();
} else if (selectedQty.isEmpty() || Integer.parseInt(selectedQty) == 0) {
AlertDialog.Builder builder = new AlertDialog.Builder(ProductDetailActivity.this);
builder.setMessage("Please Add Quantity")
.setCancelable(false)
.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
//do things
}
});
AlertDialog alert = builder.create();
alert.show();
} else if (!selectedQty.isEmpty() && Integer.parseInt(selectedQty) != 0 && Integer.parseInt(selectedQty) <= Integer.parseInt(qty)) {
addCart.setVisibility(View.GONE);
hideKeyboard(ProductDetailActivity.this);
fm = getSupportFragmentManager();
fragmentTransaction = fm.beginTransaction();
CartFragment cartFragment = new CartFragment();
fragmentTransaction.replace(R.id.fragmentContainer,cartFragment);
Bundle bundle = new Bundle();
bundle.putString("artCode", artCode);
bundle.putString("image",image_url);
bundle.putString("quantity",selectedQty);
bundle.putString("cost",cost);
bundle.putInt("fragment",6);
cartFragment.setArguments(bundle);
fragmentTransaction.addToBackStack(null);
fragmentTransaction.commitAllowingStateLoss();
}
} else {
AlertDialog.Builder builder = new AlertDialog.Builder(ProductDetailActivity.this);
builder.setMessage("Please Login To Continue")
.setCancelable(false)
.setNegativeButton("NOT NOW", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
}
})
.setPositiveButton("LOGIN", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
Intent intent = new Intent(ProductDetailActivity.this, LoginActivity.class);
intent.putExtra("fragment", 7);
startActivity(intent);
}
});
AlertDialog alert = builder.create();
alert.show();
}
}
});
}
public void myOnResume(){
this.onResume();
addCart.setVisibility(View.VISIBLE);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
// todo: goto back activity from here
finish();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
public void showProgreass() {
progressDialog = new ProgressDialog(ProductDetailActivity.this);
progressDialog.setIndeterminate(true);
progressDialog.setMessage("Please Wait...");
progressDialog.setCanceledOnTouchOutside(false);
progressDialog.setCancelable(false);
progressDialog.show();
}
public void stopProgress() {
if (progressDialog != null && progressDialog.isShowing())
progressDialog.cancel();
}
public void callProductDetail(String productId) {
showProgreass();
String url = String.format(ServerConfigStage.GET_PRODUCT_DETAIL(), productId);
RetrofitTask task = new RetrofitTask<List<ProductDetail>>(ProductDetailActivity.this, CommonUtility.HTTP_REQUEST_TYPE.GET, CommonUtility.CallerFunction.GET_PRODUCT_DETAIL, url, ProductDetailActivity.this);
task.execute();
}
@Override
public void onRetrofitTaskComplete(Response<List<ProductDetail>> response, Context context, CommonUtility.CallerFunction _callerFunction) {
stopProgress();
if (response.isSuccess()) {
if (response.body() != null) {
if (response.body().get(0).getStatus() > 0) {
String json = gson.toJson(response);
System.out.println(json);
artCode = response.body().get(0).getItemcode();
cost = response.body().get(0).getPrice();
String desc = response.body().get(0).getDescription();
image_url = response.body().get(0).getURL();
Double d = response.body().get(0).getStock();
Double aDouble = new Double(d);
int i = aDouble.intValue();
qty = String.valueOf(i);
if (qty.equals("0")) {
stock_status.setText("Not In Stock");
stockAvailibility.setImageResource(R.mipmap.stockunavailable);
quantity_txt.setVisibility(View.GONE);
qtyText.setVisibility(View.GONE);
addCart.setVisibility(View.GONE);
} else {
stockAvailibility.setImageResource(R.mipmap.stock_image);
}
code.setText(artCode);
price.setText("Euro" + "" + cost);
productDescription = (ExpandableTextView) findViewById(R.id.expand_text_view);
productDescription.setText(desc);
name.setText(itemName);
stock.setText("Units :" + " " + qty);
Picasso.with(context).load(image_url).resize(240, 120).into(productImage);
} else {
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage(response.body().get(0).getResponse())
.setCancelable(false)
.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
//do things
}
});
AlertDialog alert = builder.create();
alert.show();
//Toast.makeText(context, response.body().get(0).getResponse(), Toast.LENGTH_SHORT).show();
}
}
}
}
@Override
public void onRetrofitTaskFailure(Throwable t) {
stopProgress();
//Toast.makeText(ProductDetailActivity.this,"Fail to load Data",Toast.LENGTH_LONG).show();
finish();
}
public static void hideKeyboard(Context ctx) {
InputMethodManager inputManager = (InputMethodManager) ctx
.getSystemService(Context.INPUT_METHOD_SERVICE);
// check if no view has focus:
View v = ((Activity) ctx).getCurrentFocus();
if (v == null)
return;
inputManager.hideSoftInputFromWindow(v.getWindowToken(), 0);
}
}
<强> gulpfile.js
Process: com.jbm.jbmcustomer, PID: 9188
java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.res.Resources$Theme android.content.Context.getTheme()' on a null object reference
at android.app.AlertDialog.resolveDialogTheme(AlertDialog.java:222)
at android.app.AlertDialog.<init>(AlertDialog.java:200)
at android.app.AlertDialog.<init>(AlertDialog.java:196)
at android.app.AlertDialog.<init>(AlertDialog.java:141)
at android.app.ProgressDialog.<init>(ProgressDialog.java:77)
at com.jbm.jbmcustomer.fragment.CartFragment.showProgreass(CartFragment.java:179)
at com.jbm.jbmcustomer.fragment.CartFragment.delItemCart(CartFragment.java:172)
at com.jbm.jbmcustomer.adapter.AdapterShowCart$1.onClick(AdapterShowCart.java:80)
at android.view.View.performClick(View.java:5198)
at android.view.View$PerformClick.run(View.java:21147)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:148)
at android.app.ActivityThread.main(ActivityThread.java:5417)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
除了一件事，你的代码很好。 Vue JS不建议使用body元素作为vue js root。
提供的元素仅用作安装点。与Vue不同 1.x，在所有情况下，安装的元素将被Vue生成的DOM替换。因此，不建议将根实例安装到
<强>代码
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch",
"slate": "rimraf node_modules && npm install",
"clean": "rimraf public/css/app.css public/css/app.css.map public/js/app.js && npm run dev"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.1",
"laravel-elixir": "^6.0.0-15",
"laravel-elixir-browsersync-official": "^1.0.0",
"laravel-elixir-vue-2": "^0.3.0",
"laravel-elixir-webpack-official": "^1.0.10",
"lodash": "^4.17.2",
"moment": "^2.17.1",
"vue": "^2.1.6",
"vue-resource": "^1.0.3",
"vuex": "^2.1.1"
}
}
和const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(mix => {
mix
.sass('app.scss')
.webpack('main.js');
});
<body>
<div class="container" id="app"> <!-- Mind the id attached -->
<div class="content">
<div class="title">
<p>@{{ message }}</p>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>