分享vue脚手架工具,vue-cli -

换个号韩国红果果

浏览: 48022 次
性别:
来自: 武汉

最近访客更多访客>>

lingyu9669

ringphone

qq222196

sdnbleach

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

分享vue脚手架工具,vue-cli

博客分类：

JavaScript

脚手架渲染原理：
下面是翻译：来源于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'});

结果如下：

可以看见。对应的路由到的组件被渲染成功了

查看图片附件

分享到：

vue,vue-router,vux,综合 | 平时chrome调试遇见的浏览器优化

2017-01-04 15:42
浏览 774
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

分享vue脚手架工具,vue-cli

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

分享vue脚手架工具,vue-cli

评论

发表评论

相关推荐

vue

自动配置代理

对话框回调

svg, 支持mouseover

vue 生命周期钩子

vue,vue-router,vux,综合

平时chrome调试遇见的 浏览器优化

百度文库复制方法

js array对象的迭代方法

qq空间刷评论工具

jquery内部链式调用机理

this问题 js

js delete 删除机理以及它的内存泄露问题的解决方案

浮动布局

zoom.js

jquery-avgrund

workmark

jquery

豆瓣电影首页的分析

setTimeout()用法

最近访客更多访客>>

平时chrome调试遇见的浏览器优化