vue 新手环境搭建到新建项目

第一步：nodejs安装（根据自己的电脑CPU版本安装对应的nodejs。64位或者是32位）

image.png

一直到安装完成

image.png

第二步：打开cmd 输入node -v和npm -v验证是否安装成功，如安装成功就会显示版本号，如下图：

image.png

第三步：nodejs安装路径下建两个文件夹"node_global"及"node_cache"

image.png

第四步：打开cmd 输入命令
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

image.png

第五步：右击我的电脑-属性-高级系统设置-环境变量

    在系统变量下新建"NODE_PATH"，输入”D:\Program Files\nodejs\node_global\node_modules“。

    用户变量"PATH"修改为“D:\Program Files\nodejs\node_global\”

image.png image.png

第六步：由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有还需要npm的淘宝镜像--cnpm

    打开cmd 输入 npm install -g cnpm --registry=http://registry.npm.taobao.org（淘宝镜像）  

第六步：输入cnpm验证是否安装成功

image.png

nodejs安装成功后，以及环境配置完成后，下面就是创建vue的项目了

第七步：输入 cnpm install -g vue-cli安装vue的脚手架 输入vue -V验证是否安装成功

image.png

第八步： 输入vue init webpack my_test(项目文件夹名)，创建新项目。项目名称可以自己定。

image.png

第九步：在 vue新项目目录中，按住shift，右击鼠标，（选择在此处打开命令窗口，打开cmd命令窗口）。

第十步：输入 cnpm install安装vue的依赖包

第十一步：输入npm run dev 运行vue项目 如果运行完没有自动弹出浏览窗口，就手动在浏览器里输入http://localhost:8080/打开页面。（如果端口号被占用，也可手动修改端口号）