Vue开发环境搭建（从0开始学Vue）

参考文献

vu2构建项目实战

一，安装nodejs环境

下载地址：https://nodejs.org/ nodejs
安装完成了之后，在终端里面输入node -v,npm -v,能看到版本信息说明已经安装成功了

二，安装 vue-cli VUE的脚手架工具

vue-cil是vue的脚手架工具
我们首先安装全局vue-cil脚手架,用于帮助搭建所需的模板框架，命令如下：
npm install -g vue-cli
安装完成之后输入vue，如果能看到vue信息，说明安装成功

三，使用vue-cil构建一个项目

在目录中打开终端，新项目的存放路径是E:\Zeus\intelliJ_IDEA，项目名是：eduwebapp
1.创建项目：vue init webpack eduwebapp

2.进入项目所在的文件夹，打开命令终端，执行命令：npm install

等待一会，回到文件夹，会发现项目结构里，多了一个node_modules文件夹（该文件里的内容就是之前安装的依赖）
3.执行命令把项目跑起来：npm run dev

通过以上步骤，我们就创建了一个新得vue项目，打开浏览器，输入地址，就可以看到实际效果了

四，项目目录及文件结构

├── README.md                       // 项目说明文档
├── node_modules                    // 项目依赖包文件夹
├── build                           // 编译配置文件，一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config                          // 项目基本设置文件夹
│   ├── dev.env.js              // 开发配置文件
│   ├── index.js                    // 配置主文件
│   └── prod.env.js             // 编译配置文件
├── index.html                      // 项目入口文件
├── package-lock.json           // npm5 新增文件，优化性能
├── package.json                    // 项目依赖包配置文件
├── src                             // 我们的项目的源码编写文件
│   ├── App.vue                 // APP入口文件
│   ├── assets                      // 初始项目资源目录，回头删掉
│   │   └── logo.png
│   ├── components              // 组件目录
│   │   └── Hello.vue           // 测试组件，回头删除
│   ├── main.js                 // 主配置文件
│   └── router                      // 路由配置文件夹
│       └── index.js            // 路由配置文件
└── static                          // 资源放置目录

如上图所示，我们的目录结构就是这样的了。

我们绝大多数的操作，就是在 src 这个目录下面。默认的 src 结构比较简单，我们需要重新整理。

另外 static 资源目录，我们也需要根据放置不同的资源，在这边构建不同的子文件夹。