郁金香.png

<h3>环境安装</h3>
<blockquote>
安装淘宝镜像
大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
下载地址https://npm.taobao.org/
</blockquote>
也可直接用npm安装：

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

现在就可以使用cnpm命令安装模块了：

cnpm install [name]

安装webpack

cnpm install webpack -g

安装vue

  cnpm install vue

全局安装 vue-cli

  cnpm install  vue-cli -g

在磁盘新建一个空文件夹放工程用，并在终端进入该目录

cd 目录路径

创建一个基于 webpack 模板的新项目my-project

vue init webpack my-project
会有一些初始化的设置，如下可直接回车默认，或者按情况输入即可。

a1.png

进入项目目录

  cd my-project

安装依赖

  cnpm install

运行项目

cnpm run dev

成功启动项目后，将会在浏览器看到这个界面：

a2.png

有时项目没有启动成功，很有可能是相关编译打包工具没更新导致。
解决办法：请运行以下命令

npm update -g
npm update vue-cli

项目目录结构：

a3.png
<blockquote>
<b>在实际开发之前，理解各个目录的作用是很重要的，下一章节在详细介绍下各个目录的组成和内容。
Vue2.0项目入门 — 详解Vue-cli webpack模板</b>
</blockquote>