安装完 Node.js 和 npm/cnpm 后。通过命令控制面板：
1，创建 webpack 模板的新项目：vue init webpack my-project
2，进入项目：cd my-project
3，安装依赖包：cnpm install + 回车 (淘宝镜像使用) / npm install (下载国外的npm才使用)
4，运行项目：npm run dev
5，知道 localhost:8080可以访问，再进行以下配置。
首先必须在url/pages/demo2/index.vue 创建 index.vue,如下index.vue代码：
<template>
<h3>我爱你</h3>
</template>
<script>
export default{
data(){
return{
}
},
beforeCreate(){
console.log("beforeCreate");
},
created(){
console.log('created');
},
beforeMount(){
console.log('beforeMount');
},
mounted(){
console.log('mounted');
},
beforeDestory(){
console.log('beforeDestory');
},
destoryed(){
console.log('destoryed');
}
}
</script>
router文件夹下面的index.js，即路由的配置：
import Vue from 'vue'
import Router from 'vue-router'
// @代表src目录
import HelloWorld from '@/components/HelloWorld'
//这是第二种导入方式，所有版本都支持。
import Demo1 from '@/pages/demo1/index.vue'
//如果页面的名称是index.vue，那么可以直接省略该页面。
//如：import Demo2 from '@/pages/demo2' 前提是必须先创建一个index.vue文件才行
import Demo2 from '@/pages/demo2/index.vue'
Vue.use(Router)
export default new Router({
routes: [
//下面每一个{}都是在配置一个路由。
{
/**
* 斜杆表示一个页面，就是component:HelloWorld
* 斜杆 表示根目录，如果斜杆后面没有输入其他东西，默认就是进入默认页面。
*/
path: '/',
name: 'HelloWorld', /*页面的名称*/
/*component 组件 成分 组成部分 英 /kəmˈpəʊnənt/
*component:HelloWorld，并不是说HelloWorld文件在components目录下。
*这里仅仅表达的是：HelloWorld是一个组成部分。
*这里的文件是有上面 inport 进行导入的：import HelloWorld from '@/components/HelloWorld'
* @ 表示 src 目录 即：'src/components/HelloWorld'
*/
component: HelloWorld
},
/*
{
path:'/demo1',
name:'demo1',
// 第一种引入路劲，有一些版本不支持该方式，所以不推荐使用。如下：
component:require("@pages/demo1/index.vue")
}*/
{
path:'/demo1',//地址栏根目录后面，即斜杆后面输入该内容就会跳跳转到绑定的页面。
name:'index',//这只是一个别名，暂时用不到。
component:Demo1 //这里的绑定的Demo1是指：上面import进行导入指定路径的页面。
},
{
path:'/demo2',//地址栏根目录后面，即斜杆后面输入该内容就会跳跳转到绑定的页面。
name:'index',//这只是一个别名，暂时用不到。
component:Demo2 //这里的绑定的Demo1是指：上面import进行导入指定路径的页面。
}
]
})
其他注意点：
<template>
<div id="app">
<!-- 运行时，页面会出现一个 V 形图标，就是在这里给添加的，所以，删除即可。 -->
<!-- <img src="./assets/logo.png"> -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>