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

Posted 上善若水

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了windows环境下搭建vue+webpack的开发环境相关的知识,希望对你有一定的参考价值。

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

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

                         http://www.cnblogs.com/ixxonline/p/6007885.htmli笑笑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 进入此文件夹,在利用命令:cnpm 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的开发环境的主要内容,如果未能解决你的问题,请参考以下文章

window10下vue-cli及webpack的环境搭建

windows下搭建vue开发环境

(转)windows环境vue+webpack项目搭建

windows下搭建vue开发环境实践

webpack+vue2.0+nodeJs搭建环境

深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)