脚手架 Hello world

环境安装：

先看看node版本，我这是8.x的，这个大版本一致就行，一般不会有啥问题

安装vue-cli 命令行工具

$ node -v
v8.4.0
$ npm install vue-cli -g

装好以后运行 vue 命令可以看到相应的参数及说明

$ 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]

可以看到有4个命令，我们先vue list 看看可用的模板

$ 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.

webpack这个有自动加载代码更新的和代码审查的更适合我们，下面使用vue init 创建新项目

$ vue help init

  Usage: vue-init <template-name> [project-name]

  Options:

    -c, --clone  use git clone
    --offline    use cached template
    -h, --help   output usage information
  Examples:

    # create a new project with an official template
    $ vue init webpack my-project

    # create a new project straight from a github template
    $ vue init username/repo my-project

$ vue init webpack db-cloud-ui

? Project name db-cloud-ui
? Project description A Vue.js project
? Author cbn<q1051372834@163.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? 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) npm

   vue-cli · Generated "db-cloud-ui".

# Installing project dependencies ...
added 1215 packages in 106.894s

Running eslint --fix to comply with chosen preset rules...
# ========================

> db-cloud-ui@1.0.0 lint E:\db-cloud-ui
> eslint --ext .js,.vue src "--fix"

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

To get started:

  cd db-cloud-ui
  npm run dev

按照提示输入项目的名称啊描述什么的，有默认项基本不用填什么，选选yes no就可以了

进入项目目录执行 npm run dev 启动项目

$ cd db-cloud-ui
$ npm run dev
 DONE  Compiled successfully in 3728ms                                                                          15:59:55

 I  Your application is running here: http://localhost:8080

打开浏览器访问项目地址 http://localhost:8080

可以看到一个Welcome to Your Vue.js App 的界面

查看src/router/index.js 可以看到默认URL指向到 HelloWorld 这个组件, 下面我们自己写一个组件

const MyHelloWorld = {
  template: '<div>hello world</div>'
}

注释掉顶部引入的HelloWorld，修改代码让默认页面显示我们的组件

router.js 代码

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

const MyHelloWorld = {
  template: '<div>hello world</div>'
}

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: MyHelloWorld
    }
  ]
})

保存后页面就显示 hello world 了， 我们每次修改代码保存后，一定要先检查npm run dev 的输出是否正常，正常再测试页面，如果报错，第一时间修复，避免因webpack打包问题导致的代码没生效。