First let's create a directory, initialize npm, and install webpack locally:
mkdir vue-sequence-demo && cd vue-sequence-demo
npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save vue-sequenceNow we'll create the following directory structure and contents:
project
vue-sequence-demo
|- package.json
|- webpack.config.js
|- index.html
|- index.jsindex.js
import Vue from 'vue'
import 'vue-sequence/dist/main.css'
import VueSequence from 'vue-sequence'
Vue.component('seq-diagram', VueSequence.SeqDiagram)
window.Vue = Vueindex.html
<html>
<head>
<title>Vue Sequence Demo</title>
</head>
<body>
<div id="diagram">
<seq-diagram :code="code"></seq-diagram>
</div>
</body>
</html>webpack.config.js
const path = require('path');
module.exports = {
entry: './index.js',
node: { fs: 'empty' },
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: '.',
},
resolve: {
extensions: ['.js'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
};package.json
{
"name": "vue-sequence-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.7",
"style-loader": "^0.18.2",
"webpack": "^3.5.6",
"webpack-dev-server": "^2.7.1"
},
"dependencies": {
"vue-sequence": "^0.3.4"
}
}
Now, let's run the application:
For development
npm run install
webpack
npm run startTest for deployment (deploy the dist folder)
webpack
http-server dist