vue学习

从零开始学习Vue(一)

引言

最近终于安定下来进了一家公司,闲了两个月再上班还有点小激动。因为公司现在的项目要求是需要进行前后端分离,所以前端也得会(为啥前端也得我们自己写啊)。前端框架用到的是Vue(为啥用vue不是用angular啊)。因为之前对这个angula4.0有所了解,所以觉得应该不会很困难。学习过程中使用的是node.js平台,ide是webstorm,所以这个应该是从安装node.js开始吧。

1. node.js的安装与使用

  • Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好(百度百科来的)。按照我个人的理解方式,它是一个可以运行js代码的环境,就算是没有与后端服务器相互交互的情况下依然可以自己运行。实际上就是,不需要将页面放在整个项目进行运行,是一个可以独立运行的前端项目。
  • 下载地址 https://npm.taobao.org/mirrors/node/v8.11.1/node-v8.11.1-x64.msi (x64位的直接下载),官方中文网 http://nodejs.cn/download/
  • https://blog.csdn.net/traguezw/article/details/54577560 这篇博文详细说了怎么安装node.js与npm,毕竟我们是学Vue的node就大概带过了。

2. Vue手脚架的安装与创建第一个Vue项目

在此之前先简单复制一下vue官网的介绍与我个人的所理解的vue是什么。

官方解释:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程。
如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看对比其它框架。

个人理解(对错都这样了啊) : 一个封装好的js框架,支持es6语法,兼容性强。好,大概是这样。

  • 安装Vue手脚架

    打开cmd,安装好node.js与npm后执行后边的命令, 查看node.js版本 node -v, 查看npm版本 npm-v

    npm install –global vue-cli 安装手脚架

  • 安装webpack,这里vue是用这个webpack来实现独自运行的,webpack就是一个小型的服务器。

    npm install webpack -g

  • 创建项目

    vue -v 查看手脚架是否已经安装成功

    vue init webpack my_firstvue 创建项目最后的my_firstvue是项目名称(项目名称不能包含大写字母)

    创建过程如下就可以了,选项,选择了下载路由,选择了测试包,不自动下载文件。
    项目创建选项

    cd 进入项目

    npm run dev 项目运行
    项目创建欢迎页
    项目运行后输入localhost:8080 出现上图,第一个项目就已经创建完成了。

总结

刚开始只是简单测试了一边这个vue的下载与创建,这里我们知道了,他是运行在webpack上的,npm run dev的执行的是build文件夹下的webpack.dev.conf.js,通过编译该文件来运行起整个vue项目。

结束语

总共也没写过几篇博客,一是怕自己文笔不好,二是怕自己写错了带大家走弯路。不过现在是想通了,反正都是刚开始学习大家就一起进步吧!

阅读更多
上一篇xml文件基本格式与解析(一)
下一篇递归算法讲解
想对作者说点什么? 我来说一句

vue学习视频.txt

2018年01月03日 49B 下载

VUE整理(五)

2017年12月06日 53KB 下载

VUE整理(六)

2017年12月07日 67KB 下载

Vue.js 2 Cookbook

2017年11月18日 6.75MB 下载

vue入门学习

2017年12月12日 335B 下载

vue权限管理

2017年12月25日 3.66MB 下载

vue源码学习资源

2018年06月25日 41.97MB 下载

没有更多推荐了,返回首页

关闭
关闭