Vue环境安装搭建

一：下载node.js

搭建vue开发环境之前，官网选择下载node.js。vue的运行是要依赖于node的npm的管理工具来实现。

二：安装node.js

一路 “下一步”操作，安装node。

打开dos系统，查看node安装成功与否。输入

node -v

回车，成功即显示node的版本信息

 npm包管理器，是集成在node中的，即安装了node也就有了npm,输入

npm -v

命令，显示npm的版本信息

   三：安装cnpm

npm属于国外资源，国内使用较慢，所以还需安装npm的国内镜像——cnpm

推荐使用淘宝npm镜像，命令如下：

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

同理：cnpm –v可查看cnpm的信息

四：修改用户环境变量

现版本会自动为电脑配置环境变量，我们去验证一下。

我的电脑　属性　高级系统设置　环境变量

这里是自动配置好了

如果没有，那我们可以手动在path里面输入项目安装路径，无伤大雅

五：下载依赖

两种选择：

a：开发工具的终端窗口

b：安装文件目录的空白位置，右键，在此处打开命令窗口

二选一进入执行命令：

npm install

 开始自动下载，数羊等待，因为npm属于国外资源，如果失败了，莫慌，上cnpm。同样执行命令：

cnpm install

安装完成之后，会在我们的目录文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

安装完依赖包之后，就可以运行整个项目了。

六：运行项目

在项目目录中，运行命令

npm run dev

会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

Vue文件目录

build：项目构建(webpack)相关代码

config：配置目录，包括端口号等。一般是默认的。

node_modules  npm：加载的项目依赖模块

src：这里是我们开发项目的目录。里面又包含：

components：目录里面放了一个组件文件。

App.vue：项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。

main.js：项目的核心文件。

static：静态资源目录，如图片、字体等。

test：初始测试目录，可删除。

.xxxx文件：属于配置文件，如语法配置，git配置。

index.html：首页入口文件。

package.json：项目配置文件。