一 VUE介绍

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

（2）也就是说vue是一种前端开发框架，官方的介绍对于有经验的开发人员来说，看完就能知道它能干什么，但对于初学开发者来说，可能一片茫然，所以不要管它什么“渐进式”框架之类的，只要知道它是随着前后端分离出现的一种前段框架就行了。至于为什么叫“框架”，理解框架的概念就明白了，就像Java开发一样，有各种各样的框架，所谓框架其实就是大神把基础的东西组合起来，让你可以复用，可以便捷、快速的利用框架提供的组件开发出想要的功能，vue写出来的代码，最终还是会被解释为html元素，vue操作的是虚拟DOM，但解释器最终会把他转换成html中的实际DOM，也就是说vue只是给你提供了一种更加方便的操作html的方法。

二 VUE前端开发环境和工具介绍

1.vue.js : 用JavaScript实现的基本，vue的操作全部基于它里面的函数，用js实现的函数。

下载地址：官网有引入vue.js的教程，https://cn.vuejs.org/v2/guide/installation.html

2.node.js : 一看后缀，就知道是用JavaScript写的脚本，只不过node.js是运行在服务器端的脚本，构建了一个JavaScript运行平台。在vue的编码过程中node.js并不会参与，没有node.js,完全可以写和运行vue编写的代码。node.js只是搭建一个运行环境，在你将你的代码工程化的过程中，为打包工具提供一个运行环境而已。

node.js 下载地址：http://nodejs.cn/download/

3.npm : 包管理器工具，可以下载别人写好的包，并安装在你的电脑上，也可以把你的代码打成包并运行。

4.Vue-cli : vue的脚手架工具，就是从远程下载模板，为你初始化一个vue项目基本配置的工具，初始化完了也就没它什么事了。

5.webpack : vue项目的打包工具，把你写的js、css这些零散的代码，以工程的方式进行打包，把一些浏览器不能识别的代码，通过webpack转化成浏览器可以识别的代码，等等。

6.webpack-cli : webpack的脚手架，反正你用不到，你只用webpack就行，由webpack-cli为webpack运行提供支撑，不信你别安装试试看能用webpack吗

7.VSCode ：idea开发工具，微软造的，工具很多，我只是喜欢它而已，你完全可以换成别的idea。

下载地址：https://code.visualstudio.com/Download

三 VUE前端开发环境和工具安装

1.安装node.js,按地址下载后，直接安装就行，最新的node.js集成了npm，所以不需要再单独安装npm，安装后你可以用node -v 和 npm -v 查看他们的版本

不过官方的npm下载包特别慢，可以换成淘宝的镜像地址，执行下面的命令更换安装淘宝的cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org，安装成功后，你得用cnpm命令去运行。

2.安装vue-cli，执行以下命令：cnpm install vue-cli -g 进行安装

3.安装webpack 和webpac-cli，执行一条命令就可以同时安装：cnpm install webpack webpack-cli -g

四测试环境是否搭建成功

（1）打开VSCode，在终端执行命令vue init webpack firstvue，新建项目。其中firstvue为项目名，不能使用驼峰命名出现大写字母

（2）创建成功后，按提示进入项目目录，运行命令：npm run dev

(3) 成功后在浏览器访问：http://localhost:8080，环境搭建和开发工具安装完成

VUE前段开发-开发环境搭建和开发工具安装相关推荐

【安卓开发系列 -- 开发环境】Unbuntu 下 Android 持续集成打包环境搭建 -- Jenkins 构建工具安装(gradle + git + android 工具)
[安卓开发系列 -- 开发环境]Unbuntu 下 Android 持续集成打包环境搭建 -- Jenkins 构建工具安装(gradle + git + android 工具) [1]Unbuntu ...
微信公众号开发(JAVA)-环境搭建与开发接入
使用JAVA开发微信公众平台(一)--环境搭建与开发接入一. 初始微信公众平台微信公众平台,即我们平时所说的"公众号",曾用名"官方平台"."媒体 ...
BI报表开发之环境搭建（二）
上一篇<BI报表开发之环境搭建(一)>中详细描述了SQL SERVER R2 的安装步骤,本篇将继续描述BI报表开发的环境搭建部分-- Orale数据库安装. <1>下载ora ...
1、RDA8910(4GCAT1)CSDK二次开发：环境搭建
https://blog.csdn.net/weixin_44570083/article/details/106210592 目录点击这里查看所有博文本系列博客所述资料均来自合宙官方,并不是 ...
python ai应用开发_AI应用开发实战 - 从零开始搭建macOS开发环境
AI应用开发实战 - 从零开始搭建macOS开发环境联系我们 OpenmindChina@microsoft.com 零.前提条件一台能联网的电脑,使用macOS操作系统请确保鼠标.键盘.显示器 ...
JZ2440驱动开发之环境搭建
作为Linux驱动开发的小白搭建整个开发环境是至关重要的一步,鄙人是从裸机程序直接跳转到驱动里面来的,裸机到驱动的衔接没怎么看,所以在刚开始驱动的时候搭环境遇到了大麻烦,不过还是在坚持中挺过来了,还得 ...
windows phone开发第一步:搭建软件开发环境
2019独角兽企业重金招聘Python工程师标准>>> windows phone开发第一步:搭建软件开发环境:http://www.cnblogs.com/hanjun/archi ...
auto.js id为参数滑动_【Autojs教程】02Autojs PC端开发调试环境搭建
[Autojs教程]02-Autojs PC端开发调试环境搭建写在前面本篇教程算是保姆级教程了,希望以此能吸引更多感兴趣的同学学习Autojs,也希望大家能因此碰撞出更多的奇思妙想关注微信公众号 ...
小程序开发及环境搭建及发布
一.小程序开发及环境搭建 1.下载Hbuild X https://www.dcloud.io/hbuilderx.html 2.下载腾讯开发工具 https://q.qq.com/wiki/tool ...

VUE前段开发-开发环境搭建和开发工具安装

一 VUE介绍

二 VUE前端开发环境和工具介绍

三 VUE前端开发环境和工具安装

四测试环境是否搭建成功

VUE前段开发-开发环境搭建和开发工具安装相关推荐

最新文章

热门文章

VUE前段开发-开发环境搭建和开发工具安装

一 VUE介绍

二 VUE前端开发环境和工具介绍

三 VUE前端开发环境和工具安装

四 测试环境是否搭建成功

VUE前段开发-开发环境搭建和开发工具安装相关推荐

最新文章

热门文章

四测试环境是否搭建成功