vue.js开发环境安装教程


Posted in Javascript onMarch 17, 2017

一、简介

Vue.js 是什么

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js是一个MVVM模式的框架,如果读者有angular经验,一定能够很快入门Vue的

vue.js的特点:

易用: 已经会了HTML,CSS,JavaScript?即刻阅读指南即可开始构建应用!

灵活: 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

高效: 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化

二、环境搭建

vue推荐开发环境:

Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

npm: Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像(http://npm.taobao.org/)

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板

三、安装node.js

从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具,输入node -v,如下图,如果出现相应的版本号,则说明安装成功。

vue.js开发环境安装教程

npm包管理器,是集成在node中的,所以,直接输入npm -v就会如下图所示,显示出npm的版本信息。

vue.js开发环境安装教程

oK!node环境已经安装完成,npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm。

安装cnpm

在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待,安装完成如下图。

vue.js开发环境安装教程

完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网。

安装vue-cli脚手架构建工具

在命令行中运行命令npm install -g vue-cli,然后等待安装完成。通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

用vue-cli构建项目

要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。在这里,我选择桌面来存放新建的项目,则我们需要先把目录cd到桌面,如下图。

vue.js开发环境安装教程

在桌面目录下,在命令行中运行命令vue init webpack firstVue。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在桌面生成该文件夹),如下图。

vue.js开发环境安装教程

运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。

vue.js开发环境安装教程

打开firstVue文件夹,项目文件如下所示。

vue.js开发环境安装教程

这就是整个项目的目录结构,其中,我们主要在src目录中做修改。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装,如下图。

vue.js开发环境安装教程

安装项目所需的依赖

要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令cnpm install,等待安装。

vue.js开发环境安装教程

安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。

vue.js开发环境安装教程

安装完依赖包之后,就可以运行整个项目了。

运行项目

在项目目录中,运行命令npm run dev,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

vue.js开发环境安装教程

这里简单介绍下npm run dev命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是node build/dev-server.js命令的一个快捷方式。

项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。

vue.js开发环境安装教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
jquery 手势密码插件
Mar 17 #Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 #Javascript
AngularJS路由切换实现方法分析
Mar 17 #Javascript
js判断是否是手机页面
Mar 17 #Javascript
Angular组件化管理实现方法分析
Mar 17 #Javascript
Bootstrap表单制作代码
Mar 17 #Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 #Javascript
You might like
php计算程序运行时间的简单例子分享
2014/05/10 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
jquery处理json对象
2014/11/03 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python发送Email方法实例
2014/08/21 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python图形用户接口实例详解
2019/12/16 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
大专自我鉴定范文
2013/10/01 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
北体毕业生求职信
2014/02/28 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
合作经营协议书范本
2014/04/17 职场文书
国庆节演讲稿
2014/05/27 职场文书
运动会跳远广播稿
2015/08/19 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers