vue环境搭建步骤(亲试)

想起自己第一次入坑vue的时候,也在网上找了不少关于vue的安装步骤的方法,但是感觉都不是很详细,所以索性自己写一篇关于vue安装步骤的文章供大家参考,如有遗漏,可以在评论区补充或者滴滴我哦~

第一步  node环境检测及环境安装

1.  使用快捷键Window+R ,正常情况下会弹出一下窗口;

2.  在文本框内输入cmd,然后回车,会弹出如下图黑色窗口

3.输入"node -v"之后按回车,如果已安装node则会出现node的版本号,如下图所示,(我的node版本是8.11.4,我们可以使用 "npm -v"顺便查看一下npm的版本号),否则没有安装node请下载node安装包进行安装,下载地址:https://nodejs.org/en/ 或者 http://nodejs.cn/

 第二步 vue-cli脚手架安装

1. 如果访问外网比较慢,可以使用淘宝的镜像 https://npm.taobao.org/
打开命令终端 "npm install -g cnpm --registry=https://registry.npm.taobao.org"
回车之后,我就可以可以快乐的用 cnpm 替代 npm

2.用cnpm安装vue

"cnpm install vue -g"

3. 之后,接下来就是重点了 安装vue-cli

"cnpm install vue-cli -g"

第三步 创建工程

1. cd命令来到你将要新建工程的目录,如"D:\yunqi",创建一个基于 webpack 模板的新项目,工程名为yunqi;

2. 在该目录下输入vue init webpack mytest,就会创建一个mytest的项目;

3. 然后cd命令定位到mytest的工程目录下;

4. 安装该工程依赖的模块,这些模块将被安装在:mytest\node_module目录下,node_module文件夹会被新建,而且根据 package.json的配置下载该项目的module:

    输入并执行 "cnpm install"

5、运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来启动。

执行 cnpm run dev命令,默认浏览器会自动打开(如果您的浏览器是ie9以下的版本,请升级浏览器到最新版本或者下载谷歌浏览器或者火狐浏览器进行预览。在地址栏输入 http://localhost:8080/#/进行访问)

如在浏览器里展示上图,难么恭喜,你已经成功安装,并运行起来vue基础项目,踏入了vue的大门。

小结:本篇文章并没有把各种可能遇到的问题及错误写出来,而是着重强调了安装步骤,所以下一篇文章会为大家一一列出在安装vue的过程中可能出现的各种问题并如何去解决它们,敬请期待哦,拜拜~

猜你喜欢

转载自blog.csdn.net/qq_38383650/article/details/82588858