Vue-cli安装和使用

和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