Vue详细的环境搭建,带你快速入门。

一、安装Node.js(Node.js官网)
在这里插入图片描述
二、在Node.js安装目录创建文件夹
1.打开Node.js的文件夹目录,创建红色箭头指向的两个文件夹。(node_global)和(node_cache)
在这里插入图片描述
三、配置环境变量
1.右击我的电脑—属性—高级系统设置—环境变量 ,如下图:
在这里插入图片描述
2.
复制nodejs目录路径(E:\node)然后选中用户变量中的Path,单击’编辑’- ->’新建’- ->输入刚复制的地址 - ->确认完成。
复制nodejs目录路径(E:\node\node_global)然后选中用户变量中的Path,单击’编辑’- ->’新建’- ->输入刚复制的地址 - ->确认完成。 注:本文档的目录是作者本地的!!!

在这里插入图片描述
四、cmd中操作
1.启动cmd(快捷键win+r),依次输入并按回车键:
npm config set prefix "E:\nodejs\node_global” 回车
npm config set cache “E:\nodejs\node_cache” 回车
npm root -g 回车
注:Node.js的目录文件地址改为自己的!!!

出现下面图片显示说明配置成功在这里插入图片描述
2.继续安装(基于node.js,利用淘宝npm镜像安装相关)
在cmd中里面输入:npm install -g cnpm --registry=https://registry.npm.taobao.org
(如果淘宝镜像长时间没安装完成,请重启cmd在执行此步操作)

3.安装完成之后检查是否安装成功:在CMD中输入:cnpm -v
出现下图所示安装成功:
在这里插入图片描述
4.安装webpack
Cmd中输入:cnpm install webpack -g
图片为参考
安装vue脚手架
Cmd中输入:cnpm install vue-cli -g
在这里插入图片描述
(注图片只参考)
5.创建vue.js项目
在cmd中输入:vue init webpack myname
创建一个基于 webpack 模板的新项目,后面的 my-home 指的是这个项目的名称,你也可以换成其它的。(也可以创建磁盘之后再cmd中输入文件名)
然后会下载安装这套模板,命令行会出现几个问题,你跟着下面的步骤回答就可以了。(可能会出现不一样的情况)作者在网上找了几张类似图片
在这里插入图片描述
第一行问你项目名称,输入 myname
第二行问你项目描述,输入 this is my vue
第三行问作者的名字,输入 你自己的名字就好
第四行回车,第五行yes 后面no

6.完成之后,用cd命令查找进入工程目录

在这里插入图片描述
在当前工程目录下输入命令:cnpm install
在这里插入图片描述
安装完成之后,在电脑上回到 myname 这个文件夹,里面会多一个 node_modules 文件夹。
在这里插入图片描述
接着启动项目:cmd中输入命令:npm run dev

服务器启动成功之后,下面就会给出一串指令告诉你:
在这里插入图片描述
在这里插入图片描述
然后打开浏览器进入这个页面可以看见这样的页面:输入:http://localhost:8085
在这里插入图片描述

已经完成!!!
这个教程基本上都能运行成功!
祝大家学业有成!

Guess you like

Origin blog.csdn.net/AnnyXSX/article/details/100561669