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编程起步(第六课)
Feb 27 Javascript
js兼容标准的表格变色效果
Jun 28 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
通过html表格发电子邮件
2006/10/09 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
对于Form表单reset方法的新认识
2014/03/05 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
js实现扫雷源代码
2020/11/27 Javascript
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
Python实战之制作天气查询软件
2019/05/14 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
python中p-value的实现方式
2019/12/16 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
公关活动策划方案
2014/05/25 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
见习报告的格式
2014/11/04 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
高中生军训感言
2015/08/01 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js