Vue

Vue 教程二 上篇讲了通过script方式引入vue来开发项目，这篇会结合webpack进行vue的模块化开发，读完本篇你会知道如何进行vue的模块化开发。 首先需要了解下vue的单文件组件SFC及webpack的vue插件vue-loader: 单文件组件（SFC）和Vue Loader 当使用基于HTML模板的vue组件时，会带来些困难：要么使用 JavaScript 的模板字符串，要么将模板和组件定义写到不同文件里或使用内联模板 例1: Vue.component('blog-post', { props: ['post'], template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <div v-html="post.content"></div> </div> ` }) 模板写在组件定义里 使用 JavaScript 的模板字符串时，它们在 IE 下并没有被支持，所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE，要么使用折行转义字符取而代之 例2: <script type="text/x-template" id="hello-world-template"> <p>Hello hello hello</p> </script> Vue.component('hello-world', { template: '#hello-world-template' }) 如上是把模板定义在html里，然后js引用 在这些情况下导致代码不好维护，Vue提供了单文件组件（Single FIle Components）来解决这个问题，将模板、组件定义、CSS写在一个.vue文件里 //MyComponent.vue <template> <div id="my-component">...</div> </template> <script> export default { ... } </script> <style> #my-component { ....

Vue 概览 阅读完，你会知道Vue特性，懂得在项目中如何使用(小项目和复杂项目component) 什么是Vue Vue是构建用户界面的渐进式框架，自底向上设计。核心库只关注视图层，所以很容易与其他库或现有项目进行集成。 什么是渐进式？ pro‧gres‧sive /prə’ɡresiv / adjective 1. happening or developing gradually or in stages; proceeding step by step 逐步或分阶段发生或发展; 一步一步地进行 项目的不同阶段可以使用不同的部分，可增量地采用。非侵入式，你可以只用它的一部分，而不会因为用了它这一部分就必须用其它所有部分。有时可以把它当成库来用，也可以是框架，也可以用它的全家桶（SFC、Vuex、Router、SSR等）。 比如： 你可以把vue 当成一个js库来使用，就用来收集form表单，和表单验证。 可以把 整个页面的dom 用Vue 来管理，你会发现关注点由操作dom变成了关注数据的变化，用数据驱动DOM的变化。 可以用 webpack + vue-router控制路由。 可以用vuex 处理数据在组件之间的流动，做状态管理。 可以考虑用vue的SSR 做优化。 参考: vue渐进式概念讨论 Evan You分享的ppt 安装 直接<script>引入，直接下载开发或生产版本并用<stript>标签引入，也可以用CDN链接，这时Vue会被注册为一个全局变量。 NPM安装，在用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如webpack或Browserify模块打包器配合使用。同时Vue也提供配套工具(vue-loader)来开发单文件组件。 命令行工具（CLI），Vue提供了一个vue-cli工具，为单页面应用(SPA)快速搭建繁杂的脚手架(包含vue、webpack及相关插件)。 对不同构建版本的解释 在npm包的dist/目录里会找到很多不同的 Vue.js 构建版本详见 UMD CommonJS ES Module 完成版 vue.js vue.common.js vue.esm.js 只包含运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js 完整版（生产环境） vue.min.js - - 只包含运行时版（生产环境） vue.runtime.min.js - - 完整版：同时包含编译器和运行时的版本。 编译器：用来将模板字符串编译为JavaScript渲染函数的代码。 运行时：基本上是除去编译器的其它一切。 UMD：UMD版本可以通过<script>标签直接用在浏览器中。 CommonJS：构建工具browserify或webpack1会用到CommonJS版本。 ES Module：构建工具webpack2+或rollup，会使用ES Module版本（看后面的vue的引入机制分析）。 参考: 项目引入vue的方式 webpack 里resolve的mainfields Vue 选项对象中的 el 属性、template属性和 render 渲染函数的关系...