vue安装，webstorm工程搭建

一、Vue基础介绍：

     1)是一套构建用户界面的渐进式框架。

     2)只关注视图层， 采用自底向上增量开发的设计。

     3)的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

二、安装过程：

     1、安装node.js，这里不再赘述，安装后npm也自动伴随安装

查看安装结果：

node -v

npm -v

      2、安装cnmp，安装后cnpm代替npm来安装依赖包(原理上来说，cnpm做的事情，就是给大家换了个registry，就是说，库文件的源头改到了国内)，这里用淘宝镜像

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

      3、安装webpack

        打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功

      4、全局安装脚手架工具vue-cli

  打开命令行工具输入：npm install --global vue-cli，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

三、webstorm创建vue工程

     1、 webstorm直接下载安装，步骤简单省略，自定义工程目录，下一步即可

       2、初始化项目

1）进入终端命令行窗口

目录结构：

2）初始化项目：

cnpm install

3、运行项目：

npm run dev

4、浏览器验证

5、项目目录结构说明

 

总结：概括以下步骤

使用vue webpack 模板搭建项目步骤：

1. 安装 node.js(npm)，因为会用到npm包管理工具下载项目依赖等

2. 安装 webpack: npm install webpack -g

3. 安装 vue-cli： npm install vue-cli –g

4. 通过vue-cli，初始化vue项目： vue init webpack projectName(项目名)

5. 进入到项目目录： cd projectName(项目名)

6. 安装项目依赖： npm install

7. 启动项目： npm run dev