vue 脚手架（一，创建脚手架）

本文以转移至本人的个人博客，请多多关注！

本文以转移至本人的个人博客，请多多关注！

本文以转移至本人的个人博客，请多多关注！

本文以转移至本人的个人博客，请多多关注！

经过一段时间对Vue的学习。觉得是时间来回顾一下所学成果了。所以在此开个专题系列随笔，回顾一下vue以及相关知识。

我在用Vue之前试过React，但是我真真受不了JSX这种语法。因为我是后端人员转前端。作为使用过jsp和servlet的人员。当我第一次看到JSX语法的时候，让我顿时想起了在Servlet中拼HTML代码时的恐惧，果断放弃了React。

当然。这是我自己的一点感受。在javaEE体系中。Servlet早于JSP，其实JSP就是另一种模式的Servlet，当时提出JSP就是为了解决在Servlet中拼接Html代码的痛苦。但是JSP最后还是会编译成Servlet。之后为了更彻底的解决这种痛苦，出现了freemark等一系列的框架，彻底摆脱了JSP。然而JSX的语法让我有一种开历史倒车的感觉。这一点上Vue的模板语法和React的Render方法对比很是明显。

三大前端框架，Vue, React, angularJs 2+ 。Vue以其简单易用的优点而广受好评，并且其社区也在火速发展，与其配合的第三方框架也在不断增长中。

其中有个vue-element-admin开源项目（https://panjiachen.github.io/vue-element-admin-site/zh/），是一个很好的基于Vue和ElementUI的后台管理系统模板，再次推荐一下。

这里咱们先不管这个大项目。先从Vue自身提供的一个模板说起。Vue提供了自己的构建工具vue-cli。可以快速的搭建一个脚手架项目。

npm install vue-cli // 安装vue-cli

vue init webpack myProject //初始化项目

vue-cli 提供的脚手架有多个。这里咱们选用webpack这个，因为大部分应该都是用的webpack，应用比较广泛。

此脚手架的构建结果结构如下：

下面大体介绍一下各个目录的功能。详细的介绍会在以后的章节中陆续介绍。

1. bulid: 此目录下有构建项目时使用的配置文件。

2. config：此目录下是项目的环境常亮配置，提供给build中的文件使用

3. src：项目的源码所在目录。

4 static: 项目的静态资源文件，其中的 .gitkeep文件是git使用的一个占位文件。

再说一下下面的几个文件。其实也不用说。基本都知道是干啥的。

1 .babelrc babel配置文件，详见（https://www.babeljs.cn/docs/setup/#installation）

2 .editorconfig 这个是为了统一不同编辑器的代码格式风格。

3 .eslinttrc.js eslint 的配置文件。详见（https://cn.eslint.org/docs/user-guide/configuring）

4 .postcssrc.js  PostCSS 的配置文件。详见（https://www.npmjs.com/package/postcss）

5  index.html 项目首页的模板

6  package.json node使用的文件。

7  package-lock.json 用于锁定依赖的版本。可以参考（http://www.cnblogs.com/cangqinglang/p/8336754.html）这位兄台的解释。

8 .gitignore git的忽略文件列表

9  Readme.md 项目自述文件