vue学习

标签: ide angular 前端框架 前端 node.js
1人阅读 评论(0) 收藏 举报
分类:

从零开始学习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项目。

结束语

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

查看评论

vue学习视频.txt

  • 2018年01月03日 12:12
  • 49B
  • 下载

VUE整理(五)

  • 2017年12月06日 16:28
  • 53KB
  • 下载

VUE整理(六)

  • 2017年12月07日 15:39
  • 67KB
  • 下载

vue入门学习

  • 2017年12月12日 15:04
  • 335B
  • 下载

vue权限管理

  • 2017年12月25日 15:32
  • 3.66MB
  • 下载

Vue.js 2 Cookbook

  • 2017年11月18日 20:20
  • 6.75MB
  • 下载

vue新手建议学习路线

Vuejs的作者尤雨溪尤大也写过一篇关于新手学习vue路径的文章新手向:Vue 2.0 的建议学习顺序   百度vuejs搜索的是vue1的文档,推荐大家直接上2.0,毕竟1和2还是有区别...
  • hanxue_tyc
  • hanxue_tyc
  • 2017-03-06 10:28:40
  • 4344

零基础Vue入门学习记录(1)

最近想要学会的东西有vue-router,和怎么增删vue页面。这个东西做出来,我才能做出网站的前端页面。如果可以,我还希望能学会使用vue提取数据。我目前的水平就是稍微懂一点点js,连曾经的神器jQ...
  • Joshua_HIT
  • Joshua_HIT
  • 2017-03-01 14:54:21
  • 2189

1.学习使用vue.js(适合初学者)

如果你不愿意多花时间去自学vue.js 官网的API,那么你可以在跟着下面的例子学习最实用,最容易上手的案例。首先要你必须要去VUE官网上下载vue.js,然后才能继续下面的步骤。 如果你不想下载的...
  • heshuaicsdn
  • heshuaicsdn
  • 2018-01-02 10:17:03
  • 984

Vue-进阶学习

1、vm(Vue的实例对象)中的data属性存放的数据才是响应式的 var vm = new Vue({  data:{  a:1  }}) // `vm.a` 是响应的 vm.a=20       ...
  • itzhengmaolin
  • itzhengmaolin
  • 2017-07-26 12:12:32
  • 438
    个人资料
    等级:
    访问量: 668
    积分: 53
    排名: 167万+
    文章分类
    文章存档