(1). NodeJS安装(略)

(2). vue-clie安装

# 全局安装vue-cli
lixin-macbook:~ lixin$ npm install vue-cli -g

# 通过vue-list查看是否安装成功
lixin-macbook:~ lixin$ 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.

(3). 创建项目

# 工作目录
lixin-macbook:Desktop lixin$ pwd
/Users/lixin/Desktop

lixin-macbook:Desktop lixin$ vue init webpack first-vue

? Project name first-vue
? Project description A Vue.js project
? Author lixin <XXXXXXXX@126.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "first-vue".

# Project initialization finished!
# ========================

To get started:

  cd first-vue
  npm install (or if using yarn: yarn)
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack

(4). 启动项目

# 进入项目目录
lixin-macbook:Desktop lixin$ cd first-vue/
# 安装依赖
lixin-macbook:first-vue lixin$ npm install
# 启动
lixin-macbook:first-vue lixin$ npm run dev

(5). 测试

# 访问localhost:8080
lixin-macbook:~ lixin$ curl  http://localhost:8080

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>first-vue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

(6). 项目目录介绍

build : 存放配置文件的目录.
config : 存放部份webpack配置文件目录.
src : 源码目录.
static : 静态资源目录.
.babelrc : 把ES6的语法转换成ES5.
.postcssrc.js : CSS配置文件.
index.html : 首页.
package.json : 项目配置文件.

lixin-macbook:first-vue lixin$ tree
.
├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── static