前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了。我要把我所参考的文档和实际遇到的问题分享给大家。由于本人也是初级菜鸟一枚,如果有错误,还望谅解指正。下面言归正传:

所参考的文档链接:http://blog.csdn.net/syyling/article/details/52004892

http://www.cnblogs.com/ixxonline/p/6007885.html (i笑笑Online的博客

http://www.cnblogs.com/ganmy/p/6029774.html

http://www.imooc.com/qadetail/184021?t=276040

前言,做项目的时候我用git比较多,所以我是首先安装的git,他的右键git bash here定位比cmd的命令行要准确,接下来的命令都是利用git的git bash here。

1、首先,vue.js是一种前端框架,一般利用vue创建项目是要搭配webpack项目构建工具的,而webpack在执行打包压缩的时候是依赖node.js的环境的,所以,要进行vue项目的开发,我们首先要安装node.js。node.js的官方地址为:https://nodejs.org/en/download/,下载完毕,按照windows一般应用程序,一路next就可以安装成功,建议不要安装在系统盘(如C:)。

2、安装完node之后,就要安装cnpm,由于许多npm包都是在国外,安装起来特别慢,所以我们这里利用淘宝的镜像服务器,来对我们依赖的module进行安装。

安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org  之后回车等待命令

3、接着安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架

命令为:cnpm install -g vue-cli,回车,等待安装

安装完后,可以输入vue,然后回车,如果出现vue的信息,则说明安装成功了。

4、紧接着,就该创建项目了,自己找一个合适的地方,新建一个项目文件夹,根据自己的需要命名,我的命名为 my-vue,然后,打开此文件夹,右键git bash here,定位到此文件夹,输入:vue init webpack my-vue(项目文件夹名),回车,等待一小会儿,依次出现‘git’下的项,可按下图操作:

此时,观察my-vue的文件夹下又多了一个vue-test文件夹,这个就是vue项目的文件夹,如图所示:

5.之后通过命令:cd vue-test 进入此文件夹,在利用命令:cnmp install,回车,等待一小会儿,回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)。

6、在命令行里继续输入 cnpm run dev来测试环境是否搭建成功,如果出现如下图说明成功了:

在浏览器里输入localhost:8080就可以查看页面如下:

但是,,,,一出现但是,就有可能是坏情况了,我到最后一步的时候,运行 cnpm run dev的时候,就出现了错误,错误信息类似下图的信息:

,它提示npm应该更新到3.0.0版本,所以我从网上各种搜怎么更新npm的版本,关于版本更新的问题各有说法而且都不怎么起作用,依然是运行不成功,最终找到了一种办法,按照之前安装node 的相同的路径,重新下载一个最新版本的node安装,这个办法简单暴力。究其原因,是因为我将node的配置文件的registry配成了国内某镜像,然而国内某镜像未做到最新版本同步,仍保持在了4.4.7,而其对应的很多npm 安装包也并非最新,所以导致安装失败, 无法找寻到某些包的最新版本。所以重新安装是最好的解决办法了。重新安装完后,再运行cnpm run dev的时候就成功了。。至此,我的vue+webpack环境搭建终于大功告成了。

windows环境下搭建vue+webpack的开发环境的更多相关文章

  1. windows环境下安装vue+webpack的开发环境

    本人最近在学习vue,在学习的过程中遇到对的问题和解决方法 1.我们首先要安装node.js.node.js的官方地址为:https://nodejs.org/en/download/,下载完毕,按照 ...

  2. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  3. windows下搭建Apache+Mysql+PHP开发环境

    原文:windows下搭建Apache+Mysql+PHP开发环境 要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位); Apache2.2;MySQL Server 5. ...

  4. 在Ubuntu下搭建ASP.NET 5开发环境

    在Ubuntu下搭建ASP.NET 5开发环境 0x00 写在前面的废话 年底这段时间实在太忙了,各种事情都凑在这个时候,没时间去学习自己感兴趣的东西,所以博客也好就没写了.最近工作上有个小功能要做成 ...

  5. Ubuntu 14.04下搭建Node.js的开发环境

    最近想找一个轻量级且支持快速开发的服务开发平台,选来选去选择了Node.js,当时有几种选择: Python + Django(用过Django,虽然开发快速,但是感觉性能并不太好). Ruby + ...

  6. 【Python基础学习一】在OSX系统下搭建Python语言集成开发环境 附激活码

    Python是一门简单易学,功能强大的编程语言.它具有高效的高级数据结构和简单而有效的面向对象编程方法.Python优雅的语法和动态类型以及其解释性的性质,使它在许多领域和大多数平台成为编写脚本和快速 ...

  7. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  8. 手把手教你在Windows下搭建React Native Android开发环境

    最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考.(我都是参考官方文档的 ...

  9. 【转】在Windows下搭建React Native Android开发环境

    http://www.jianshu.com/p/2fdc4655ddf8 安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变 ...

随机推荐

  1. Window远程连接Linux系统(CentOS7)

    新开的云服务器是CentOS系统,基本操作按照腾讯云的介绍 http://www.qcloud.com/wiki/%E4%BB%8E%E6%9C%AC%E5%9C%B0Windows%E6%9C%BA ...

  2. ZooKeepr日志清理【转】

    转自 :@ni掌柜nileader@gmail.com 地址 数据文件管理 默认情况下,ZK的数据文件和事务日志是保存在同一个目录中,建议是将事务日志存储到单独的磁盘上. 1 数据目录 ZK的数据目录 ...

  3. ECSHOP 优化 ecshop错误转向地址更改

    原有的ECSHOP,在一些产品找不到或者被删除的情况下,亦或是直接对动态页面的访问,在参数丢失或者数据库找不到匹配数据时,程序处理是指向首页的,这样不利于优化,需对一些页面的程序进行修改,如:good ...

  4. linux进程自动关闭与dmesg的使用

    一些应用程序,后台服务被关掉.例如内存不足等,可能是操作系统关掉的.这些日志记录在dmesg中. 存储目录:/var/log/dmesg dmesg -T 可以将时间戳转化为可以识别的时间. | he ...

  5. 解决国内无法下载SDK问题——安卓镜像服务器列表

    mirrors.opencas.cn 80  稍快ubuntu.buct.cn    80 快 Android SDK在线更新镜像服务器 大连东软信息学院镜像服务器地址: http://mirrors ...

  6. 【转】第6篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+自动反射方法分析

    作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  7. apache nginx php不显示版本号

    apache 不显示版本号 http.conf 中的 修改为 ServerTokens ProdServerSignature Off 有的版本没有,在最后添加即可 php php.ini 中的 修改 ...

  8. Python_爬虫3

    正则表达式 在前面我们已经搞定了怎样获取页面的内容,不过还差一步,这么多杂乱的代码夹杂文字我们怎样把它提取出来整理呢?下面就开始介绍一个十分强大的工具,正则表达式! 1.了解正则表达式 正则表达式是对 ...

  9. poj1062

    经典的图论建模题: 先拿开的等级问题不看: 每个物品本身的价格就是有一个自定义源点到这个点距离: 有了A物品B物品优惠为W就代表由B到A的有向路权值为W: 最后的最小花费就是源点的点1的最短路径(酋长 ...

  10. HW6.24

    public class Solution { public static void main(String[] args) { int count = 0; int color; int numbe ...