和NodeJS的express-cli相似Vue也有一個自己的腳手架,可以初始化一個Vue工程

1,檢查NodeJS版本,需要安裝NodeJS(版本4.0.0以上)

bogon:~ Brave$ node -v
v5.0.0

我的Node版本是5.0.0

2,全域性安裝vue-cli

bogon:~ Brave$ sudo npm install -g vue-cli

3,執行vue命令檢視安裝是否成功

bogon:~ Brave$ vue

  Usage: vue <command> [options]

  Options:

    -V, --version  output the version number
 

    -h, --help     output usage information

  Commands:

    init        generate a new project from a template
    list        list available official templates
    build       prototype a new project
    help [cmd]  display help for [cmd]

可以執行vue list 檢視可用模板

bogon:~ Brave$ vue list

  Available official templates:

  ★  browserify -
 
 A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack -
 
 A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

4,新建一個專案,使用webpack模板 - vue init webpack

bogon:~ Brave$ vue init webpack HelloVue

? Project name hellovue                         // 工程名稱
? Project description hellovue                  // 工程描述,會在README.md檔案生成輸入的內容
? Author wangzhen <376086383@qq.com>            // 作者,如果有git，就是讀取git的User資訊
? Vue build standalone
? Install vue-router? Yes                       // 否安裝Vue路由
? Use ESLint to lint your code? Yes             // ESLint管理程式碼(ES6程式碼風格檢查器)
? Pick an ESLint preset Standard                // ESlint-型別
? Setup unit tests with Karma + Mocha? No       // 使用單元測試工具karma和mocha 預設是
? Setup e2e tests with Nightwatch? No           // 使用e2e測試框架 NightWatch 預設是

   vue-cli · Generated "HelloVue".

   To get started:

     cd HelloVue
     npm install
     npm run dev

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

Vue build方式有兩種,一種standalone方式，第二種runtime-only為runtime方式。
runtime 打包的是 /node_modules/vue/dist/vue.common.js
standalone 打包的是 /node_modules/vue/dist/vue.js
runtime 和 standalone 這兩種方式對普通使用者使用起來沒區別，
大多數人都是在*.vue裡寫<template>...</template>，所以用runtime就夠了。

5,執行VUE程式:

   vue建立專案後已經給出瞭如何啟動這個專案的提示

   To get started:

     cd HelloVue
     npm install
     npm run dev

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

1)進入工程目錄:
bogon:~ Brave$ cd HelloVue/

2)安裝專案依賴:
bogon:HelloVue Brave$ npm install

3)啟動專案:
bogon:HelloVue Brave$ npm run dev

> hellovue@1.0.0 dev /Users/Brave/HelloVue
> node build/dev-server.js

> Starting dev server...

 DONE  Compiled successfully in 2757ms                                  14:27:47

> Listening at http://localhost:8080

開啟服務監聽8080埠,通過瀏覽器訪問 http://localhost:8080