Vue入坑史,从一个简单的项目说起(vue入门项目推荐)-HXC博客
  •  首页
  •  游戏/动漫
  •  日记/生活
  •  时间轴
  •  留言板
  • 
    Vue入坑史,从一个简单的项目说起(vue入门项目推荐)
     作者:红顏漠  发布时间:2018-01-06 14:29:56  访客:123

    最近一直在学习Vue,官方文档也粗略的看过三四遍吧(有的东西老是记不住,可能是老了,开个玩笑)。然后自己写了一个简单的Demo,模拟了iPhone端的微信界面,实现了一个简单的聊天功能。


    这里是GitHub的项目地址,目前虽然还是个半成品(有点懒),但对于初学者来说应该会有帮助,因为我也是初学者。使用到的技术栈包括Vue,Vuex,Vue-router,Vue-cli,Pug,Sass等。


    这不是一篇纯技术文章,更多的是我自己总结的一些方法和对Vue的理解。


    初学者的难题


    根据我学习的经历,我觉得对于初学者学习Vue(或React)最大的难题可能就是环境的搭建,尤其是对于没有NodeJS方面经验的人来说。这里我要说一下自己对于学习Vue的一些见解,可供参考。


    从Vue-cli开始


    vue-cli是官方提供的一个命令行工具,可以一键部署开发环境,这样会省去很多麻烦。另外,通过vue-cli部署的环境可以直接进入到单文件组件的学习,这对以后的学习可能会更有帮助。


    如果自己搭建环境,一个webpack的相关配置都可能把你的意志消磨殆尽(webpack我就踩过很多坑),我猜很多学习Vue或React的新手都是死在环境搭建的过程中。初学者应该把注意力集中在Vue本身,等体会到其中的“乐趣”之后再回过头来学习npm和webpack等相关知识可能会更好。


    vue-cli使用如下,建议使用cnpm代替npm,具体可自行百度或Google。


    # 全局安装 vue-cli
    npm install -g vue-cli
    # 创建一个基于 Webpack 模板的项目
    vue init webpack my-project
    # 安装依赖
    cd my-project
    npm install
    # 运行
    npm run dev


    直接进入到单文件组件开发


    Vue可以直接通过script标签引入到HTML文件中,但我不建议这样学习。因为这就违背了学习Vue的初衷,Vue是一个MVVM框架,其核心思想就是分组件开发,组件的复用,组件解耦。


    Vue还可以使用字符串模板以及Render渲染来开发组件,其弊端也很明显。字符串模板不支持语法高亮,而且写起来也不直观。Render函数渲染相对比较复杂,而且也不直观。最重要的是他们都无法封装CSS样式,也无法使用预处理器(Pug和Sass)。

    单文件组件(.vue后缀名)很好的实现了组件的封装,让组件看起来更像组件。文件结构如下:

    <template lang="html">
        <!-- 这里是组件的 HTML 标签 -->
    </template>
    <script>export default {    // 这里是组件 js 代码}</script>
    <style lang="scss" scoped>// 这里是组件的 CSS 样式</style>


    选择一款合适的编辑器


    我曾经无数次纠结过这个问题:到底是使用Sublime,VS Code,还是Atom?或是WebStorm?百度一下,人们对这些工具也是各执其词,根本毫无可比性,一下子更不知如何选择了(选择困难症,十分痛苦)。现在想想其实也十分可笑,我们完全没必要把时间花在这些无聊的事情上。这些编辑器我在Windows和MacOS中都尝试过,最终还是选择了Sublime阵营。

    简单的说一下,选择Sublime一个字快,两个字稳定,三个字插件丰富(假装三个字)。Atom界面最好看,尤其是在MacOS下;VS Code没什么心得,就是不喜欢;WebStorm相当于IDE,笨重但功能齐全,前端初学者神器(也是我的入门工具)。Atom我也是比较看好的,只是闲置在电脑中,暂时没怎么用。


    如果你也跟我一样纠结的话,那我建议你选择Sublime,什么也别想,就选它。记住它的一些快捷操作,和一些实用技巧,我相信你会慢慢爱上它的。


    Sublime作为前端编辑器,推荐几个好用的插件:

    Emmet:前端必备神器;

    DocBlockr:统一文档注释的风格;

    Babel:支持ES6语法;

    Pug:Jade的新叫法,语法高亮;

    Sass:支持Sass语法高亮;

    Vue Syntax Highlight:Vue必备,语法高亮。

    另外推荐一款我在用的主题:Theme - SoDaReloaded。


    纵观全局


    我一直有一个观点:就是看事物要先看全局,忽略那些繁琐的细节,然后再逐个深究。比如看书要先看目录(虽然我讨厌看书),首先做到心里有数,知道自己在看什么或有没有必要再看下去(比如这篇文章)。


    比较重要的几个概念


    我不是一个语言表达能力很好的人,不会扯那些概念,我只能尽可能的说一些自己的理解。

    这里先说一句,Vue中的this一般都指向当前的Vue实例。也是就说,在哪个组件中使用,this就指向哪个组件。当然,这只是对于组件本身具有的属性和方法而言。


    Vue实例


    通过Vue开发单页面项目,一个项目就是一个Vue实例(暂且这么理解吧),也就是通过new Vue()语句创建的对象。那么既然有了一个实例,那么要显示出来,就得放入HTML文档中,这就是挂载。对应语法:


    new Vue({    // el是实例挂载点,会将根组件替换掉原文档中id为 app 标签
        el: '#app',    // 通过render函数渲染
        render: h => {        // 这里App是根组件
            h(App)
        }
    })
    
    // 第二种写法new Vue({    el: '#app',    // 通过字符串模板
        template: '<App />',    components: { App }
    })


    Vue扩展实例

    严格来说,通过new Vue()方式创建的实例叫做根实例,而还有一种叫扩展实例。这里引用官方的一句话:所有的 Vue.js 组件其实都是被扩展的 Vue 实例(其实我也是刚刚理解)。

    扩展实例创建方式:

    const MyComponent = Vue.extend({    // 该对象就相当于 单文件组件中 export 导出的对象
    // 这就是为什么说 所有的Vue组件都是被扩展的Vue实例})
    // 创建扩展实例const component = new MyComponent()


    同样的,Vue扩展实例也需要挂载,其语法与根实例挂载一样:

    // 会替换掉 HTML 文档中 id 为 app 的标签new MyComponent({el: '#app'})
    // 但是这里不建议这么做,因为这样会与实例挂载点冲突
    // 这里仅仅是为了说明扩展实例与 根实例的相似之处


    扩展实例一个重要的用法就是在需要的时候才被插入到HTML文档中。比如点击一个按钮,弹出一个模态(modal)框。在我的Demo中,正是通过该方法实现一个加载等待的模态框。通过此方法有一个好处就是,可以将该功能封装成一个Vue插件,需要的时候通过一条指令就可以将组件插入到文档中,不需要预先将组件写入到HTML文档中。方法如下:

    // 创建扩展实例let component = new MyComponent()
    // 挂载到虚拟DOM中
    // 不传递参数,若传递参数会挂载到指定的地方component  = component.$mount()
    // 通过原生语法将 扩展实例添加到HTML文档中document.body.appendChild(component.$el)


    同样,Vue根实例也可以通过该方式挂载到HTML中。


    组件

    组件就是扩展的Vue实例(哈哈)。反正记住在Vue中,一切可见的东西(但不限于可见的东西)都是组件,一个Vue实例就是由一大堆组件通过一定的组合和嵌套累积起来的。

    学习组件无外乎就是它的创建和使用,通过扩展Vue实例也算是一种创建的方式,另外还有字符串模板和render函数渲染的方式。我一开始就建议直接使用单文件组件,具体请转移官方文档或从GitHub上Clone我的demo查看详情。


    生命周期

    每个组件都有自己的生命周期,从广义上来说,Vue实例其实也是一个组件。一般常用的几个生命周期钩子:created,mounted,updated,destroyed。mounted基本上用的最多。

    所谓的生命周期钩子,就是说组件在特定的时刻会自动触发该事件,执行对应的函数。


    学习Vue的基本思想

    程序员,其实大部分时间是用于思考的。建立一种思想,一种思维方式很重要。这也是我现在一直在努力做的事。

    学习一个框架,就要站在它的角度去思考问题。而Vue是一种MVVM模式的框架,所以有必要先理解什么是MVVM?然后再去思考Vue的基本原理,它能做什么?又是如何做到的?为什么要使用Vue?可以去看一下官方文档:Vue与其他框架的对比。


    什么是MVVM

    M就是Model(模型),V就是View(界面),MVVM也是就说通过模型的改变来更新界面,然后通过界面的一些行为事件又来作用于模型。当然,这只是从字面上来解释。要更好的体会到Vue的MVVM思想,我建议去学习Vuex。


    之前,我们使用jQuery或原生JS要想更改界面上的内容,首先必须找到对应的DOM节点,然后通过直接操作DOM的语句来改变界面上的内容。而MVVM的思维方式就是:一个模型对应一个界面,界面的状态和显示的内容完全取决于它对应的模型。而我们只需改变模型,后台(Vue)就会通过某种机制自动去更新界面。


    什么是MVC

    顺便谈一下MVC设计模式,它其实是出现在MVVM之前,其中的C是指Controller(控制器)。MVC的基本思想就是:模型与界面之间的通信都是通过中间的控制器实现的。所以它的缺陷就是控制器层需要处理大量的业务逻辑代码,不利于开发和维护。


    Vue的基本原理

    我没有研究过Vue的源码,也解释不出来它是怎么实现的?毕竟我们是使用框架,通过它来提高开发效率,没必要太过于深究,否则就失去了使用它的意义(大神请忽略之)。记住一句话:我们是站在巨人的肩膀上开发的。如果什么都要去深究其原理,那还不累死?


    Vue的核心是组件,一切可以看见的东西都是由组件构成。然后通过把不同的组件组合和嵌套在一起,最终组成了一个根组件,也就是App。根组件会挂载到Vue的根实例中,而Vue根实例本身也相对于一个组件,然后又挂载到真实的HTML文档中。对应的语句也就是main.js文件中的语句。

    new Vue({    
    // 该属性会 将Vue实例挂载到 真实的HTML中
        el: '#app',    
    // App 就是根组件,被挂载到Vue实例中
        render: h => h(App)
    })


    本文来自:https://www.jianshu.com/p/56ba7488a4af



    适合初学者学习Vue+WebPack的小项目


    勾三股四的vue+webpack实战:http://jiongks.name/blog/just-vue/

    用Vue构建一个Notes App:https://coligo.io/learn-vuex-by-building-notes-app/

    Notes App中文版:https://segmentfault.com/a/11...

    Vue60分钟系列:http://www.cnblogs.com/keepfool/p/5619070.html

    webpack配合vue.js实现完整的单页面demo:https://segmentfault.com/a/11...

    使用Vue.js和Vuex实现购物车场景:http://xlbd.me/vue-vuex-shopp...
    Vue+Vuex制作微信公众号App:http://gold.xitu.io/entry/577...

    Vue+Vuex构建单页应用:https://segmentfault.com/a/11...

    Vue实战之账单组件:https://segmentfault.com/a/11...


    3645345.png

    点评一下

    
    程序:HXC博客v1.0+ 主题:HXC博客前端Funs主题    环境:lamp  后台
    博客平稳运行2年+