环境安装：
先看看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打包问题导致的代码没生效。
