https://github.com/binaryify/vue-loader-example
vue-loader-example
https://github.com/binaryify/vue-loader-example
Last synced: 11 months ago
JSON representation
vue-loader-example
- Host: GitHub
- URL: https://github.com/binaryify/vue-loader-example
- Owner: Binaryify
- Created: 2015-11-09T10:21:14.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-12-29T14:54:44.000Z (about 10 years ago)
- Last Synced: 2025-04-17T16:03:58.183Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 21.5 KB
- Stars: 17
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-loader example
> Example using [vue-loader](https://github.com/vuejs/vue-loader) with [Webpack](http://webpack.github.io).
## Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm test
```
### sass/scss&postcss
```
vue: {
loaders: {
js: 'babel!eslint',
scss: 'style!css!sass!postcss'
},
postcss: [require('cssnext')(),require('postcss-nested')(),require('postcss-mixins')()]
}
.red{
.test{
color:blue !important;
transform:rotateX(30deg) rotateY(30deg) translateY(50px);
}
}
.red .test[_v-3def8906]{
color: blue !important;
-webkit-transform: rotateX(30deg) rotateY(30deg) translateY(50px);
transform: rotateX(30deg) rotateY(30deg) translateY(50px);
}
```
#### ES2015 by Default
`vue-loader` automatically applies Babel transforms to the JavaScript inside `*.vue` components. Write ES2015 today!
The default Babel options used for Vue.js components are:
``` js
{
presets: ['es2015'],
plugins: ['transform-runtime']
}
```
If you wish to mofidy this, you can add a `babel` field in your webpack config, which will be merged with the default options. For example:
``` js
// webpack.config.js
module.exports = {
// other configs...
babel: {
// enable stage-0 features, make sure to install
// babel-preset-stage-0
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
}
}
```
#### Using Per-file Pre-processors
If you only want to use pre-processors in a specific file, you can add an inline `lang` attribute to a language block:
``` html
/* use stylus here */
```
Note you will have to install `stylus-loader` so that Webpack can handle the compilation. The `lang` attribute will be used to automatically locate the loader to use, and you can pass Webpack loader queries in it as well:
``` html
/* use sass here with expanded output */
```
#### Scoped CSS
> Experimental. Requires `vue-loader` ^4.0.0
You can add the `scoped` attribute to a `` block to make it scoped to the current component. A few things to take note:
1. You can include both scoped and non-scoped styles in the same component.
2. A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.
3. Partials are not affected by scoped styles.