GitHub - Binaryify/vue-loader-example: vue-loader-example
source link: https://github.com/Binaryify/vue-loader-example
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
vue-loader example
Example using vue-loader with Webpack.
Setup
# 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')()]
}
<style scoped lang="scss">
.red{
.test{
color:blue !important;
transform:rotateX(30deg) rotateY(30deg) translateY(50px);
}
}
</style>
<!-- retult: -->
<style>
.red .test[_v-3def8906]{
color: blue !important;
-webkit-transform: rotateX(30deg) rotateY(30deg) translateY(50px);
transform: rotateX(30deg) rotateY(30deg) translateY(50px);
}
</style>
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:
{ 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:
// 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:
<style lang="stylus"> /* use stylus here */ </style>
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:
<style lang="sass?outputStyle=expanded"> /* use sass here with expanded output */ </style>
Scoped CSS
Experimental. Requires
vue-loader
^4.0.0
You can add the scoped
attribute to a <style>
block to make it scoped to the current component. A few things to take note:
-
You can include both scoped and non-scoped styles in the same component.
-
A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.
-
Partials are not affected by scoped styles.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK