码迷,mamicode.com
首页 > 其他好文 > 详细

搭建vue环境

时间:2018-09-14 18:29:28      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:电脑   alt   print   cal   pretty   知识   uil   镜像   http   

1.安装node.js 
进入官网 :https://nodejs.org/en/ 
技术分享图片
选择适合自己的版本下载,可以一直选择下一步进行安装。

2.验证node是否安装成功 
安装完成之后,在桌面打开终端 (win键+r键输入“cmd”即可打开),在终端输入“node -v” 会出现你所安装的对应版本就是安装成功 
技术分享图片

3.安装cnpm 
由于npm是国外的,使用起来很慢,所以用淘宝镜像cnpm代替npm,功能完全一样 
终端里面输入

npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 1

等待安装,安装成功之后输入 “npm -v ” 出现版本号,证明已经安装成功

4.安装vue-cli脚手架 
终端输入命令行

cnpm install --global vue-cli
  • 1

回车,等待安装

5.验证vue 版本 
当脚手架安装完成之后,可以在终端输入 vue -V 查看版本 
技术分享图片

———————————————————到这里,环境搭建基本完成—————————————— 
如果没有换电脑的话,以后做项目就可以直接进入下面的步骤 
如果换电脑,就要再次按照上面步骤为电脑搭建一个vue环境。

———————————————————接下来,是每次创建vue的新项目的第一步骤——————-

1.进入到想要放vue项目的文件夹 
进入到项目的存放目录,shift+鼠标右键,点击“在此处打开命令窗口” 
技术分享图片 
不进入项目目录也可以,只是如果不进入,待会生成的目录就会在桌面,占空间。

2.创建vue项目 
在该目录下,打开终端 输入 “vue init webpack VueProject” (这个命令的意思就是 我创建了一个vue项目,并且命名为“VueProject” 即通用一点表达就是 “vue init webpack 项目名”) 
等了很久很久之后……………… 
会出现 Project name 开头的命令的时候,接下来一直回车就可以 
如果有(Y/N)选择的,除了vue-router选Y,其他都选N。(全部选N也可以) 
技术分享图片

创建成功之后,会输出一个命令行 教我怎么运行vue项目 
技术分享图片 
不知道为什么有这么多ERR!! 
看着心拔凉拔凉的,但是不管哈哈哈哈

3.运行vue项目 
根据刚刚创建项目成功之后输出的命令行 
进入VueProject项目(即是刚刚 vue init webpack VueProject),打开命令行, 输入命令 “npm run dev” 
就会出现下图 
技术分享图片 
会出现一个地址:http://localhost:8080

打开浏览器输入:http://localhost:8080 回车

技术分享图片

vue项目搭建成功

记录vue的知识点,有不对的地方,请各位指正

搭建vue环境

标签:电脑   alt   print   cal   pretty   知识   uil   镜像   http   

原文地址:https://www.cnblogs.com/houqq/p/9648056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!