demo

A Simple Vue Project Build With Webpack

Create Project#

1
2
mkdir vue-webpack-example
cd vue-webpack-example/

Initialize Project#

1
npm init
1
2
3
4
5
6
7
8
9
package name: (vue-webpack-example)
version: (1.0.0)
description: A Simple Vue Project Build With Webpack
entry point: (index.js) src/index.js
test command:
git repository: https://github.com/ganlvtech/vue-webpack-example
keywords: vue webpack example demo
author: Ganlv
license: (ISC) MIT

Requirements#

1
2
npm install vue --save
npm install webpack vue-template-compiler vue-loader --save-dev

Files#

  • /
    • index.html
    • webpack.config.js
    • src/
      • index.js
      • App.vue
      • components/
        • MyComponent.vue
index.htmlview raw
1
2
<div id="app"></div>
<script src="/dist/bundle.js"></script>
src/index.jsview raw
1
2
3
4
5
6
7
8
9
import App from './App.vue';
import Vue from 'vue';

const vm = new Vue({
  el: '#app',
  render(h) {
    return h(App);
  },
})
src/App.vueview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
    <div id="app">
        <h1>Hello, world!</h1>
        <my-component />
        <my-component msg="A message" />
    </div>
</template>

<script>
import MyComponent from "./components/MyComponent.vue";

export default {
  components: {
    "my-component": MyComponent
  }
};
</script>
src/components/MyComponent.vueview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
    <div>
        <h2>My component</h2>
        <p>{{ msg }}</p>
    </div>
</template>

<script>
export default {
  props: {
    msg: {
      default: "default message",
      type: String
    }
  }
};
</script>
webpack.config.jsview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader'
    }]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

Webpack build#

1
webpack

Visit the website#

1
2
npm install http-server -g
http-server

Visit http://127.0.0.1:8080/