美文网首页
VUE学习整理_003

VUE学习整理_003

作者: 猿自在 | 来源:发表于2019-06-29 14:14 被阅读0次

windows下VUE2.0环境搭建

前两篇记录了vue学习的一些大背景,现在开始回归到vue本身。

当然学习vue的一些文档之前都会写一些必备条件,像html/css/js的基础知识等等啊,这不用说,万变不离其宗,就算是三大框架用的溜溜的,对于前端说是个新手,也还是个新手,三大框架证明不了什么,哪怕拿到一时的高工资,也是后劲不足的,前端可不只是框架。

试过单纯的看API,看的有点懵,哪怕都是汉字,字还都认识,时间长了密密麻麻的看的都焦虑了,所以还是先上车再买票,先上手干活再理解原理,在具体应用环境中发现问题,解决问题,记忆也能更深刻一些。

当然有些观点认为上手能干活了,也可以不求甚解得,就像我是个司机,为啥要会修车,听起来很有道理,但实际上狗屁不通,按部就班的按流程做没问题,可能做的已经很好了,技艺纯熟,五分钟建站速等立取,但前端从来不是一锤子买卖,要迭代要修改,如果不懂原理,怎样快速定位问题所在,如果不懂原理,如何接手别人的项目,承受思维的碰撞,岂不是一撞就碎,车是司机的没错,但前端还要配上一个修车厂么,想起某些糟心的人,啰嗦一句再言归正传好了。

言归正传,搭建vue2.0的环境基本步骤如下:

1、安装node(建议到官网下载最新版本,最新版本已经内置安装了npm)

https://nodejs.org/en/(英文官网,如果有需要,可以对照中文官网查看)

http://nodejs.cn/(中文官网)

安装就是基本操作,没有额外的配置,提示安装完成后,可以打开CMD命令提示符,输入node -v,安装成功则提示相应的node版本,再输入npm -v,安装成功则同样提示npm版本,如下图;

2、安装淘宝npm镜像

由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.

淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装全局vue-cli脚手架

淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli 回车;

安装完成后输入vue -V,安装成功则显示相应的vue版本

到此为止,vue的基本环境已经算是搭建完成了,但是出于方便的需要,最好再安装一个git。

4、安装git

https://git-scm.com/ git官网

安装完成后,在桌面上点击右键,在弹出的弹窗中有Git Bash Here和Git GUI Here

环境搭建姑且就讲到这里,那没头没尾的搭了个有什么意义,实际上有意义在于接下来的思考:

1、为什么安装node,npm又有什么意义;

2、vue -cli脚手架的意义;

3、为什么要安装Git;

首先来说第一个问题:

1、为什么安装node,npm又有什么意义;

node的官方解释是这样的:Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 

听起来有点意思又不太明白,然后因为本身曾做过2年java,所以在搜索node信息的时候这样一句话引起了我的注意,node对于前端,就像jdk之于java,原话是这样的:Node.js自带运行时环境可在Javascript脚本的基础上可以解释和执行(这类似于JVM的Java字节码)。这个运行时允许在浏览器以外的任何机器上执行JavaScript代码。由于这种运行时在Node.js上,所以JavaScript现在可以在服务器上并执行。于是我又搜索了下JVM的定义:

JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的。引入Java语言虚拟机后,Java语言在不同平台上运行时不需要重新编译。Java语言使用Java虚拟机屏蔽了与具体平台相关的信息,使得Java语言编译程序只需生成在Java虚拟机上运行的目标代码(字节码),就可以在多种平台上不加修改地运行。

这样一个概念的轮廓就出来了,说简单了,就是个虚拟机的概念。

那npm又是什么?

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

* 允许用户从NPM服务器下载别人编写的第三方包到本地使用。

* 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

* 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

简单了说,就是个大型的插件安装包仓库,类似jquery插件的集中存放地。

2、vue -cli脚手架的意义;

因为vue2是以组件化开发的,最好要搭配webpack构建工具开发,而webpack很多人还不能独立配置。

而vue-cli脚手架就能很好解决这一问题。即使对webpack还不是很了解,也可以先搭建好项目在慢慢研究。因为cli已经全部帮我们将需要的东西配置好了,你只要写好项目的业务,在用命令行就可以达到调试或打包的功能。

脚手架是全局的,只需要安装一次即可,不需要重复安装。

3、为什么要安装Git;

git在初期用到的地方并不多,只是为了更快的定位文件路径,避免在命令提示符中不断cd又cd的。

理论终究只是纸上谈兵,口说无凭,更多精彩,让我来逐步揭开。

相关文章

  • VUE学习整理_003

    windows下VUE2.0环境搭建 前两篇记录了vue学习的一些大背景,现在开始回归到vue本身。 当然学习vu...

  • Vue学习 Vue SSR + Vuex

    github 项目地址 预览 说明 vue学习整理 未严格按照Vue风格指南 旨在学习与交流vue语法以及基本入门...

  • vue语法基础xmind

    最近在学习vue,结合官方的手册,整理了vue基础语法xmind(不包括进阶部分)

  • VUE学习整理_001

    我为什么要学VUE? 济南这个城市是个很奇怪的城市,它总能敏锐的触摸到社会的发展动向,或许也不是那么敏锐,但总算是...

  • Vue学习整理(三)

    Vue 中的动画 需求:屏幕上有Hello World 文字,还有一个切换按钮,点击切换按钮,文字渐渐消失,再次点...

  • VUE学习整理_004

    VUE创建一个项目 简单总结前三篇文章的准备工作:第一篇是要知道想要做什么,心之所向素履以往;第二篇是要明确做的是...

  • VUE学习整理_005

    Vue结构详解 在最开始做java的时候碰到过这么一种情况,当时公司是买的浪潮的loushang框架,然后代码自动...

  • VUE学习整理_002

    前端工程化是什么 每一个作品的产生都是在所处的特殊环境下产生的,它能存活下来并发散光大的话,一定是真切的解决了某些...

  • vue学习理解整理

    [TOC] cookie localStorage SeeionStorage 区别 VUE基础知识 1、对于MV...

  • vue

    传送门---个人网站 Vue学习及参考总结整理 Vue对象解析 对象属性 data、el、options、watc...

网友评论

      本文标题:VUE学习整理_003

      本文链接:https://www.haomeiwen.com/subject/tvascctx.html