vue.js的安装方法


Posted in Javascript onMay 12, 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 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
js和jquery中获取非行间样式
May 05 jQuery
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
JS匹配日期和时间的正则表达式示例
May 12 #Javascript
js如何获取网页所有图片
May 12 #Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 #Javascript
jQuery手风琴的简单制作
May 12 #jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 #jQuery
Centos6.8下Node.js安装教程
May 12 #Javascript
详解Node.js项目APM监控之New Relic
May 12 #Javascript
You might like
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHP chop()函数讲解
2019/02/11 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
跟老齐学Python之变量和参数
2014/10/10 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
使用Python读取大文件的方法
2018/02/11 Python
python简单操作excle的方法
2018/09/12 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
Java中实现多态的机制
2015/08/09 面试题
介绍Ibatis的核心类
2013/11/18 面试题
2014年酒店服务员工作总结
2014/12/08 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
Python 图片添加美颜效果
2022/04/28 Python