下面是翻译：来源于 http://vue-loader.vuejs.org/en/workflow/testing.html
*.vue
每个.vue文件由3个顶级标签组成。 <template> <script> <style>
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
vue-loader会解析该文件， pipe他们去别的loader，最终把他们声明为一个commonjs的组件，它的module.exports是一个组件对象。
类似下面：
其实就是一个普通的包含某些特殊key的js对象
const Foo = {
template: '<div v-on:click="increase">foo{{count1}}</div>',
// 该组件的私有数据
data:function(){
return {count:10};
},
computed:{
done:function(){
return this.$store.getters.doneTodos;
},
count1:function(){
return this.$store.state.count;
}
},
methods:{
increase:function(){
this.$store.commit("increase",4);
}
}
}
vue-loader支持使用非默认语言，比如能编译为html的模板语言，通过设置语言标签块的lang属性 。比如你可以想下面这样设置后使用sass语言:
<style lang="sass"> /* write SASS! */ </style>
<template> 默认是html语言 每一个*.vue文件最多只能包含一个template标签 内容会被解析为一个字符串， 被用作编译出来的组件的template 选项 <script> 执行在commonjs环境中，故可以使用rquire来获得其他依赖。并且因为es2015的支持，可以使用import 和export语法 该script一定要导出一个vue的组件的配置对象，一个普通的js对象被支持 <style> 默认是css语言，多个style标签是被支持的
也可以把一个组件拆分为不同的文件，然后还有src 属性来导入不同的部分
<template src="./template.html"></template> <style src="./style.css"></style> <script src="./script.js"></script>
es2015
如何导入一个模块
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
components: {
ComponentA,
ComponentB
}
}
</script>
此时你可以在组件内部使用 <complate-a>组件 .js 文件vue-loader默认也会为你编译
scoped css
当一个style标签用于scoped属性时，它的css属性将会只被该组件所拥有，默认是加了一个随机的id
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
会被编译为：
<style>
.example[_v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" _v-f3f3eg9>hi</div>
</template>
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
Hot Reload
热重载不仅仅是当你编辑一个.vue文件时，在不重载整个页面的情况下把你的页面里面的那个组件实例给替换掉，它甚至保存着你的应用和组件的当前状态
使用loader
vue-cli会自动根据lang属性调用对应的loader来处理 例如 如果要使用sass的haul
npm install sass-loader node-sass --save-dev <style lang="sass"> /* write sass here */ </style>
JavaScript会默认调用babel-loader来处理 当然你可以改变它：
npm install sass-loader node-sass --save-dev
<style lang="sass">
/* write sass here */
</style>
html的话 因为是返回一个函数，而不是一个字符串 所以：
npm install pug --save-dev <template lang="pug"> div h1 Hello world! </template>
URL Handling
background:url和img src css @import都会被当做一个模块依赖 比如url('a.png')会被翻译为requrie('a.png')
<img src="../image.png">
会变为：
createElement('img', { attrs: { src: require('../image.png') }})
因为.png不是一个js文件，所以你需要安装file-loader去处理他们。vue-cli也已经给你设置好了
好处
file-loader allows you to designate where to copy and place the asset file, and how to name it using version hashes for better caching. Moreoever, this also means you can just place images next to your *.vue files and use relative paths based on the folder structure instead of worrying about deployment URLs. With proper config, Webpack will auto-rewrite the file paths into correct URLs in the bundled output.
url-loader allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce the amount of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back to file-loader.
eslint-loader可以自动杂你开发过程中当你保存时lint你的vue中的js标签里面代码
一个*.vue文件里面包含三个顶级标签.
<template>; <script> <style>
先读取 template编译之后会变成组件的template选项。然后vue实例来进行导入。
下面是一个测试：
先引入官方的vue和router组件。
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
然后 绑定路由，初始化vm实例：
<body>
<div id="app">
<router-view ></router-view>
</div>
</body>
<script>
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }
// Vue.component('topic', {
// template:"<span>这是topic</span>"
// })
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/bar',
name:"bar",
component: Bar
},
{ path: '/foo',
name:"foo",
component: Foo
},
{
path: '/other',
components: {
default: Baz,
a: Bar,
b: Foo
}
}
]
})
window.a=new Vue({
router
}).$mount("#app");
测试代码：
a.push({name:bar});
a.push({name:'foo'});
结果如下：
可以看见。对应的路由到的组件被渲染成功了