借助node，搭建vue环境

要使用vuejs来开发，首先要有环境，这个环境需要借助于nodejs，所以要先安装node，需要借助于node里面的npm来安装.

vue.png

1.先下载nodejs安装包

在网上可以搜索到此安装包，直接下载就好了

安装nodejs成功后显示的nodejs文件夹

（1）输入node -v命令行就可以显示node版本（用cmd来输入）

Paste_Image.png 输入此命令，为了允许npm在cmd中输入运行

（2）输入webpack命令行，安装webpack

Paste_Image.png

（3）验证全局vue-cli脚手架是否安装成功

Paste_Image.png

补充：
1)需要注意的(npm也是需要在cmd里输入，nodejs编辑器只是编辑一些js)

Paste_Image.png

解决方法：

Paste_Image.png

2)还需要安装git和sdk，还有其他一些
(由于之前本人安装IDE开发软件时已安装了git和sdk，所以可以这步忽略)

3）注意：当出现这个cnpm报错（需要安装淘宝镜像）

解决方法

Paste_Image.png

（4）安装淘宝镜像，这才使cnpm不报错，输入cnpm -v查看版本

Paste_Image.png

（5）往下就是创建vue项目

Paste_Image.png

例子

Paste_Image.png

(6)需要在本地电脑中配置变量：用户变量和系统变量都需要编辑（找到nodejs的安装路径）

Paste_Image.png

(7)输入cnpm install,若此运行不成功，就需要安装淘宝镜像先，再运行命令，运行成功命令，这时项目文件夹里会自动生成node_modules

Paste_Image.png Paste_Image.png

注意：可能有时安装cnpm install没成功，就安装npm install,或者因为有时可能安装的node_modules出错了，需要删除掉再重新输命令来安装

(8)最后运行npm run dev，注意若是报错，报错信息说明需要升级

Paste_Image.png

(9)输入cnpm install -g npm版本升级

Paste_Image.png

(10)最后输入npm run dev就成功显示端口号为http://localhost:8080

Paste_Image.png

index.js文件中有显示的dev，端口为8080

Paste_Image.png

(11)在浏览器中输入localhost:8080/#/运行了app.vue文件

Paste_Image.png Paste_Image.png

最后补充说明：
很多人可能会疑惑vuejs不是像jquery插件一样可以直接引入vuejs插件后，然后嵌入在html中写小demo吗？为什么还需要搭建vue环境，其实搭建vue环境后，不用引入插件，直接写.vue后缀文件，运行此文件就可以显示小demo效果。

本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping