Vue.js+vue-router

2016-09-05

　　一、安装(npm)

1、安装相关包

npm install npm              //更新npm到最新版
npm install -g cnpm --registry=https://registry.npm.taobao.org                 //安装淘宝镜像cnpm
cnpm install vue             //安装vue
cnpm install webpack         //安装webpack
cnpm install -g vue-cli      //全局安装vue-cli

2、切换到你想放置项目的目录

1
2
3

vue init webpack projectname //创建项目[projectname]
cnpm install                 //安装依赖
cnpm install vue-router      //安装vue-router

3、修改配置
在src目录下找到main.js,在new Vue（）前添加如下代码

1 2	import VueRouter from 'vue-router' //引入vue-router Vue.use(VueRouter) //安装

4、定义路由
在添加的代码下开始定义路由，以下是一个完整的示例

import Vue from 'vue'
import App from './App'
/*引入路由*/
import VueRouter from 'vue-router'
Vue.use(VueRouter)
/*定义路由设置*/
//引入组件
import Hello from 'components/Hello.vue' 
import Sx from 'components/sx.vue'
import Sb from 'components/sb.vue'
import Ssr from 'components/ssr.vue'
import Ssx from 'components/ssx.vue'
//路由设置
const myRouter = new VueRouter({
		routes: [{
			path: "/",
			component: Hello
		}, {
			path: "/sx",
			component: Sx
		}, {
			path:'/sb',
			component:Sb
			
		},
		 {
			path:'/ssr',
			component:Ssr
			
		},{
			path:'/ssx/:id',
			component:Ssx
		}
		]
	})
	
new Vue({
	el: '#app',
	template: '<App/>',
	components: {
		App,
		Hello,
		Sx,
		Sb,
		Ssr,
		Ssx
		
	},
	router: myRouter        //挂载路由
})

5、在app.vue下添加相应路由标签

<router-link to='/'  exact >index</router-link>
<router-link to='/sx' exact >sx</router-link>
<router-link to='/sb'  exact >sb</router-link>
<router-link to='/ssr'  exact >ssr</router-link>
<router-link to='/ssx/bilibili'  exact >这是bilibili</router-link>
<router-link to='/ssx/acfun'  exact >这是acfun</router-link>
<router-view></router-view>

6、启动实时预览或者打包

1 2	cnpm run dev //开发环境预览 cnpm run build //打包到生产环境html css js

7、建议
1，建议看过vue官方的教程再查看本示例。
2，可以先不通过npm学习相关vue的内容，再逐步转换到npm方式上。
3，仔细看官方教程，vue:https://cn.vuejs.org/