基于idea，从零开始搭建第一个vue项目

一、基础知识了解
搭建vue项目，需要了解node.js、npm或cnpm、webpack、vue、iview的基础只是

1、Node.js

简单的说 Node.js 就是运行在服务端的 JavaScript，是一个基于Chrome JavaScript 运行时建立的一个平台，是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

参考地址：Node.js教程

2、npm

npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段，并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。

参考地址：npm官方文档

3、cnpm

cnpm是个中国版的npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

4、webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

参考地址：webpack中文文档

5、Vue

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

参考地址：vue.js官网

6、iview

一套基于 Vue.js 的高质量 UI 组件库，通过iveiw可以快速的开发出风格一致的前端界面。

参考地址：http://v1.iviewui.com/

二、Node.js的安装

1、下载地址：https://nodejs.org/en/download/

2、下载完成之后直接进行安装

3、使用cmd命令窗口，查看是否安装成功

node -v
npm -v

能返回node和npm的版本，表明安装成功 ！！！

三、用idea搭建项目

这里需要安装vue脚手架工具

1、打开idea新建项目

• 第一步，在项目的模板页面，选择 Static Web模块，然后点击next
  

• 第二步，填写项目名称和项目的存放地址，然后点击Finish，完成创建。（注：这里我建的项目名称为example，仅供参考）
  

2、安装Vue脚手架工具
（注：vue可以在安装node的时候一起安装，也可以在新建的项目中安装）

• 第一步，打开idea的Terminal，先安装npm的淘宝镜像

输入命令：

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

我之前安装过，图片仅供参考

• 第二步，下载完成之后，继续下载vue脚手架工具

依次输入命令：

npm i -g vue-cli
vue -V (查看Vue的版本)

• 第三步，安装完成之后，初始化包结构（使用webpack）

输入命令：【 vue init webpack 包名 】

vue init webpack example

特别注意！！！：在第三步的时候有可能会报如下错误：

Command vue init requires a global addon to be installed. Please run npm install -g @vue/cli-init
大概意思是如果你要使用命令vue init还需在全局下安装cli-init，此时执行下面的命令，然后再执行第三步的语句即可。。。。。。。。
执行命令：
cnpm install -g @vue/cli-init

输入命令之后，会进行初始化设置，可以参考下图进行设置

• 第四步，初始化完成之后，会出现三行黄色字体，依次在Terminal中输入这三行字体

• 第五步，输入完成之后，会出现如下图所示的链接

• 第六步，点击网址 或者 打开浏览器，在浏览器中输入localhost：8080，出现下图的界面，证明项目搭建成功！！！