首页 > 其他 > 详细

教小白vue环境搭建

时间:2019-06-28 14:27:33      阅读:122      评论:0      收藏:0      [点我收藏+]

 

 

搭建脚手架之前你得先准备Node.js,进入命令行窗口查看npm版本

技术分享图片

 

,执行npm -v便可看npm版本,如果没有版本号,则没装上,安装之后随即安装cnpm,安装cnpm得用到淘宝镜像,

npm install cnpm -g --registry=https://registry.npm.taobao.org
然后查看cnpm版本,执行cnpm -v

技术分享图片

 


安装成功之后,就开始全局安装 vue-cli,
在命令窗口执行 cnpm install -g vue-cli (全局安装vue-cli)也可以用
npm install -g vue-cli(npm下载的慢一点,cnpm下载的快一点,不过我后来在项目中发现,cnpm容易出现下载不了的BUG,然后使用npm可以下载下来,再者npm和cnpm不能混用,容易出现问题)
技术分享图片



技术分享图片
出现以上提示表示vue-cli正常安装成功,可以正式创建vue-cli工程项目了。

安装vue-cli成功后,通过cd命令进入你想放置项目的文件夹,在命令提示窗口执行创建vue-cli工程项目的命令:
vue init webpack
 

技术分享图片

 

技术分享图片

 

确认创建项目后,后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等(我是一路回车),详见上图。安装顺利执行后会,生成如下文件目录:

技术分享图片

 

到这里算是完整的创建了一个新的项目,然后怎么运行这个项目呢,在上图文件夹里面按住Shift键然后在鼠标右键有一个在此处打开powershell窗口然后输入npm run dev 回车

技术分享图片

 

技术分享图片

 

 然后

技术分享图片

运行成功!

然后复制 上图http://localhost:8080在浏览器里面打开会得到这个页面 

这就成功了

技术分享图片

 

 

 

 

 

 

 

教小白vue环境搭建

原文:https://www.cnblogs.com/XH-Lucky/p/11102121.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!