Vue.js入门学习

=Start=

缘由:

对于一名开发来说,如果想向外证明你的工作量、能力,一方面要靠各种数据等硬指标来直接说明,另一方面就要靠你做的产品的界面来间接体现了。而且,更多时候,提供给别人的使用界面可能(相比于他们看不见摸不着的后端接口而言)更能影响别人对你工作的认知和评价。

最近手上的事情没那么多了,考虑学习一下Vue.js,方便在更新/改版的时候把自己想到的一些前端展现效果加进去。

正文:

参考解答:

这里插一句题外话,学习各种新技术、知识的时候,学习的最佳参考肯定是官方文档;但是官方文档一般只会教给你一些基础、语法方面的知识,如果想拿来实战,用于项目、产品级别的开发,就会发现差的还挺远的。特别是当你是该领域的新手时,经常会碰到——QuickStart文档内容也不多,基础知识也很简单,但是实际在搭建环境过程中可能会遇到各种各样的问题。

所以除了官方文档之外,我一般还会再找几篇其它人写的:xxx新手入门攻略、xxx环境搭建手册……这样的文章。希望在别人的帮助下能少走点弯路,因为新人最需要的是快速入门提高兴趣和自信,而不是一开始就被各种诡异的环境问题困扰,迟迟找不到感觉;在度过了新手期之后,再遇到什么问题也就不会慌乱了。这次学Vue.js找到的不错的新手入门攻略就是:Vue2.0 新手完全填坑攻略——从环境搭建到发布

好了,下面进入正题:

一、Vue.js是什么?

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

概阔来讲就是——Vue.js是一个前端框架,易于上手&与第三方库或项目整合。

二、Vue.js的特点/好处是什么?

数据绑定

比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值。

组件化

页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来。

前期你可以不用明白它的特点、好处是什么?以及它为什么会有这些特点、好处?你只要知道它的特点是什么就行,后续接触的类似东西多了自然而然的就懂了,前期纠结于这个没啥用且浪费精力和时间(这是我个人的一个经验之谈,不一定适用于所有人)。

三、Vue.js的安装

因为现在习惯于Mac环境办公,所以接下来的各种操作默认是在Mac环境下进行的。

①先安装Homebrew(如果已安装了的话可以跳过):

②用Homebrew来安装nodejs:

③获取nodejs模块安装目录访问权限

④安装淘宝镜像

⑤安装webpack

⑥安装vue脚手架

⑦专门找一个目录用于存放项目代码/文件

⑧根据模板创建项目

⑨cd 命令进入创建的工程目录&安装一些项目依赖

⑩启动项目

环境问题解决办法概述

遇到:

Module build failed: Error: Cannot find module ‘模块名’

那就安装:

cnpm install 模块名 –save-dev(关于dev环境的,表现为 npm run dev 命令启动不了)

cnpm install 模块名 –save(关于项目的,比如main.js,表现为 npm run dev 执行成功之后控制台报错)

比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list

四、开发环境搭建/配置

我还是习惯于使用较为轻量级的Sublime Text3,在进行Vue项目开发时,需要安装一些代码高亮插件,比如:Vue Syntax Hightlight。

五、使用官方文档学习基础

六、使用简单示例学习Vue组件

七、使用简单示例学习使用Vue开发单页应用

八、使用简单示例学习使用Vue获取动态数据

九、使用简单示例学习Vue的UI框架ElementUI的使用

以上的几个示例、知识点都不算复杂,但建议前期都自己敲一遍,遇到不懂的先记下来,多动手尝试、多对比,很多知识自然而然的就记住了。前期,快速入门是最重要的,它会给你建立兴趣和信心,帮助你的进一步学习。

 

参考链接:

=END=

声明: 除非注明,ixyzero.com文章均为原创,转载请以链接形式标明本文地址,谢谢!
https://ixyzero.com/blog/archives/4002.html

《Vue.js入门学习》上有9条评论

  1. 使用 axios 访问 API
    https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

    关于Vue实例的生命周期created和mounted的区别
    https://segmentfault.com/a/1190000008570622

    Vue生命周期中mounted和created的区别
    https://blog.csdn.net/xdnloveme/article/details/78035065

    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

    mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

发表评论

电子邮件地址不会被公开。 必填项已用*标注