vue-cli脚手架是什么及其脚手架搭建

作为有多年Asp.Net WebForm及Winform &WPF开发经验的老鸟来说，入门学习vue的过程中也碰见不少迷惑之处。首页一直在写Html+CSS+Javascipt(JQuery), 对现在比较火的vue也比较好奇，入门探一个究竟。

首先一直看到和听到利用vue-cli搭建脚手架，听的觉得很新鲜，说到脚手架映入我脑海的就是工地上看到的脚手架，

难道这里和脚手架有关系或是什么谐音之类的神秘技术呢？

哈哈，现在想想自己摸黑走夜路的过程真是可笑！叹程序员的智商真是高，想到这么形象和好理解的名字。

vue-cli就是Vue的脚手架工具，和我们工地看到的脚手架真是那么一回事，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。

了解到vue-cli后，下面实际做下vue-cli的安装：

步骤一：npm install -g vue-cli; (-g表示全局安装)

vue-list 查看可用的模板；

步骤二：选择好vue项目所在的路径，建好工程文件夹，比如：my-vue,

cd my-vue到此目录路径下：再在此目录下创建一个基于Webpack模板的新项目，执行 vue init webpack firstApp;

init 初始化的意思，firstApp为此项目命名的文件夹名称，注意和项目名区分，在回车后需要输入项目名，描述和作者及选择是否进行单元测试等；此时工程所在物理磁盘目录结构为

步骤三：cd your firstApp; npm install; 此过程为“安装项目依赖”：即安装项目所依赖的node 包。

安装后，会在上图中多出一个node_modules文件夹。

步骤四：npm run dev;

然后浏览器打入http://localhost:8080

看到这个界面说明vue-cli搭建的项目运行成功，亦即vue的脚手架工具已经搭建完成，具体的项目开发是在src目录进行。

下面看下目录结构：