使用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/...