Vue maker

Configuration and scripts for Create Vue App.

Version: 1.0.15 Updated: 01/14/2019

By: hm496 License: MIT

Downloads Last 30 Days: 134

Install

npm i vue-maker
yarn add vue-maker

Repository: https://github.com/hm496/vue-maker

CDNs

bundle.run: https://bundle.run/vue-maker

jsDelivr: https://cdn.jsdelivr.net/npm/vue-maker

unpkg: https://unpkg.com/vue-maker

Vue Maker

Version License

Create Vue apps with no build configuration.

vue vue-router vuex vuex-router-sync less postcss

Quick Start

npm i -g vue-maker
mkdir my-app
cd my-app
vue-maker init
vue-maker start

Build without sourcemap

vue-maker build

Build with sourcemap

vue-maker build --sourcemap

Directory structure

my-app
├── package.json
├── .gitignore
└── src
    ├── App.vue
    ├── index.html
    ├── index.js
    └── index.less

Configure homepage | buildPath | proxy | alias | externals | port | devtool | gzip | analysis | srchash

in package.json:
{
  "homepage": "./",
  "buildPath": "build",
  "proxy": {
    "['/api']": {
      "target": "http://localhost:3000",
      "secure": false,
      "changeOrigin": true
    }
  },
  "WEBPACK_CONFIG": {
    "srchash": false,
    "gzip": false,
    "analysis": false,
    "alias": {
      "@template": "./"
    },
    "devtool": "cheap-module-eval-source-map",
    "externals": {}
  },
  "DEV_SERVER_CONFIG": {
    "port": 3000
  }
}

Default internal config

{
  "WEBPACK_CONFIG": {
    "alias": {
      "@": "./src"
    }
  },
  "DEV_SERVER_CONFIG": {
    "port": 3000
  }
}

Included modules

vue
vuex
vue-router
vuex-router-sync

alloyfinger
fetch-jsonp

Included polyfills

Promise
fetch
Object.assign

Installed webpack loaders

babel-loader
vue-loader
vue-style-loader
style-loader
postcss-loader
css-loader
less-loader
file-loader
url-loader

Babel presets

const plugins = [
  require.resolve('babel-plugin-transform-vue-jsx'),
  require.resolve('babel-plugin-transform-es2015-destructuring'),
  require.resolve('babel-plugin-transform-class-properties'),
  require.resolve('babel-plugin-transform-decorators-legacy'),
  [
    require.resolve('babel-plugin-transform-object-rest-spread'),
    {
      useBuiltIns: true,
    },
  ],
  [
    require.resolve('babel-plugin-transform-runtime'),
    {
      helpers: false,
      polyfill: false,
      regenerator: true,
    },
  ],
];

module.exports = {
    presets: [
      [
        require.resolve('babel-preset-env'),
        {
          targets: {
            ie: 9,
            uglify: true,
          },
          useBuiltIns: false,
          modules: false,
        },
      ],
      require.resolve('babel-preset-stage-0'),
    ],
    plugins: plugins.concat([
      [
        require.resolve('babel-plugin-transform-regenerator'),
        {
          async: false,
        },
      ],
      require.resolve('babel-plugin-syntax-dynamic-import'),
    ]),
}

Postcss plugins

[
  require('postcss-flexbugs-fixes'),
  autoprefixer({
    browsers: [
    '>1%',
    'last 4 versions',
    'Firefox ESR',
    'not ie < 9',
    ],
  }),
]
Categories: Vue js
Tags: vue