搭建vue开发环境的步骤

搭建vue开发环境的步骤

相信很多人在刚开始学习vue这个框架的时候,在最开始搭建开发环境的时候,都会遇到一些大大小小的坑,我之前在学习angular的时候搭建过一次,过了一个月后在搭建第二次的时候,竟然有一些混乱,所以今天想整理出来;

vue现在在前端,相对于算是现在前端工程师都比较常用的框架之一,他和angular有一些相似之处,所以用过angular的伙伴们,再来学习vue应该不会感觉太难;

一:在搭建vue的开发环境之前,一定一定要先下载node.js,,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网里面下载,根据自己的电脑选择是32还是64 ,网址:http://nodejs.cn;

 

二:下载好node之后,打开docs管理工具,先看看node安装成功了没有,输入 node -v ,回车,会输出node的版本号,

这样就已经是安装成功了,由于在国内使用npm是非常慢的,所以在这里我们推荐使用淘宝npm镜像,使用

淘宝的cnpm命令管理工具可以代替默认的npm管理工具:$ npm install -g cnpm --registry=https://registry.npm.taobao.org;

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

 

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

然后我们开始创建新的项目输入命令:vue init webpack my-project  回车,my-project是我自己的文件夹的名字,是基于webpack的项目,输入之后就一直回车,直到出现是否要安装vue-route,

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

 

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

四:文件夹已经下载好了,现在就可以进入文件夹,输入: cd my-project 回车,因为各个模板之间都是相互依赖的,所以现在我们要安装依赖,

输入命令:cnpm install

五:已经安装好之后,现在要来测试一下我们下载好的模板能不能正常的运行,在命令行输入:cnpm run dev 回车即可,

8080是默认的端口,要访问的话,直接在浏览器输入localhost:8080就可以打开默认的模板了;

 

这样,我们的vue基础项目已经安装并运行起来了,已经踏入了vue的大门;撒花,完结;

 

来自 https://www.cnblogs.com/winter92/p/7117057.html

转载于:https://www.cnblogs.com/badActor/p/8492050.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/267547.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ccxprocess可以禁用么_提效 | 5G时代网站还需要加速么?

看到标题, 你一定会说都已经 5G 时代了, 还要在网络提速上下功夫么? 答案是: 是的. 如果你是做国际或者全球业务的, 会更有体会, 很多国家和地区的网络是非常差的, 说他们停留在 2G 时代也不过分的.即使是国内良好的网络环境下, 做好网络提速, 也是可以提高用户体验以及缓解服…

java trie实现

http://www.riaos.com/ria/5814

ubuntu下命令安装与卸载软件方法

2019独角兽企业重金招聘Python工程师标准>>> 刚 刚接触ubuntu就开始一直在安装语言包、升级、常用软件和其它相关依赖等等东西,总的来说,是一个劲儿的装,缺全然不知怎么卸载,现在把安装和卸载写 在一块,一旦…

iOS 动画基础总结篇

iOS 动画基础总结篇 动画的大体分类(个人总结可能有误) 分类.png UIView 动画 属性动画 12345678910111213141516171819[UIView beginAnimations:nil context:nil];[UIView setAnimationDelay:1];[UIView setAnimationDuration:2];[UIView setAnimationRepeatCount:100];[UIVie…

bootstraptable获得所有行_郎酒领衔,2020“川酒全国行”首站香满花城

12月8日,2020“川酒全国行”首站在广州开启。以“川酒金花醉美珠江”为主题,本次活动由四川省经济和信息化厅指导,四川中国白酒金三角酒业协会主办,四川郎酒股份有限公司承办,五粮液、泸州老窖、剑南春、舍得、水井坊协…

centos7根据端口查进程_记录一次CentOs7下Nginx+WSGI部署Django项目(超详细)

记录一次Django部署的文章,不是很熟悉Linux系统,踩了不少坑,本篇文章相当于是一个总结,我会在本文中详细介绍,部署单个Django项目和多个Django的方法,如读者有更好的方法,欢迎留言一起探讨~长话…

淘宝跨域获取Cookie分析

最近在发现使用Taobao的时候的一个小细节,于是便萌发起了写这篇文章。 当我们在 www.taobao.com 中进行登录之后,然后直接切换到 www.tmall.com 域名下,发现www.tmall.com首页的最顶部马上显示成了: 您好, andyfaces。 首先&#…

js原型和原型链

我们要理解js的原型,首先需要知道5条js原型规则: 1.js引用类型(function ,array ,object)都可以任意扩展自己的属性。 1 function fn(){2 3 }4 fn.age10;5 console.log(fn.age);//106 7 var arr[1,2,3];8 arr.namekeke;9 console.log(arr);//[1,2,3,name…

蜡笔小新里的钢达姆机器人怎么画_写字机器人好用吗? 组装就花了5个小时 还要学习软件、录入字体...

据江苏公共新闻频道《新闻360》报道:新学期开学,各种各样的课后作业成了孩子和家长关注的话题。前不久,一条“孩子购买代写作业机器人,被家长发现”的新闻,引发了强烈争议。这种可以写字的机器人到底是什么&#xff1f…

20165235 Java第一周学习总结

(# 20165235 Java第一周学习总结 Ubuntu下git的安装与使用首先Ubuntu下git的安装,使用sudo apt-get install git下载Ubuntu,下载完成后可以用指令git查看。 安装完git之后输入git config --global user.name "名字",git config --global user.…

解决opencv在pycharm中无代码自动提示的bug

2018-03-0422:19:39 首先,估计这不是bug 可能是我自己误操作导致的,但是让我搞了好久才搞定,实在是苦恼 如图已实现功能,百度里有很多朋友出现了,这个无代码提示的问题 大概是这样的,毕竟,软件这…

看风水用什么罗盘最好_兰花用什么花盆栽植最好?

兰花用什么花盆栽植最好?高低深浅如何选?文:花木君经常有兰友咨询关于兰花的花盆的问题,诸如用浅盆还是深盆,用什么材质的花盆适宜之类,由于品种不同,兰丛大小各异,如果泛泛的回答&a…

发布到服务器接口404_接口测试怎么做?

上一期咱们讲到如何使用咱们的龙测工具实现黑盒测试这不,接口也来啦实验步骤抢先看1.首先确定接口的结构,以龙测登录为例请求方式:POSTURL:https://prod.dragontesting.com/api/login请求体:包含两个必填参…

docker ubuntu 文件同步_Docker 的数据管理--Docker从入门到精通摘记

Docker 数据管理用户在使用 Docker 的过程中,‍‍往往需要能够查看容器内应用产生的数据,‍‍或者说‍‍需要把容器内的数据进行备份,‍‍再或者说‍‍多个容器之间需要进行数据的共享,‍‍那么这些就必然涉及到容器的数据管理操作…

杂项:UN-APP

ylbtech-杂项:APP1.返回顶部 2.返回顶部3.返回顶部4.返回顶部5.返回顶部 6.返回顶部7.返回顶部8.返回顶部9.返回顶部 10.返回顶部11.返回顶部12.返回顶部13.返回顶部14.返回顶部15.返回顶部 1、https://baike.baidu.com/item/%E6%89%8B%E6%9C%BA%E8%BD%AF%E4%BB%B62…

ubuntu上网慢的问题

2019独角兽企业重金招聘Python工程师标准>>> 测试用的是ubuntu11.10,教育网宽带,静态IP,无路由 如果用的是路由的应该不会很慢吧,路由自带DNS缓存功能的,本地DNS缓存就没有必要了 建立本地DNS缓存: (1) 安装DNS缓存软件…

c include 多层目录_Rsync 秒杀一切备份工具,你能手动屏蔽某些目录吗?

转自:高效运维引言Rsync 是一种快速且通用的命令行实用程序,可通过远程shell在两个位置之间同步文件和文件夹。使用 Rsync,可以镜像数据,创建增量备份,并在系统之间复制文件。复制数据时,你可能要根据文件名…

Lucene学习笔记(1)

Lucene学习笔记可以搜索文本文件,理论上可以搜索任何类型的数据。只要先把数据转化为文本,就可以对数据进行索引和搜索。使用了反向索引的机制,维护一个词/短语的表,对于每个词和短语都有一个链表描述有哪些文档包含这个词和短语。…

android 录音原始文件_5分钟短文 | Android证书生成,签名,验证,虽然难,但学一次就够了!...

引言从Android演进开始,APK签名就已经成为Android的一部分,并且android要求所有Apks都必须先签名,然后才能将其安装在设备上。关于如何生成密钥以及如何签名的文章很多。一个Apk,但我们将从安全角度进行研究。在对Apk文件进行反编…

WCF跨域 这可能是由于试图以跨域方式访问服务而又没有正确的跨域策略,或策略不适用于 SOAP...

尝试向 URI“http://localhost:8001/AccountService.svc”发出请求时出错。这可能是由于试图以跨域方式访问服务而又没有正确的跨域策略,或策略不适用于 SOAP 服务。您可能需要与该服务的所有者联系,以发布跨域策略文件并确保该文件允许发送 SOAP 相关的…