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 相关文章推荐
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
koa-router路由参数和前端路由的结合详解
May 19 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记录日志的实现代码
2011/08/08 PHP
php中stream(流)的用法
2014/03/25 PHP
PHP的自定义模板引擎
2017/03/24 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python的面向对象思想分析
2015/01/14 Python
python操作oracle的完整教程分享
2018/01/30 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
高中军训感言500字
2014/02/24 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
小学生读书笔记范文
2015/06/30 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python