Vue-cli是Vue的腳手架工具 。

* “腳手架”是一種元編程的方法，用于構(gòu)建基于數(shù)據(jù)庫的應(yīng)用。許多MVC框架都有運(yùn)用這種思想。程序員編寫一份specification（規(guī)格說明書），來描述怎樣去使用數(shù)據(jù)庫；而由（腳手架的）編譯器來根據(jù)這份specification生成相應(yīng)的代碼，進(jìn)行增、刪、改、查數(shù)據(jù)庫的操作。我們把這種模式稱為"腳手架"

安裝node環(huán)境

node.png

安裝 vue 和 vue-cli

npm install --global vue-cli  

vue.png

vue list 查看可用的模板

vue list

vue list.png

安裝webpack模板（可以安裝其他模板的）

vue init webpack my-project

項(xiàng)目配置

image.png

配置解釋：

  A newer version of vue-cli is available.

  latest:    2.9.1
  installed: 2.8.2

? Project name my-project                    // 項(xiàng)目名稱
? Project description A Vue.js project       // 項(xiàng)目描述,會(huì)在README.md文件生成輸入的內(nèi)容
? Author H3108 <jackie3108@126.com>          // 作者,如果有g(shù)it，就是讀取git的User信息
? Vue build standalone
? Install vue-router? Yes                    // 否安裝Vue路由
? Use ESLint to lint your code? Yes          // ESLint管理代碼(ES6代碼風(fēng)格檢查器)
? Pick an ESLint preset Standard             // ESlint-類型
? Setup unit tests with Karma + Mocha? Yes   // 使用單元測(cè)試工具karma和mocha 默認(rèn)是
? Setup e2e tests with Nightwatch? Yes       // 使用e2e測(cè)試框架 NightWatch 默認(rèn)是

   vue-cli · Generated "my-project".

   To get started:

     cd my-project
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

項(xiàng)目目錄：

進(jìn)入項(xiàng)目之后安裝依賴

cd sell
npm install / cnpm install

my-project.png

/build    webpack配置文件
/config   項(xiàng)目配置文件
/dist     發(fā)布目錄
/node_modules    依賴目錄
/src      存放的項(xiàng)目代碼
/static   直接引用文件
/test     單元測(cè)試文件
.babelrc babel  配置文件，把我們ES2105的代碼通過它編譯成ES5的。 
.editorconfig   編輯器配置 
.eslintignore   忽略語法檢查的目錄文件配置 
.eslintrc.js    eslint的配置文件 
.gitignore      配置git倉庫的忽略 
.postcssrc.js   PostCSS的配置文件
index.html      項(xiàng)目入口模板文件 
package.json    node配置文件

項(xiàng)目運(yùn)行:

npm run dev / cnpm run dev

http://localhost:8080/#/

瀏覽器會(huì)打開localhost的8080端口。項(xiàng)目運(yùn)行成功。

End.