VueJS 2 + ASP.NET MVC 5
Welcome to Vue.js development! Yes, you are correct, you need something to translate the import statements into JavaScript that the browsers can handle. The most popular tools are webpack and browserify.
You are also using a .vue file, which needs to be converted (with vue-loader) before the browser can pick it up. I am going to lay out how to do this, and set up webpack, which involves a few steps. First, the HTML we're working with looks something like this:
<html> <head> </head> <body> <div class="container-fluid"> <div id="app"> { { message } } </div> </div> <script src="./dist.js"></script> </body></html>Our goal is to use webpack to bundle / compile App.vue and app.js into dist.js. Here is a webpack.config.js file that can help us do that:
module.exports = { entry: './app.js', output: { filename: 'dist.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' } ] }}This configuration says, "start in app.js, replace import statements as we come across them, and bundle it into a dist.js file. When webpack sees a .vue file, use the vue-loader module to add it to dist.js."
Now we need to install the tools / libraries that can make this happen. I recommend using npm, which comes with Node.js. Once you have npm installed, you can put this package.json file in your directory:
{ "name": "getting-started", "version": "1.0.0", "scripts": { "build": "webpack" }, "dependencies": { "css-loader": "^0.28.7", "vue": "^2.4.2", "vue-loader": "^13.0.4", "vue-resource": "^1.3.3", "vue-router": "^2.7.0", "vue-template-compiler": "^2.4.2", "webpack": "^3.5.5" }}And do the following:
- Run
npm installto get all of the packages. - Run
npm run-script buildto generate your dist.js file via webpack.
Note in the example for this question, router is undefined in app.js, but here is a fixed-up file:
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue'var router = new VueRouter();new Vue({ el: '#app', router, render: h => h(App), data: { message: 'Hello Vue! in About Page' }});That should be it! Let me know if you have any questions.