十分钟上手-搭建vue开发环境(新手教程)

想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建vue开发环境,运行GitHub上的开源项目。步骤很简单,只是在搭建环境的过程中会遇到各种各样奇怪的报错,十分让人头疼。

1:安装node

端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。

图片.png

2:查看node的版本号

下载好node之后,以管理员身份打开cmd管理工具,,输入 node -v ,回车,查看node版本号,出现版本号则说明安装成功。

输入命令: node -v

图片.png

3:安装淘宝npm镜像

由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue. 淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

图片.png

4:安装全局vue-cli脚手架

淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;

输入命令:cnpm install --global vue-cli

图片.png

5:建一个新项目

搭建完手脚架之后,我们要开始建一个新项目,这个时候我建议,尽量不要装在C盘,因为vue下载下来的文件比较大,如果要改盘的话,直接输入D:回车就可以直接改盘

输入命令:vue init webpack my-project-first

回车,my-project-first是我自己的文件夹的名字,是基于webpack的项目,输入之后就一直回车,直到出现是否要安装vue-route,

这个我们在项目要用到,所以就输入y 回车

图片.png

6:注意

下面会出现是否需要js语法检测,这个我们暂时用不到,就可以直接输入no,后面的都可以直接输入no,都是我们暂时用不到的

图片.png

创建完成之后的提示:

图片.png

打开D盘查看一下,会发现多了一个刚刚创建的文件夹

图片.png

7:进入项目文件夹

文件夹已经下载好了,现在就可以进入文件夹,输入: cd my-project-first 回车进入新建的项目。

输入命令:cd my-project-first

8:在项目里安装依赖

因为各个模板之间都是相互依赖的,所以现在我们要安装依赖,在项目里输入以下命令。

输入命令:cnpm install

图片.png

9:运行

一切环境依赖安装准备就绪,我们来测试一下自己新建的vue项目的运行情况,输入命令:cnpm run dev直接回车。会弹出一个浏览器访问地址默认为localhost:8080。(我将地址修改为8081进行访问)

输入命令:cnpm run dev

图片.png

10:在浏览器输入localhost:8081

8080是默认的端口,要访问的话,直接在浏览器输入localhost:8080就可以打开默认的模板了;(我的电脑上8080端口有需要,被另外一个项目占用,故而使用8081的端口)

在浏览器输入localhost:8081,显示如下,到此为止,vue开发环境搭建完毕。

图片.png

但是在最后一步的时候,有些人会遇到这样的报错:

图片.png

图片.png

不要着急,我也遇到过这样的情况,总结了一个非常完美的解决方案。 解决方案: 1:在项目里执行这样的命令

npm i prettier@~1.12.0

图片.png

:2:重新开启运行即可成功:

npm run dev

图片.png

最后如何修改默认的端口?

既然提到自己修改了默认的端口,那就说明一下。根目录下有一个config文件夹,看名字就知道与配置有关,打开config目录下的index.js,这里不仅可以改变端口,还可以根据需要改变其他配置信息。

图片.png

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Ryan Miao

web项目中,视图层中关于相对路径和绝对路径

1.在jfinal项目中   因为一直使用的jfinal,没感觉路径问题。   举个栗子,项目名字叫做test.访问一个Controller的映射为/user/...

36240
来自专栏编码小白

Ofbiz模块加载机制即创建独立模块(脱离热部署)

一般我们在ofbiz下的hot-deploy下直接创建模块组件就可以进行访问,但是我觉得文件过多话,就不方便管理,所以我们可以分离出来单独建立一个文件模块...

33450
来自专栏后端技术探索

Nginx从听说到学会(3.进程模型)

众所周知,nginx性能高,而nginx的高性能与其架构是分不开的。那么nginx究竟是怎么样的呢?这一节我们先来初识一下nginx框架吧。

10220
来自专栏极客慕白的成长之路

搭建自己的Git服务器

搭建Git服务器   让我们先看下服务器端SSH访问的配置。在这个例子中,我们使用authorized_keys的方法认证用户。我们假设你的服务器是一个标...

24610
来自专栏ccylovehs

mysql启动报错The server quit without updating PID file

修改datadir=/var/lib/mysql     -- linux中mysql安装的默认路径

18.4K10
来自专栏测试驿栈

JProfiler简明使用教程

 JProfile是一款性能瓶颈分析工具,监控粒度可以细化到某一个类包,堪称神器!我安装了一下9.11的版本,并简单说说使用方法。

2.1K30
来自专栏测试驿栈

Linux内存机制以及手动释放swap和内存

我们知道,直接从物理内存读写数据要比从硬盘读写数据要快的多,因此,我们希望所有数据的读取和写入都在内存完成,而内存是有限的,这样就引出了物理内存与虚拟内存的概念...

52730
来自专栏跟着阿笨一起玩NET

搭建windows server 2008 r2 FTP 后 开启防火墙无法访问的解决办法

转自http://kkworms.blog.51cto.com/540865/558477

2.9K10
来自专栏技术之路

[个人翻译]Redis 集群教程(中)

官方原文地址:https://redis.io/topics/cluster-tutorial 水平有限,如果您在阅读过程中发现有翻译的不合理的地方,请留言,我...

24180
来自专栏不想当开发的产品不是好测试

find命令小结

背景:由于机器上log日志比较多,所以想写个脚本定时清理日志 find  /apps/logs/log_receiver -mtime +7 -name "*[...

21050

扫码关注云+社区

领取腾讯云代金券