使用vue-cli---搭建总体目录

这个项目目录是用vue-cli搭建而成的，因此咱们首先先从vue-cli开始。

vue-cli

1. 在正式开始项目以前咱们先介绍一下vue-cli，vue-cli是一个脚手架工具，vue-cli是帮助咱们写好vue.js基础代码的工具，能够帮助咱们生成一个项目目录，能够本地调试，单元测试，代码部署等等。
   github地址：https://github.com/vuejs/vue-cli

安装vue-cli

$ npm install -g vue-cli

安装完成以后，咱们能够在命令行直接输入vue
使用vue-cli

$ vue init <template-name> <project-name>

第一个是模板名称，第二个是项目名称，模板有webpack，webpack-simple ，browserify ，browserify-simple ，simple咱们这个项目使用的是webpack。

下面咱们就来进行咱们的项目搭建：
vue init webpack myShell

这样就生成了一个项目目录，咱们按照它的提示

cd myShell
  npm install
  npm run dev

运行完成，会自动打开浏览器访问http://localhost:8080/ 也就是咱们的项目首页，下面咱们介绍一下总体的项目目录和webpack配置项。

目录结构介绍

1.build和config都是webpack配置

2.src是存放项目源文件的目录

3.static 存放第三方静态资源，这个里面的gitkeep是这个目录为空，也能够把这个目录提交的git仓库里面，由于一般一个空目录是不能提交git仓库里面的

4.babelrc 是babel的配置项。

5.editorconfig是编辑器的配置项

6.gitignore里面存放的是会忽略语法检查的目录

7.index.html 入口页面

8.package.json是项目的描述和依赖，咱们在开始的时候执行npm run dev ，就至关于执行了这个文件里面的scripts的dev对应的 node build/dev-server.js。

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },

配上一篇package.json属性详解的文章，若是有不了解package.json里面的属性能够看看这篇文章。
https://zhuanlan.zhihu.com/p/...