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 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
跟我学习javascript的this关键字
May 28 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
Node.js 深度调试方法解析
Jul 28 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
javascript options属性集合操作代码
2009/12/28 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
深入探讨前端框架react
2015/12/09 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python socket实现简单聊天室
2018/04/01 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
替换python字典中的key值方法
2018/07/06 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
五一服装活动方案
2014/01/11 职场文书
共产党员承诺书
2014/03/25 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
感恩教育观后感
2015/06/17 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书