windows环境下搭建vue+webpack的开发环境

前段时间一直在断断续续的看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环境搭建终于大功告成了。

时间: 2024-08-02 02:49:19

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

在window的环境下搭建react-native的Android开发环境(转)

关于os x环境搭建以及react native入门学习资料请移步:http://www.lcode.org/react-native/ 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 1.安装Java 这里需要注意对环境变量的设置,可以根据java -version来检测一下 2.安装SDK 这里需要注意设置环境变量ANDROID_HOME:Andr

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

原文:windows下搭建Apache+Mysql+PHP开发环境 要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位); Apache2.2;MySQL Server 5.5php-5.3 下载地址 环境下载 官方下载地址 Apache MySql PHP 至于我使用的版本已经上传到百度云提供大家下载了,这里就不多啰嗦了!! Apache Apache的安装和普通的应用程序安装没什么太大的区别,关键是配置.打开安装路径下的"conf\httpd.conf"文

(转)Eclipse下搭建Hadoop2.4.0开发环境

Eclipse下搭建Hadoop2.4.0开发环境 一.安装Eclipse 下载Eclipse,解压安装,例如安装到/usr/local,即/usr/local/eclipse 4.3.1版本下载地址:http://pan.baidu.com/s/1eQkpRgu 二.在eclipse上安装hadoop插件 1.下载hadoop插件 下载地址:http://pan.baidu.com/s/1mgiHFok 此zip文件包含了源码,我们使用使用编译好的jar即可,解压后,release文件夹中的h

Ubuntu下搭建Cocos2D-X 3.6开发环境

简单讲解在Ubuntu下搭建Cocos2D-X 3.6开发环境的过程,希望对大家有用. 1.解压下载的包,找到build目录: 在终端下先执行install-deps-linux.sh文件 结果类似: 时间可能比较长. 2.回到解压包的根目录下执行setup.py: 可以看出这个执行完成的是检测系统环境并在配置文件中加入需要的环境变量,会将原配置文件备份. 3.在解压包的目录运行 cmake . 注意后面代表当前目录的 . (不要在意sudo) 4.make 用cmake生成的Makefile就

在Linux下搭建Java web的开发环境

笔者最近在学习Linux,想通过搭建Java Web开发环境来巩固学习的基本基本知识. 1.明确实验环境及下载相关软件 在虚拟机中搭建好的Linux环境下搭建.下图 1.1 是相关软件.UTomcat.64位Linux下jdk.mysql.<均可到官网上去下载> 图 1.1 所需软件 2.制作ISO文件. 需要将图 1.1 中的三个文件封装成ISO文件.使用UltraISO工具.不会的自己百度吧,百度很强大的哦! 图 1.2 制作后的到的ISO文件 3.将ISO文件添加到Linux系统中. 图

【Python学习一】在OSX系统下搭建Python语言集成开发环境

Python是一门简单易学,功能强大的编程语言.它具有高效的高级数据结构和简单而有效的面向对象编程方法.Python优雅的语法和动态类型以及其解释性的性质,使它在许多领域和大多数平台成为编写脚本和快速应用程序开发的理想语言. 下面介绍如何在OSX下安装Python语言集成开发环境.主要分为2过步骤 一.下载安装 首先进入https://www.jetbrains.com/网站,Jetbrains是一家国外的公司,听说他们开发了很多很棒的ide. 找的Pycharm. PyCharm是一种Pyth

Windows 环境下vue+webpack前端开发环境搭建

一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org 之后回车等待命令 3.接着安装全局的vue-cli脚手架,用于帮助你快速搭建所需的Vue的开发模板框架 $ cnpm install -g vue-cli 回车,等待安装, 安装完成后

在Windows下搭建Cocos2d-X的Android开发环境

在前面的博客中介绍了搭建Windows下的Cocos2d-X开发环境和搭建Windows下的Android开发环境,今天介绍搭建Cocos2d-X下的Android开发环境 在搭建Cocos2d-X下的Android开发环境前,首先要搭建好Windows下的Cocos2d-X开发环境和Windows下的Android开发环境 如果没有搭建好这两个环境可以看本人的博客 搭建Windows下的Cocos2d-X开发环境:http://blog.csdn.net/u010105970/article/

Ruby Rails入门——windows下搭建Ruby Rails Web开发环境

Ruby on Rails 是一个可以使你开发,部署,维护 web 应用程序变得简单的框架.2015年10月编程语言排行榜 Ruby进入TIOBE排行榜前十,可见其流行程度如此之高.本文就帮你打开Ruby on Rails Web开发的大门,助你进入Ruby on Rails的世界,感受不一样的风景. Ruby on Rails完整安装包 下载地址:http://railsinstaller.org/en 希望快速搭建开发环境的朋友可以试试这个,我还没试过: 我使用的是下面的安装过程,中间遇到不