脚手架渲染原理:
下面是翻译:来源于http://vue-loader.vuejs.org/en/workflow/testing.html
*.vue
每个.vue文件由3个顶级标签组成。 <template> <script> <style>
vue-loader会解析该文件, pipe他们去别的loader,最终把他们声明为一个commonjs的组件,它的module.exports是一个组件对象。
类似下面:
其实就是一个普通的包含某些特殊key的js对象
vue-loader支持使用非默认语言,比如能编译为html的模板语言,通过设置语言标签块的lang属性 。比如你可以想下面这样设置后使用sass语言:
<template> 默认是html语言 每一个*.vue文件最多只能包含一个template标签 内容会被解析为一个字符串, 被用作编译出来的组件的template 选项 <script> 执行在commonjs环境中,故可以使用rquire来获得其他依赖。并且因为es2015的支持,可以使用import 和export语法 该script一定要导出一个vue的组件的配置对象,一个普通的js对象被支持 <style> 默认是css语言,多个style标签是被支持的
也可以把一个组件拆分为不同的文件,然后还有src 属性来导入不同的部分
es2015
如何导入一个模块
此时你可以在组件内部使用 <complate-a>组件 .js 文件vue-loader默认也会为你编译
scoped css
当一个style标签用于scoped属性时,它的css属性将会只被该组件所拥有,默认是加了一个随机的id
会被编译为:
Hot Reload
热重载不仅仅是当你编辑一个.vue文件时,在不重载整个页面的情况下把你的页面里面的那个组件实例给替换掉,它甚至保存着你的应用和组件的当前状态
使用loader
vue-cli会自动根据lang属性调用对应的loader来处理 例如 如果要使用sass的haul
JavaScript会默认调用babel-loader来处理 当然你可以改变它:
npm install sass-loader node-sass --save-dev
<style lang="sass">
/* write sass here */
</style>
html的话 因为是返回一个函数,而不是一个字符串 所以:
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编译之后会变成组件的template选项。然后vue实例来进行导入。
下面是一个测试:
先引入官方的vue和router组件。
然后 绑定路由,初始化vm实例:
测试代码:
结果如下:
可以看见。对应的路由到的组件被渲染成功了
下面是翻译:来源于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
2017-06-03 19:41 0比如 假如没有添加上响应式属性的话,那么就会出现b只是一个简 ... -
自动配置代理
2017-02-13 15:42 1497有些时候 手机或者pc上面需要频繁的切换代理与取消代理,感觉切 ... -
对话框回调
2017-01-11 10:26 835今天遇见一个需求 在提交数据时需要同时弹出3个确认菜单,点击了 ... -
svg, 支持mouseover
2017-01-09 18:07 1037今天项目中的需求,是在一个fill后的svg path上面加上 ... -
vue 生命周期钩子
2017-01-07 22:11 1662和生命一样,vue组件创 ... -
vue,vue-router,vux,综合
2017-01-04 17:36 916实例化vue实例时初始化router store 状态管理。触 ... -
平时chrome调试遇见的 浏览器优化
2017-01-04 11:23 409js基础:在一个事件处理器(click)会形成一个闭包,可以访 ... -
百度文库复制方法
2015-11-11 10:24 1132即时对象初始化方法 (function(){ //cod ... -
js array对象的迭代方法
2015-07-16 12:09 639所有方法都接受两个参数:(fn,ctx); 默认的函数里面ct ... -
qq空间刷评论工具
2015-06-25 17:48 825var a=document.getElementsB ... -
jquery内部链式调用机理
2015-06-07 21:17 1047只需要在调用该对象合适(比如下列的setStyles)的方法后 ... -
this问题 js
2015-06-07 21:08 430任何一个函数都可以被当做构造函数使用!并且new了之后一定是返 ... -
js delete 删除机理以及它的内存泄露问题的解决方案
2015-06-02 12:43 879delete删除属性时只是解除了属性与对象的绑定,故当属性值为 ... -
浮动布局
2015-05-13 17:27 0c由于其宽度略大于右边的空格,故不会飘到右边去,会被卡住 恰好 ... -
zoom.js
2015-05-12 19:01 678它的基于bootstrap 的https://raw.gith ... -
jquery-avgrund
2015-05-12 12:31 0先引入这些文件 <link r ... -
workmark
2015-05-10 18:07 451在一个容器当中 指定 ... -
jquery
2015-05-09 16:33 0$(document).ready(function(){ ... -
豆瓣电影首页的分析
2015-05-08 22:48 806网址http://movie.douban.com 1 先上 ... -
setTimeout()用法
2015-05-08 22:31 0setTimeout("$('searchI ...
相关推荐
springboot+vue-cli脚手架开发-实现用户增删改查(前端脚手架代码)
* vue-cli-plugin-qiankun* An Vue-cli3 Plugin for micro-frontend qiankun application 结合 qiankun 快速生成微前端应用的脚手架插件 Features qiankun 接入,子应用打包配置接入 修改 qiankun 官网 demo 中 vue ...
:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目,其中包括Vue I18n和i18n工具和自由软件,其持续的开发完全依靠...
vue-cli的脚手架项目模板有webpack-simple 和 webpack 两种的区别在于webpack-simple 没有包括Eslint 检查等功能 vue-cli的项目结构 . |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建...
Vue事件 v-on vue计算属性&watch vue组件 vue路由 webpack打包 vue-cli-脚手架
1. 如果您已安装 vue-cli2 ,请先删除当前脚手架,否则无法成功安装 vue-cli3 。 npm uninstall vue-cli -g 2. 检查 node.js 版本。 vue-cli3 需要 node 版本大于8.9。在cmd中输入 node -v 查看版本。如果版本过低...
Vue2.0搭建Vue脚手架(vue-cli)随着vue.js越来越火爆,更多的项目都用到vue进行开发,在实际的开发项目中如何搭建开发脚手架呢,今天跟大家分享
vue脚手架做的模仿qq的一部分前端界面 基本常见的特效以实现 消息滑动,吸顶。看点的消息,删除消息,标签页的切换。涉及到的vue知识全面。可用作学习参考。
vue使用脚手架的基本开发,vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度,介绍整个搭建的过程。
项目介绍基于Vue-cli3建造的前端开发脚手架项目模板,主要包括以下内容:Webpack4.x性能调优配置,Vue.js全家桶,移动端vw适应,单元测试等功能,可以参考,欢迎大家围观指教!项目特点特征 巴别塔 VueRouter 威克斯...
本篇文章主要介绍了详解使用vue脚手架工具搭建vue-webpack项目,非常具有实用价值,需要的朋友可以参考下
基于vue-cli脚手架,VUE Vue-Router Vue-Resource Vuex技术栈练习demo,需要有一定的html css js vue npm 基础。 安装: npm install npm install vue-router -g npm install vue-resource -g npm install vuex -g ...
本文介绍了vue使用vue-cli快速创建工程,分享给大家,具体如下: vue-cli安装 npm i vue-cli -g vue init webpack-simple vue-todos vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue ...
最近更新了webpack配置详解,可移步vue-cli ...这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目。 1.安装node环境 可以使用自带的终端cmd命令行
VUE 2.如何安装 、webpack如何安装、手脚架如何搭建的最全教程
手把手教程安装vue脚手架及其相关配置
本文主要介绍怎么在Thinkphp中集成后台前端脚手架框架Vue-Cli。 一.安装Vue-Cli到Thinkphp中 1.1.1 检查是否安装node 终端输入npm的指令如果没有安装的话会提示未找到指令 正确的姿势如下图,说明已经安装了node...
使用vue脚手架vue-cli配置多页面应用
vue脚手架 vue项目包包含vue2,vue3 所包含的环境:Router路由 Vuex CSS Pre-processors CSS预处理程序(sass)vue脚手架 vue项目包包含vue2,vue3 所包含的环境:Router路由 Vuex CSS Pre-processors CSS预处理程序...
主要介绍了vue-cli脚手架-bulid下的配置文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧