Use vue-seuqnce in your own project

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-sequence

Now we'll create the following directory structure and contents:

project

  vue-sequence-demo
  |- package.json
  |- webpack.config.js
  |- index.html
  |- index.js

index.js

import Vue from 'vue'
import 'vue-sequence/dist/main.css'
import VueSequence from 'vue-sequence'

Vue.component('seq-diagram', VueSequence.SeqDiagram)
window.Vue = Vue

index.html

<html>
  <head>
    <title>Vue Sequence Demo</title>
  </head>
  <body>
    <div id="diagram">
      <seq-diagram :code="code"></seq-diagram>
    </div>
    <script src="./dist/bundle.js"></script>
    <script>
      new Vue({
        el: '#diagram',
        data: { code: 'A.methodA()' }
      })
    </script>
  </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",
  },
  "keywords": [],
  "author": "",
  "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:

npm run start

PreviousMy Awesome API NextActor in sequence diagram

Last updated 7 years ago