ducksoupdev / vue-webpack-typescript Goto Github PK

A Vue, Webpack, Typescript, Bootstrap setup with hot reload, dynamic imports, unit testing, code coverage, sass, uncss and bundling/minification.

JavaScript 38.21% HTML 7.34% TypeScript 53.84% CSS 0.61%

vuejs2 typescript mocha webpack3 typescript2

vue-webpack-typescript's Introduction

webpack-typescript

A Vue 2.5, Webpack 3.10, Typescript 2.7, Bootstrap 4.0 setup with hot reload, dynamic imports, unit testing, code coverage, sass and bundling/minification.

See the changelog for updates.

Usage

This is a project template for vue-cli < 3.x.

$ npm install -g vue-cli
$ vue init ducksoupdev/vue-webpack-typescript my-project
$ cd my-project
$ npm install
$ npm run dev

What's Included

npm run dev: Webpack + Typescript with config for source maps & hot-reload
npm test: Mocha unit tests
npm run test:debug: Debug Mocha unit tests in Chrome
npm run test:watch: Fast feedback Mocha unit tests with hot-reload
npm run coverage: Karma coverage reporter
npm run lint: Lint all Typescript files
npm run build: build with HTML/CSS/JS minification, code splitting and icon generation
npm run ci:teamcity: Teamcity CI integration
npm run ci:jenkins: Jenkins CI integration

vue-webpack-typescript's People

Contributors

Stargazers

Watchers

Forkers

coding2012 ethanrubio rorisme paulvanbladel xuanzhaotech winsan-zhang aheinrich amukas zombiqwerty lanceden simon0191 qingdao-frontend spiffytech dotnetpart napon bonomme silverlovesl dlb46 ka1wa pansapiens jeremy-kang nbrian zoosky leocodes21 aleishus kawabet cho45 haoliqiang looknd kamarkiewicz xiaoping0x wcxaaa kazyamaz200 jackie19 peterjgrainger fk1blow duke-lv mayyingzi soon08 davidmeirlevy chrisellis2005 wwoods clfsoft spqr-im rubythonode weijiehuang timpcc notkid hellowor1d sugerpocket lottid zuoez02 spboyer paul-javs wasserholz aalmazan hochi-vivovii arihantdaga pietrovich shen-bing santiihoyos lvillasica sionmike mengmenglv iwe7 sunjtao danreg dxlani stepanve webppei astroanu jholt456 honechris digideskio bloxedmain crazilazi noahle lx1036 suvidh-shetty-zz nick121212 terencet kekevin kemalelci taopengfei xiaoluozai mxmore zhangqingq377 saldi nult2003 cimbis nku915 hhy5277 yang3406 yinjiefeng hblifeng yongbolu rifttech ranohii bojantuti1 alecperkey

vue-webpack-typescript's Issues

Single file components

I appreciate the work done 👏
However, I was a bit curious if you did not use Single File Component approach deliberately.

Importing additionnal libraries

Hi,

I'm trying to add d3.js to the template, so I did:

npm install  --save d3
npm install  --save-dev @types/d3

then I've imported d3 typings using import d3 from 'd3';

It does compile, but d3.js doesn't get included in the bundle.
I tried to find out how vuejs files are added, but there isn't any explicit reference in the webpack config files, my guess is that awesome-typescript-loader is smart and knows how to retrieve them.

Same with axios, typings and js are resolved without explicit references in config.

My guess is that the problem comes from the fact d3 typings and js are 2 different npm modules.
I need some directions because I'm stuck :)

'npm run dev' fails on fresh install

This is on Ubuntu 16.04. Any suggestions?

> [email protected] copy:bs /home/bjmc/Sandbox/myproject/myproject-web
> ncp node_modules/bootstrap/dist/css/bootstrap.css src/css/bootstrap.css

[0] /home/bjmc/Sandbox/myproject/myproject-web/config/webpack.config.dev.js:15
[0] webpackConfig.plugins = [...webpackConfig.plugins,
[0]                          ^^^
[0] 
[0] SyntaxError: Unexpected token ...
[0]     at exports.runInThisContext (vm.js:53:16)
[0]     at Module._compile (module.js:374:25)
[0]     at Object.Module._extensions..js (module.js:417:10)
[0]     at Module.load (module.js:344:32)
[0]     at Function.Module._load (module.js:301:12)
[0]     at Module.require (module.js:354:17)
[0]     at require (internal/module.js:12:17)
[0]     at Object.<anonymous> (/home/bjmc/Sandbox/myproject/myproject-web/webpack.config.js:1:80)
[0]     at Module._compile (module.js:410:26)
[0]     at Object.Module._extensions..js (module.js:417:10)
[0] webpack-dev-server --hot --inline exited with code 1
--> Sending SIGTERM to other processes..
[1] node-sass --watch --output ./src/css ./src/sass exited with code null

npm ERR! Linux 4.4.0-79-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v4.2.6
npm ERR! npm  v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `cross-env NODE_ENV=development npm run sass && npm run copy:bs && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script 'cross-env NODE_ENV=development npm run sass && npm run copy:bs && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the myproject-web package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development npm run sass && npm run copy:bs && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs myproject-web
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls myproject-web
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/bjmc/Sandbox/myproject/myproject-web/npm-debug.log

DEV/PRO aware build setup

I'm using a proxy table in the regular webpack template (https://github.com/vuejs-templates/webpack/tree/master/template). I can configure that it is only applied in "dev mode".
This is not (yet) possible in vue-webpack-typescript.

I believe that, in general, it should be beneficial to take over as much as possible from the regular vue webpack template. The advantage is two fold:

it will be easier to take over 'progressive insights' when the standard vue template evolves.
it will increase the adoption rate of vue-webpack-typescript because devs will easier see where the differences are and adopt with greater confidence.
Make sense ?

css not minified

Thanks for the template, it's the only one among the ones I saw, not having babel and eslint, looks like the most proper typescript setup so far :)

I've just scaffolded a new project, ran npm run build and I see that dist/css/main.#.css is not minified (though "treeshaken"). I had this warning printed a few times during the build process, not sure if it's important, I'm new to webpack:

    WARNING in ./node_modules/css-loader?{"minimize":true,"sourceMap":true,"importLoaders":2}!./node_modules/postcss-loader/lib?{}!./node_modules/sass-loader/lib/loader.js?{"outputStyle":"expanded","sourceMap":true,"sourceMapContents":true}!./src/sass/main.scss
    (Emitted value instead of an instance of Error)

     ⚠️  PostCSS Loader

    Previous source map found, but options.sourceMap isn't set.
    In this case the loader will discard the source map entirely for performance reasons.
    See https://github.com/postcss/postcss-loader#sourcemap for more information.

On a side note - I think it's worth updating bootstrap to v4.

VueRouter is not a constructor

Fresh pulldown of the template, trying to run npm run dev after installing everything, saw: VueRouter is not a constructor

Looking into it for more details.

Webpack configurations for NPM module bundle

Hi,

As a wish of developing a multi micro-frontends applications, I discovered that the most elegant way of doing it, is to publish micro-frontends as npm packages, and use that inside a main micro-frontend, that can define requested specific versions of components.

In that case, I've made a config file for that specific target, and I will add a PR for it, so others can use it too, after I'll finish investigate how this development process is convenient for me and my team.

Debugging tests doesn't seem to work.

With the webpack template (in vue-cli), I can add following npm script and allow debugging tests. This doesn't work with vue-webpack-typescript template.

"debug- unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --browsers=Chrome --single-run=false --auto-watch",

I tweaked the karma.unit.js file in order to use also Chrome browser, but still no success:
browsers:['Chrome'],
preprocessors: {
'src/test.ts': ['webpack','sourcemap']
},

Obviously, following packages need to be installed
"karma-chrome-launcher": "^2.0.0",
"karma-sourcemap-loader": "^0.3.7",
Any suggestion?

navbar contains data var object, what's the purpose?

navbar.ts contains:
object: { default: string } = { default: 'Default object property!' }; // objects as default values don't need to be wrapped into functions

What's the idea here?
thanks

How about creating few services like LoginService

Any idea about how we can write a stateful loginService which can be used across all components in typescript ? Without creating different instance of it in every component.

'npm run test' Path must be a string

Got an error wen try to run npm run test

22 04 2017 15:51:05.931:ERROR [plugin]: Error during loading "d:\Projects\2017\vue\simple-app\node_modules/karma-phantomjs-launcher" plugin:
  Path must be a string. Received null

START:

[at-loader] Using [email protected] from typescript and "tsconfig.json" from d:\Projects\2017\vue\simple-app/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.217 sec.
22 04 2017 15:51:09.116:INFO [karma]: Karma v1.5.0 server started at http://0.0.0.0:9876/
22 04 2017 15:51:09.119:INFO [launcher]: Launching browser Chrome with unlimited concurrency
22 04 2017 15:51:09.120:ERROR [karma]: Found 1 load error

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "test"
npm ERR! node v7.9.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `cross-env NODE_ENV=development karma start karma.unit.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script 'cross-env NODE_ENV=development karma start karma.unit.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the simple-app package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development karma start karma.unit.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs simple-app
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls simple-app
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\My\AppData\Roaming\npm-cache\_logs\2017-04-22T05_51_09_195Z-debug.log

Node: 7.9.0
npm: 4.2
Windows 10

feature suggestion: add storybook

These work, for Vue + Typescript + Webpack:

./.storybook/config.js:

import { configure } from '@storybook/vue'

// automatically import all files ending in *.stories.js
const req = require.context('../src/stories', true, /.stories.ts$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module)

./.storybook/webpack.conf.js:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const genDefaultConfig = require('@storybook/vue/dist/server/config/defaults/webpack.config.js');

module.exports = (storybookBaseConfig, configType) => {
  const config = genDefaultConfig(storybookBaseConfig, configType);

  config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.less', '.scss', '.sass', '.html')

  config.module.rules.push({
    test: /\.ts$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true // used with ForkTsCheckerWebpackPlugin
        },
      }
    ],
  })

  config.plugins.push(new ForkTsCheckerWebpackPlugin())

  return config;
};

How to include vue-meta to template?

Hello. Thanks for your work! Awesome.

Question: how to include vue-meta (Vue plugin) to your template?

I already add to main.ts this:

import Meta from 'vue-meta';

...

Vue.use(Meta, {
  keyName: 'head', // the component option name that vue-meta looks for meta info on.
  attribute: 'data-vue-meta', // the attribute name vue-meta adds to the tags it observes
  ssrAttribute: 'data-vue-meta-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
  tagIDKeyName: 'vmid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
});

...

And add this to home.ts component:

...

export class HomeComponent extends Vue {

  ...

  static head() {
    return {
      title: 'Test'
    }
  }

}

But this not working, don't show over written title..

Unable to exclude certain paths from webpack build

Create a fresh install of this boilerplate:

vue init ducksoupdev/vue-webpack-typescript example
cd example
npm install

Add the following to a file outside the src directory, for example server/server.ts

const wrong: notatype = 'test'

Note the invalid typescript syntax.

Now try npm run dev

You will see the error:

ERROR in [at-loader] ./server/server.ts:1:14
    TS2304: Cannot find name 'notatype'.
Child html-webpack-plugin for "index.html":
     1 asset
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 425 bytes {0} [built]
webpack: Failed to compile.

In the webpack.config.base.js, I try to exclude this folder. e.g.

    {
      test: /\.ts$/,
      exclude: /node_modules/,
      enforce: 'pre',
      loader: 'tslint-loader',
      exclude: ['./server']
    },
    {
      test: /\.ts$/,
      exclude: /node_modules/,
      loader: 'awesome-typescript-loader',
      exclude: ['./server']
    },

But it still appears to be bundling it.

Am I missing something?

Hot Replacement Not Working

It seems that the hot replacement for modules is not working?
If I change the text in an html file, the whole application reloads, and I lose all the state.
I'm using the default installation.

Need to include base tag in index.html

I think we need to include this in index.html just before ending head tag.
<base href="/" />

ts-loader throws error

When I run "npm run dev", ts-loader throws error.

TypeError: Cannot convert undefined or null to object

OS: Windows 10


> [email protected] dev O:\Dropbox\development\code\tryouts\vuejs\my-project
> cross-env NODE_ENV=development npm run sass && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"


> [email protected] sass O:\Dropbox\development\code\tryouts\vuejs\my-project
> node-sass --output ./src/css ./src/sass

Rendering Complete, saving .css file...
Wrote CSS to O:\Dropbox\development\code\tryouts\vuejs\my-project\src\css\main.css
Wrote 1 CSS files to O:\Dropbox\development\code\tryouts\vuejs\my-project\src\css
[0] Project is running at http://localhost:8081/
[0] webpack output is served from /
[0] Content not from webpack is served from ./src
[0] 404s will fallback to /index.html
[0] webpack: wait until bundle finished: /
[0] ts-loader: Using [email protected] and O:\Dropbox\development\code\tryouts\vuejs\my-project\tsconfig.json
[0] Hash: aaaeebcc443542d94e3f
[0] Version: webpack 2.2.1
[0] Time: 14217ms
[0]                  Asset      Size  Chunks                    Chunk Names
[0]                main.js    725 kB    0, 1  [emitted]  [big]  main
[0]            main.min.js    281 kB    1, 0  [emitted]  [big]  main.min
[0]            main.js.map    880 kB    0, 1  [emitted]         main
[0]         main.min.js.gz   94.7 kB          [emitted]
[0] ../assets/img/logo.png   6.85 kB          [emitted]
[0]        ../css/main.css  81 bytes          [emitted]
[0] chunk    {0} main.js, main.js.map (main) 686 kB [entry] [rendered]
[0]     [8] ./~/vue/dist/vue.common.js 226 kB {0} {1} [built]
[0]    [45] (webpack)/hot/emitter.js 77 bytes {0} {1} [built]
[0]    [46] ./src/main.ts 677 bytes {0} {1} [built]
[0]    [47] (webpack)-dev-server/client?http://localhost:8081 5.28 kB {0} {1} [built]
[0]    [48] (webpack)/hot/dev-server.js 1.57 kB {0} {1} [built]
[0]   [112] ./~/strip-ansi/index.js 161 bytes {0} {1} [built]
[0]   [114] ./src/components/about/index.ts 146 bytes {0} {1} [built]
[0]   [117] ./src/components/list/index.ts 145 bytes {0} {1} [built]
[0]   [119] ./src/components/navbar/index.ts 147 bytes {0} {1} [built]
[0]   [123] ./~/url/url.js 23.3 kB {0} {1} [built]
[0]   [126] ./~/vue-router/dist/vue-router.common.js 56.1 kB {0} {1} [built]
[0]   [127] (webpack)-dev-server/client/overlay.js 3.6 kB {0} {1} [built]
[0]   [128] (webpack)-dev-server/client/socket.js 856 bytes {0} {1} [built]
[0]   [130] (webpack)/hot/log-apply-result.js 1.02 kB {0} {1} [built]
[0]   [131] multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.ts 52 bytes {0} {1} [built]
[0]      + 117 hidden modules
[0] chunk    {1} main.min.js (main.min) 686 kB [entry] [rendered]
[0]     [8] ./~/vue/dist/vue.common.js 226 kB {0} {1} [built]
[0]    [45] (webpack)/hot/emitter.js 77 bytes {0} {1} [built]
[0]    [46] ./src/main.ts 677 bytes {0} {1} [built]
[0]    [47] (webpack)-dev-server/client?http://localhost:8081 5.28 kB {0} {1} [built]
[0]    [48] (webpack)/hot/dev-server.js 1.57 kB {0} {1} [built]
[0]   [112] ./~/strip-ansi/index.js 161 bytes {0} {1} [built]
[0]   [114] ./src/components/about/index.ts 146 bytes {0} {1} [built]
[0]   [117] ./src/components/list/index.ts 145 bytes {0} {1} [built]
[0]   [119] ./src/components/navbar/index.ts 147 bytes {0} {1} [built]
[0]   [123] ./~/url/url.js 23.3 kB {0} {1} [built]
[0]   [126] ./~/vue-router/dist/vue-router.common.js 56.1 kB {0} {1} [built]
[0]   [127] (webpack)-dev-server/client/overlay.js 3.6 kB {0} {1} [built]
[0]   [128] (webpack)-dev-server/client/socket.js 856 bytes {0} {1} [built]
[0]   [130] (webpack)/hot/log-apply-result.js 1.02 kB {0} {1} [built]
[0]   [131] multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.ts 52 bytes {0} {1} [built]
[0]      + 117 hidden modules
[0] webpack: Compiled successfully.
[0] webpack: Compiling...
[0] webpack: wait until bundle finished: /css/main.css
[0] O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\ts-loader\dist\watch-run.js:15
[0]         Object.keys(watcher.mtimes)
[0]                ^
[0]
[0] TypeError: Cannot convert undefined or null to object
[0]     at Function.keys (native)
[0]     at Compiler.<anonymous> (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\ts-loader\dist\watch-run.js:15:16)
[0]     at next (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\tapable\lib\Tapable.js:140:14)
[0]     at Compiler.Shared.share.compilerInvalid (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\webpack-dev-middleware\lib\Shared.js:144:5)
[0]     at next (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\tapable\lib\Tapable.js:140:14)
[0]     at Compiler.<anonymous> (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\webpack\lib\CachePlugin.js:32:5)
[0]     at Compiler.applyPluginsAsyncSeries (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\tapable\lib\Tapable.js:142:13)
[0]     at Watching._go (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\webpack\lib\Compiler.js:43:16)
[0]     at Watching.invalidate (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\webpack\lib\Compiler.js:121:8)
[0]     at Watching.<anonymous> (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\webpack\lib\Compiler.js:106:8)
[0]     at EventEmitter.<anonymous> (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\webpack\lib\node\NodeWatchFileSystem.js:44:4)
[0]     at EventEmitter.g (events.js:260:16)
[0]     at emitTwo (events.js:87:13)
[0]     at EventEmitter.emit (events.js:172:7)
[0]     at EventEmitter._onTimeout (O:\Dropbox\development\code\tryouts\vuejs\my-project\node_modules\watchpack\lib\watchpack.js:139:7)
[0]     at Timer.listOnTimeout (timers.js:92:15)
[0] webpack-dev-server --hot --inline exited with code 1
--> Sending SIGTERM to other processes..
[1] node-sass --watch --output ./src/css ./src/sass exited with code 1

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Users\\ooo\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v4.4.3
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `cross-env NODE_ENV=development npm run sass && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'cross-env NODE_ENV=development npm run sass && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the my-project package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development npm run sass && concurrently --kill-others "webpack-dev-server --hot --inline" "node-sass --watch --output ./src/css ./src/sass"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs my-project
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls my-project
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\ooo\AppData\Roaming\npm-cache\_logs\2017-02-22T15_05_30_614Z-debug.log

support dynamic imports ?

https://webpack.js.org/guides/code-splitting/

Support for Font Awesome

I was trying to add support for Font Awesome, however I cannot get the font files to be referred correctly:

I have the following updates:

"copy:fa": "ncp node_modules/font-awesome/css/font-awesome.css src/css/font-awesome.css && ncp node_modules/font-awesome/fonts/ src/fonts/"

"build": "cross-env NODE_ENV=production npm run clean && npm run test && npm run sass && npm run copy:bs && npm run copy:fa && npm run build:parts && npm run clean:css && npm run process:html"

However the disted CSS still refers to the fonts from within /src directory. I am pretty sure we need to update the webpack config somehow, but definitely not an expert on it so I'm stuck at this step.

Would love to hear your thoughts.

Thanks

Uglify-js is not included and is not es6-compatible

Your webpack is using uglify for prod build, but neither it nor uglifyjs-webpack-plugin are included in package.json.

Also, UglifyJS is not es6 compatible, so it's probably better to use something else anyway.

Sorry if I got something wrong, I'm new to this stuff.

Possibility to use scoped styles

Hey, first of all awesome work on this template!
I was wondering if there will be support for scoped styles in the future?
Because *.vue files already natively support <style scoped src="./nameOfComponent.scss"></style>.
I mean I love the way the import "./nameOfComponent.scss" works but maybe add styles as a component parameter just like template.

Proposed idea:

@Component({
    template: require('./home.html'),
    styleUrls: [ './home.scss', './secondHomeStyles.scss' ] //how angular2 does it
})

or this way

@Component({
    template: require('./home.html'),
    style: require('./home.scss') //an approach more similar to the template.
})

I don't know if this is at all feasible or if there's already a workaround that doesn't involve switching to vue files.

Any idea why Vue is imported as "import * as Vue from 'vue'' ?

Very nice project and clever test approach.

I'm just wondering why we have e.g. in main.ts
import * as Vue from 'vue';
rather than import Vue from 'vue' as it

Warm regards
paul.

Single File Components

Was wondering if this template would work with TS and Single File Components. I'm brand new to VUE and my initial attempt failed but it is likely to just where I am on the learning curve.

Sorry to post this as an issue as it's more of a question

Sass hot reload don't seem to be working

Hi,

Editing main.scss while running the dev server doesn't reload the css, and having this message in the console:

=> changed: D:\dev\my-project\src\sass\main.scss
{
  "status": 3,
  "message": "%",
  "formatted": "Internal Error: %\n"
}

I tried with a fresh template installed via vue-cli. My npm has nothing installed globally except vue-cli.
Can anyone try and confirm the behavior?