- Set up the npm configuration file (package.json)
Below is the npm package I will use:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^6.0.0-14",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"vuex": "^2.1.1"
}
}
- Install the npm package
Open a command prompt and go to the root folder of your application and
install the npm packages set from your package.json file using the command
‘npm install’, without the quotes.
- Set up Gulp
Once the npm package is installed you may now set up the Gulp file. You
will need to add a Gulp configuration file (gulpfile.js). Later on
we will create the Vue JS which we will call vueApp.js
with the code below. The first argument is the public
output directory and the other one is the source directory. For more
details on Webpack click here.
var elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir(function (mix) {
mix.webpack('vueApp.js', 'wwwroot/js/dist', 'wwwroot/js');
});
- Create the Vue JS file
In your ASP.NET Core web app project solution explorer go to wwwroot
and add a ‘js’ folder and if it does not exist then add again a new
folder named ‘dist’. Now once the folder setup is complete add a new
JavaScript file in the ‘js’ folder named ‘vueApp.js’.
- Start coding in your Vue JS file
You may now start coding. In the example below we will be displaying
an alert to indicate that Vue.js is running.
import Vue from 'vue'
new Vue(
{
el: '#app',
data() {
message:'hello world using Vue.js on ASP.NET Core MVC.'
},
mounted() {
console.log(this.message);
}
});
- Apply Vue JS to your Razor view or HTML
Open your layout page and wrap the content of your body tag with a div
and an id of ‘app’. We will use ‘app’ since that is the id tag we used
in our sample code from step 5. The name ‘app’ is not required and you may
change it to your desired name. Lastly add a reference to the Vue JS file.
Be sure to move outside the ‘app’ div the script references to prevent error.
vue-moment在未编译的环境中出现问题实际上是一个错误（bug）。参考链接：https://github.com/brockpetrie/vue-moment/issues/11 - https://dev59.com/G5rga4cB1Zd3GeqPuO5H - Gerardo Grignolivue-webpack-boilerplate吗？ - Gerardo Grignoli