前端框架VUE

Vue
Vue近几年来特别的受关注，三年前的时候angularJS霸占前端JS框架市场很长时间，接着react框架横空出世，因为它有一个特性是虚拟DOM，从性能上碾轧angularJS，这个时候，vue1.0悄悄
的问世了，它的优雅，轻便也吸引了一部分用户，开始收到关注，16年中旬，VUE2.0问世，这个时候vue不管从性能上，还是从成本上都隐隐超过了react，火的一塌糊涂，这个时候，angular
开发团队也开发了angular2.0版本，并且更名为angular，吸收了react、vue的优点，加上angular本身的特点，也吸引到很多用户，目前已经迭代到5.0了。
学习vue是现在前端开发者必须的一个技能。
前端js框架到底在干嘛，为什么要用
js框架帮助开发者写js逻辑代码，在开发应用的时候js的功能划分为如下几点：
渲染数据
操作dom（写一些效果）
操作cookie等存储机制api
在前端开发中，如何高效的操作dom、渲染数据是一个前端工程师需要考虑的问题，而且当数据量大，流向较乱的时候，如何正确使用数据，操作数据也是一个问题
而js框架对上述的几个问题都有自己趋于完美的解决方案，开发成本降低。高性能高效率。唯一的缺点就是需要使用一定的成本来学习。
Vue官网介绍
vue是渐进式JavaScript框架
“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念
Vue可以在任意其他类型的项目中使用，使用成本较低，更灵活，主张较弱，在Vue的项目中也可以轻松融汇其他的技术来开发，并且因为Vue的生态系统特别庞大，可以找到基本所有类型的工
具在vue项目中使用
特点：易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）
Vue是一个MVVM的js框架，但是，Vue 的核心库只关注视图层，开发者关注的只是m-v的映射关系
与AngularJS的对比
Vue的很多api、特性都与angularJS相似，其实是因为Vue在开发的时候借鉴了很多AngularJS中的特点，而AngularJS中固有的缺点，在Vue中已经解决，也就是青出于蓝而胜于蓝，Vue的学习
成本比AngularJS低很多，因为复杂性就低
AngularJS是强主张的，而Vue更灵活
Vue的数据流是单向的，数据流行更清晰
Angular里指令可以是操作dom的，也可以封装一段结构逻辑代码，例如：广告展示模块
Vue中的指令只是操作dom的，用组件来分离结构逻辑
AngularJS的性能比不上Vue
Vue的使用
Vue不支持IE8，因为使用了ES5的很多特性
可以直接通过script标签来引入vue.js，有开发版本和生产版本，开发版本一般我们在开发项目的时候引入，当最后开发完成上线的时候引入生产版本，开发版本没有压缩的，并且有很多提
示，而生产版本全部删掉了
在Vue中提供了一个脚手架（命令行工具）可以帮我们快速的搭建基于webpack的开发环境...
Vue的实例
每一个应用都有一个根实例，在根实例里我们通过组件嵌套来实现大型的应用
也就是说组件不一定是必须的，但是实例是必须要有的
在实例化实例的时候我们可以传入一个；配置项，在配置项中设置很多属性方法可以实现复杂的功能
在配置中可以设置el的属性，el属性代表的是此实例的作用范围
在配置中同过设置data属性来为实例绑定数据
mvc/mvvm
摘自阮一峰博客
mvc 分为三层，其实M层是数据模型层，它是真正的后端数据在前端js中的一个映射模型，他们的关系是：数据模型层和视图层有映射关系，model改变，view展示也会更改，当view产生用户
操作或会反馈给controller，controller更改model，这个时候view又会进行新的数据渲染

这是纯纯的MVC的模式，但是很多框架都会有一些更改
前端mvc框架，如angularjs，backbone：

会发现，用户可以直接操作controller（例如用户更改hash值，conrtoller直接监听hash值变化后执行逻辑代码，然后通知model更改）
控制器可以直接操作view，如果，让某一个标签获得进入页面获得焦点，不需要model来控制，所以一般会直接操作（angularJS，指令）
view可以直接操作model （数据双向绑定）
MVP:
mvp
view和model不能直接通信，所有的交互都由presenter来做，其他部分的通信都是双向的
view较薄 ，presenter较为厚重
MVVM：
mvvm
MVVM和MVP及其相似，只是view和viewmodel的通信是双向绑定，view的操作会自动的像viewmodel通过
v-for
在vue中可以通过v-for来循环数据的通知循环dom，语法是item in/of items，接收第二个参数是索引 (item,index) of items,还可以循环键值对，第一个参数是value，第二个是key，第三
个依然是索引
v-on
在vue中还有v-on来为dom绑定事件，在v-on：后面加上要绑定的事件类型，值里可以执行一些简单javascript表达式：++ -- = ...
可以将一些方法设置在methods里，这样就可以在v-on:click的值里直接写方法名字可以，默认会在方法中传入事件对象，当写方法的时候加了()就可以传参，这个时候如果需要事件对象，那
就主动传入$event
v-on绑定的事件可以是任意事件,v-on:可以缩写为@
为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的
ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
模板语法
在vue中，我们使用mustache插值({{}})来将数据渲染在模板中
使用v-once指令可以控制只能插入一次值，当数据变化的时候，模板对应的视图不更新
使用v-html指令可以解析html格式的数据
在html标签属性里不能使用mustache插值，这个时候给元素添加动态属性的时候使用v-bind来绑定属性，可以缩写成:
在使用v-bind绑定class和内联样式的时候，vue做了一些优化，可以使用对象语法和数组的语法来控制
防止表达式闪烁：
v-cloak
给模板内的元素添加v-cloak属性后，元素在vue没有加载完的时候就有这个属性，当vue加载完成后这个属性就消失了，所以我们可以给这个属性设置css样式为隐藏
 <style>
 [v-cloak]{
     visibility: hidden;
 }
 </style>
v-text/v-html
v-text会指定将模板内元素的textContent属性替换为指令值所代表的数据，也可以用于防止闪烁
v-html可以解析标签，更改元素的innerHTML，性能比v-text较差
v-pre
跳过元素和其子元素的编译过程，可以用来显示mustache
vue-resource
这是一款vue的插件，可以用来进行数据交互，支持的请求方式：GET/POST/JSONP/OPTIONS...
这个插件官方宣布不在更新维护，也就是说尽量不要使用
计算属性、监听
有的时候我们需要在模板中使用数据a，这个时候就需要用到表达式，但是有的地方我们需要对a数据进行一些简单的处理后才能使用，那么我们就会在表达式中写一些js逻辑运算

```
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
```
这样我们的维护就会非常困难，也不便于阅读

那め我们就可以在methods里设置一个方法，在模板的表达式中使用这个方法

```
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
    return this.message.split('').reverse().join('')
}
}
```

但是这个时候，只要vm中有数据变化，这个变化的数据可能和我们关注的数据无关，但是vm都会重新渲染模板，这个时候表达式中的方法就会重新执行，大大的影响性能

这个时候其实我们可以使用监听器里完成：

在vm实例中设置watch属性，在里面通过键值对来设置一些监听，键名为数据名，值可以是一个函数，这个函数在数据改变之后才会执行，两个参数分别是性格前的值和更改后的值
    a: function (val, oldVal) {
        console.log('new: %s, old: %s', val, oldVal)
    }
值还可以是一个方法名字，当数据改变的时候这个方法会执行

当数据为object的时候，object的键值对改变不会被监听到（数组的push等方法可以）,这个时候需要设置深度监听：
    c: {
        deep:true,
        handler:function (val, oldVal) {
            console.log('new: %s, old: %s', val, oldVal)
        }
    },
监听的handler函数前面的这几种写法都是在数据变化的时候才会执行，初始化的时候不会执行，但是如果设置immediate为true就可以了
    num:{
        immediate:true,
        handler:function(val){
            this.nums = val*2
        }
    }
我们在回到上面的问题，用监听器加上immediate属性就可以做到该效果，但是大家可以看到的是逻辑稍稍有点复杂

watch还可以通过实例对象直接使用:vm.$watch，返回一个取消监听的函数，这个函数执行之后会取消监听

我们一般都会用到一个叫计算属性的东西来解决：

计算属性就是在实例配置项中通过computed来为vm设置一个新的数据，而这个新数据会拥有一个依赖（一条已经存在的数据），当依赖发送变化的时候，新数据也会发送变化

与方法的方式相比，它性能更高，计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再
次执行函数。
与watch相比，写起来简单，逻辑性更清晰，watch一般多用于，根据数据的变化而执行某些动作，而至于这些动作是在干什么其实无所谓，而计算属性更有针对性，根据数据变化而更改
另一个数据
计算属性也拥有getter和setter，默认写的是getter，设置setter执行可以当此计算属性数据更改的时候去做其他的一些事情，相当于watch这个计算属性
    xm:{
        get:function(){//getter 当依赖改变后设置值的时候
            return this.xing+'丶'+this.ming
        },
        set:function(val){//setter 当自身改变后执行
            this.xing = val.split('丶')[0]
            this.ming = val.split('丶')[1]
        }
    }
过滤器
vue中可以设置filter(过滤器)来实现数据格式化，双花括号插值和 v-bind 表达式中使用
vue1.0的有默认的过滤器，但是在2.0的时候全部给去掉了
所以在vue中如果想要使用过滤器就需要自定义
自定义的方法有两种：全局定义和局部定义，全局定义的过滤器在任意的实例、组件中都可以使用，局部定义就是在实例、组件中定义，只能在这个实例或组件中使用
全局定义
Vue.filter(name,handler)
name是过滤器的名字，handler是数据格式化处理函数，接收的第一个参数就是要处理的数据，返回什么数据，格式化的结果就是什么
在模板中通过 | (管道符) 来使用,在过滤器名字后面加（）来传参，参数会在handler函数中第二个及后面的形参来接收
    <p>{{msg | firstUpper(3,2)}}</p>

    Vue.filter('firstUpper',function (value,num=1,num2) {
        console.log(num2)
        return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase()
    })
局部定义
在实例、组件的配置项中设置 filters，键名为过滤器名，值为handler
 filters:{
     firstUpper:function (value,num=1,num2) {
     console.log(num2)
     return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase()
     }
 }
注意：
过滤器只能在mustache插值、v-bind里使用，其他的指令等地方都不能用
条件渲染
在Vue中可以使用v-if来控制模板里元素的显示和隐藏，值为true就显示，为false就隐藏
v-if控制的是是否渲染这个节点
当我们需要控制一组元素显示隐藏的时候，可以用template标签将其包裹，将指令设置在template上，等等vm渲染这一组元素的时候，不会渲染template
当有else分支逻辑的时候，可以给该元素加上v-else指令来控制，v-else会根据上面的那个v-if来控制，效果与v-if相反，注意，一定要紧挨着
还有v-else-if指令可以实现多分支逻辑
    <input type="text" v-model="mode">
      <template  v-if="mode=='A'">
        <h1>1.title</h1>
        <p>我的第一个P标签</p>
      </template>
     <template  v-else-if="mode=='B'">
        <h1>2.title</h1>
        <p>我的第二个P标签</p>
     </template>
     <template  v-else-if="mode=='C'">
        <h1>3.title</h1>
        <p>我的第三个P标签</p>
     </template>
     <template  v-else>

        <p>不好意思，输入有误</p>
     </template>
需要注意的另一个地方是：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这样确实能使Vue变得更快，性能更高，但是有的时候我们需要让实例去更新dom而不是
复用，就需要给dom加上不同的key属性，因为vue在判断到底渲染什么的时候，包括哪些dom可以复用，都会参考key值，如果dom表现基本一致，符合复用的条件，但是key值不同，依然不会复
用
Vue还提供了v-show指令，用法和v-if基本一样，控制的是元素的css中display属性，从而控制元素的显示和隐藏 ， 不能和v-else配合使用,且不能使用在template标签上，因为template不
会渲染，再更改它的css属性也不会渲染，不会生效
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
mixin
在Vue中，我们可以通过定义多个mixin来实现代码抽离复用，便于维护，提升页面的逻辑性
要注意的是：data属性不要使用mixin，因为从逻辑上来说，每一个实例、组件的数据都应该是独立的
一个mixin其实就是一个纯粹的对象，上面挂载着抽离出来的配置，在某一个实例中，通过mixins选项（数组）导入后，此实例就拥有导入的mixin的配置
且导入的配置不会覆盖原有的，而是合并到一起
虚拟dom
频繁且复杂的dom操作通常是前端性能瓶颈的产生点，Vue提供了虚拟dom的解决办法
虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想
(1) 提供一种方便的工具，使得开发效率得到保证
(2) 保证最小化的DOM操作，使得执行效率得到保证
也就是说，虚拟dom的框架/工具都是这么做的：
根据现有的真实dom来生成一个完整的虚拟dom树结构
当数据变化，或者说是页面需要重新渲染的时候，会重新生成一个新的完整的虚拟dom
拿新的虚拟dom来和旧的虚拟dom做对比（使用diff算法），。得到需要更新的地方之后，更新内容
这样的话，就能大量减少真实dom的操作,提高性能
组件化
模块化就是将系统功能分离成独立的功能部分的方法，一般指的是单个的某一种东西，例如js、css
而组件化针对的是页面中的整个完整的功能模块划分，组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体
优点：代码复用，便于维护
划分组件的原则：具有大量的布局结构的，或者是独立的逻辑的，都应该分成组件
组件应该拥有的特性：可组合，可重用，可测试，可维护
组件
在vue中，我们通过Vue.extend来创建Vue的子类，这个东西其实就是组件
也就是说Vue实例和组件的实例有差别但是差别不带，因为毕竟一个是父类一个是子类
一般的应用，会拥有一个根实例，在根实例里面都是一个一个的组件
因为组件是要嵌入到实例或者父组件里的，也就是说，组件可以互相嵌套，而且，所有的组件最外层必须有一个根实例，所以组件分为：全局组件和局部组件
全局组件在任意的实例、父级组件中都能使用，局部组件只能在创建自己的父级组件或者实例中使用
组件通过不同的注册方法成为全局、局部组件
创建组件：
Vue.extend(options)
全局注册：
    var App = Vue.extend({
        template:"<h1>hello world</h1>"
    })
    Vue.component('my-app',App)
组件通过template来确定自己的模板,template里的模板必须有根节点，标签必须闭合
组件的属性挂载通过：data方法来返回一个对象作为组件的属性，这样做的目的是为了每一个组件实例都拥有独立的data属性
响应式原理
因为vue是mvvm的框架，所以当数据变化的时候，视图会立即更新，视图层产生操作后会自动通知vm来更改model，所以我们可以实现双向数据绑定，而其中的原理就是实例会将设置的data逐
个遍历利用Object.defineProperty给数据生成getter和setter，当数据变化地方时候setter会监听到并且通知对应的watcher工具进行逻辑运算会更新视图
声明式渲染
在vue中，我们可以先在vue实例中声明数据，然后通过{{}}等方式渲染在dom中

什么是Vue？1、Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。2、Vue 只关注视图层， 采用自底向上增量开发的设计。3、Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue可以用来做什么？Vue可以做从简单到复杂的前端单页应用，随处可见的Web前端都可以用Vue来开发。为什么使用Vue？1、轻量级2、js语法3、入门及上手快vue与Jquery比较?1、jquery关注dom2、vue关注数据，不关注domVue.js 安装使用 <script> 标签引入。Vue的书写格式<div id="vue_det">    <h1>{{details()}}</h1>  <!--使用两个括号来展示数据--></div><script type="text/javascript">    var vm = new Vue({        el: '#vue_det',  //表明作用域        data: {          //存储数据            ………        },        methods: {       //事件处理方法            details: function() {                ……            }        }    })</script>Vue的对象1、el：Vue的作用域，即只有在这个作用域里面的dom受Vue控制2、data：vue页面的数据模型，该数据模型为一个javascript对象，且在运行过程中该对象的属性不允许增加，因此页面数据模型必须提前定义好3、methods：事件处理方法对象数据绑定1、数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值2、使用 v-html 指令用于输出 html 代码示例：  <div id="app">    <div v-html="message"></div></div>    <script>new Vue({  el: '#app',  data: {    message: '<h1>Vue</h1>'  }})</script>3、HTML 属性中的值应使用 v-bind 指令，参数在指令后以冒号指明。示例<div id="app">    <pre><a v-bind:href="url">百度</a></pre></div>    <script>new Vue({  el: '#app',  data: {    url: 'http://www.baidu.com'  }})</script>4、 v-model 指令来实现双向数据绑定5、 v-on 指令，它用于监听 DOM 事件过滤器（可以接受参数）示例<div id="app">  {{ message | capitalize }}  <div v-bind:id="rawId | formatId"></div></div>    <script>new Vue({  el: '#app',  data: {    message: 'runoob'  },  filters: {        //过滤器都书写在这个关键字里面    capitalize: function (value) {  //过滤器函数接受表达式的值作为第一个参数。      if (!value) return ''      value = value.toString()      return value.charAt(0).toUpperCase() + value.slice(1)    }  }})</script>条件语句1、v-if2、v-else3、v-else-if4、v-show注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。示例<div id="app">     <h1 v-show="true">Hello!</h1>     <div v-if="type === 'A'">      A    </div>    <div v-else-if="type === 'B'">      B    </div>    <div v-else-if="type === 'C'">      C    </div>    <div v-else>      Not A/B/C    </div></div>    <script>new Vue({  el: '#app',  data: {    type: 'C'  }})</script>v-if 和 v-show的区别（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；（3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；（4）性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；（5）使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。循环语句循环使用 v-for 指令。示例<div id="app">  <ol>    <li v-for="site in sites">  //固定写法  参数 in 数组/对象…      {{ site.name }}    </li>  </ol>  <ul>    <li v-for="(value, key) in sites">    {{ key }} : {{ value }}    </li>  </ul>  <ul>    <li v-for="(value, key, index) in sites">     {{ index }}. {{ key }} : {{ value }}    </li>  </ul></div> <script>new Vue({  el: '#app',  data: {    sites: [      { name: 'Runoob' },      { name: 'Google' },      { name: 'Taobao' }    ]  }})</script>样式绑定一、Class属性绑定1、行内对象绑定<style>.active {    width: 100px;    height: 100px;    background: green;}</style> <div id="app">  <div v-bind:class="{ active: isActive }"></div></div> <script>new Vue({  el: '#app',  data: {    isActive: true  }})</script>2、预定义对象绑定<style>.active {    width: 100px;    height: 100px;    background: green;}.text-danger {    background: red;}</style> <div id="app">  <div v-bind:class="classObject"></div> //直接绑定对象</div> <script>new Vue({  el: '#app',  data: {    classObject: {      active: true,      'text-danger': true    }  }})</script>3、数组绑定<style>.active {    width: 100px;    height: 100px;    background: green;}.text-danger {    background: red;} <body><div id="app">    <div v-bind:class="[activeClass, errorClass]"></div></div> <script>new Vue({  el: '#app',  data: {    activeClass: 'active',    errorClass: 'text-danger'  }})</script>二、style属性绑定1、行内对象绑定<div id="app">    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">123</div></div> <script>new Vue({  el: '#app',  data: {    activeColor: 'green',    fontSize: 30  }})</script> 2、预定义对象绑定<div id="app">  <div v-bind:style="styleObject">123</div></div> <script>new Vue({  el: '#app',  data: {    styleObject: {      color: 'green',      fontSize: '30px'    }  }})</script>3、数组绑定<div id="app">  <div v-bind:style="[baseStyles, overridingStyles]">123</div></div> <script>new Vue({  el: '#app',  data: {    baseStyles: {      color: 'green',      fontSize: '30px'    },    overridingStyles: {      'font-weight': 'bold'    }  }})</script>Vue初始化方法Mounted在vue初始化完成后调用该方法,一般用于vue初始化完成后需要自动执行的代码。示例new Vue({  el: '#app',  data: {    totalMoney: 0,    productList: []  },  filters: {  },  mounted: function() {           //书写需要自动执行的代码  } });v-model 指令在表单控件元素上创建双向数据绑定一、单选框和复选框示例<div id="app">  <p>单个复选框：</p>  <input type="checkbox" id="checkbox" value="asd" v-model="checked">  <label for="checkbox">{{ checked }}</label>      <p>多个复选框：</p>  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">  <label for="runoob">Runoob</label>  <input type="checkbox" id="google" value="Google" v-model="checkedNames">  <label for="google">Google</label>  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">  <label for="taobao">taobao</label>  <br>  <span>选择的值为: {{ checkedNames }}</span></div> <script>new Vue({  el: '#app',  data: {    checked : 123,    checkedNames: [1]  }})</script>注意1、checked的值根据勾选状态的不同而改变，但不是true就是false2、checkedNames是一个数组，里面元素包含的是你选中的的复选框的所有的value二、下拉菜单示例<div id="app">  <select v-model="selected" name="fruit">    <option value="">选择一个网站</option>    <option value="www.runoob.com">Runoob</option>    <option value="www.google.com">Google</option>  </select>   <div id="output">      选择的网站是: {{selected}}  </div></div> <script>new Vue({  el: '#app',  data: {    selected: ''  }})</script>注意根据你选中的哪个option，然后你绑定的模板所对应的值就是你选中的那个option的valueVue的组件书写格式Vue.component('组件名',{props:['属性名'],template:'模板内容'})1、组件的简单书写格式<div id="app">    <runoob></runoob>   <!--自定义组件的是使用--></div> <script>Vue.component('runoob', {  //自定义组件  template: '<h1>自定义组件!</h1>'})new Vue({  el: '#app'})</script>2、新建一个.js文件，将Vue的组件书写在这个文件中，使用<script> 标签引入1）新建.js文件Vue.component('my-clock',{    props:[        'format'      //自定义组件的属性，可以用来传递值    ],    template:'<h3>{{d|formatdate(format)}}</h3>',   //将值传递给过滤器使用    filters:{        formatdate:function(d,frm){                            var dt= d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();            var tm=d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();            if(frm=='date'){                return dt;            }else if(frm=='time'){                return tm            }else{                return dt+' '+tm            }                }    },     data: function(){     //必须使用函数 将数据进行隔离，否则多个位置使用同一个组件数据会共享        return {            d: new Date()            }    },    methods:{        updatetime: function (){            this.d=new Date()        }    },     mounted:function (){        setInterval(this.updatetime,1000);    }});2）引入.js文件，并使用自定义组件<script src="js/vue_00.js"></script><div id="qwee">         <my-clock format="data"></my-clock></div>            <script>    new Vue({        el:"#qwee"    })</script>
--------------------- 

1、安装淘宝镜像

npm install -g cnpm --registry= https://registry.npm.taobao.org

2、全局安装webpack

1、安装了淘宝镜像

cnpm install webpack -g

2、没安装

npm install webpack -g

3、安装vue脚手架

npm install vue-cli -g

4、创建一个文件夹，最好有自己的worksapce

5、根据模板创建项目

vue init webpack-simple 工程名字<工程名字不能用中文>

或者创建 vue1.0 的项目

vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

会有一些初始化的设置，如下输入:

Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)

Project name (vue-test) 直接回车默认

Project description (A Vue.js project) 直接回车默认

Author 写你自己的名字

6、安装项目依赖

*必须这么写

npm install

7、启动项目

npm run dev

总结一下不能成功的原因：
1、node 、npm版本
2、遗漏步骤

8、使用ElementUI

如果不熟悉移步官网：http://element.eleme.io/#/zh-CN
1、cnpm i element-ui@1.2.5 -S（推荐1.2.5版本）
2、然后在 main.js 引入并注册

import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)

3、须安装

cnpm install style-loader --save-dev

cnpm install css-loader --save-dev

cnpm install file-loader --save-dev

安装好后package.json下的内容

{

  "name": "vue-router-cli",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "Allen <13402202685@163.com>",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    *"element-ui": "^1.2.5",*
    "vue": "^2.2.1",
    "vue-resource": "^1.2.1",
    "vue-router": "^2.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-latest": "^6.0.0",
    "cross-env": "^3.0.0",
    *"css-loader": "^0.25.0",*
    *"file-loader": "^0.9.0",*
    *"style-loader": "^0.16.1",*
    "vue-loader": "^11.1.4",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

4、在 webpack.config.js 中的 loaders 数组加入以下配置

{
    test: /\.css$/,
    loader: "style-loader!css-loader"
},
{
    test: /\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
    loader: "file"
}

现在就可以使用Element了，如果你想用其他的UI框架也可以自行安装的

9、编译

npm run build

最近半年都在做VueJS的前端开发，搭了几个框架，今天开源个还算不错的，分享出来下，如果你觉得不错就点个赞！效果图如下：项目地址：https://gitee.com/QCBZ/vwnUI用的是elementUI2.2.0版本的，VueJS 2.5.0，webpack3.9的。vwn-综合后台框架vwn-基于vuejs2.5-elementUI2.2-webpack3.9的一套前端综合后台框架本项目是后台管理框架，集成了权限管理、登录功能、UI组件、上传等功能，建议直接使用。注意：便于前端调试，所以数据请求都是用了mockjs模拟。在需要请求外部api时请移除mock文件。Features 特性 - **工业化UI组件**（上手即用，无需自己造轮子）- `登录/注销`- `权限验证`- **多TAB导航**（没有多TAB怎么能称为后台管理界面呢？）- `Tinymce 编辑器`- `Markdown 编辑器`- `动态侧边栏`（支持多级路由）- 面包屑导航- JSON展示组件- echartjs图表- 404错误页面- **表格数据直接导出cvs**- mock数据- 炫酷hover特效 Run 开发 # 克隆项目 git clone https://gitee.com/QCBZ/vwn.git # 安装依赖 npm install //or # 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 本地开发 开启服务 npm run dev 浏览器访问 http://localhost:80 Build 发布 # 发布 npm run build FileTree 目录结构 ├── doc // 项目文档 ├── build // 构建相关 ├── config // 配置相关├── src // 源代码│ ├── api // 所有请求│ ├── assets // 静态资源文件│ ├── icons // ico图标│ ├── components // 全局UI组件│ ├── mock // mock数据│ ├── lang // 语言包│ ├── vendor // 第三方包│ ├── router // 路由│ ├── store // 全局store管理│ ├── utils // 全局公用方法│ ├── styles // 全局样式│ ├── views // view界面│ │ ├── dashboard //图表组件│ │ ├── layout //框架布局组件│ │ ├── vwn //示例│ │ ├── login //登录界面│ │ ├── errorPage //错误界面│ │ └── permission //权限测试界面│ ├── App.vue // 入口页面│ └── main.js // 入口 加载组件 初始化等│ └── permission.js // 权限 加载组件 初始化等│ └── errorLog.js // 错误日志 加载组件 初始化等├── static // 静态资源├── .babelrc // babel-loader 配置├── eslintrc.js // eslint 配置项├── .gitignore // git 忽略项├── favicon.ico // favicon图标├── index.html // html模板└── package.json // package.json
---------------------