windows下vue.js开发环境搭建教程


Posted in Javascript onMarch 20, 2017

最近,vue.js越来越火。在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api。废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助。ps:高手请绕道。

既然是入门实例,那肯定从最基础的开始了,希望初学者们耐心看下去。首先,列出来我们需要的东西: 

node.js环境(npm包管理器)

vue-cli 脚手架构建工具

cnpm  npm的淘宝镜像 

安装node.js

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

windows下vue.js开发环境搭建教程

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

windows下vue.js开发环境搭建教程

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

安装cnpm

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

windows下vue.js开发环境搭建教程 

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

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

在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。用vue-cli构建项目要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。在这里,我选择桌面来存放新建的项目,则我们需要先把目录cd到桌面,如下图。 

windows下vue.js开发环境搭建教程

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

windows下vue.js开发环境搭建教程 

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

 windows下vue.js开发环境搭建教程 

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

windows下vue.js开发环境搭建教程 

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

windows下vue.js开发环境搭建教程

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

windows下vue.js开发环境搭建教程

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

windows下vue.js开发环境搭建教程

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

windows下vue.js开发环境搭建教程

 这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。 项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。 

windows下vue.js开发环境搭建教程

 如果看到这个页面,那就可以开屏香槟来庆祝了,恭喜你,项目运行成功了。 今天就到这吧,下次给大家分享进一步的小案例,让大家加深对Vue.js的理解。

Javascript 相关文章推荐
16个最流行的JavaScript框架[推荐]
May 29 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
js中DOM三级列表(代码分享)
Mar 20 #Javascript
深入对Vue.js $watch方法的理解
Mar 20 #Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 #Javascript
js获取当前周、上一周、下一周日期
Mar 19 #Javascript
浅析bootstrap原理及优缺点
Mar 19 #Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 #Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 #Javascript
You might like
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
javascrit中undefined和null的区别详解
2019/04/07 Javascript
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
酒店总经理助理职责
2014/02/12 职场文书
幼儿园安全责任书
2014/04/14 职场文书
健康教育评估方案
2014/05/25 职场文书
销售人员求职信
2014/07/22 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
Python pandas求方差和标准差的方法实例
2021/08/04 Python
python中pymysql包操作数据库方法
2022/04/19 Python