Vue-cli安装和使用

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

1,检查NodeJS版本,需要安装NodeJS(版本4.0.0以上)

bogon:~ Brave$ node -vv5.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 <[e-mail]>            // 作者,如果有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.jsstandalone 打包的是 /node_modules/vue/dist/vue.jsruntime 和 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 install3)启动项目: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