vue-webpack-starter开始小demo

1、下载

npm i vue-router

2、在index.html中引用资源

<script src="node_modules/vue-router/dist/vue-router.min.js" type="text/javascript" charset="utf-8"></script>

3、在webpack.config.js文件中配置externals

externals: {
	// jquery: ‘jQuery‘,
	// jquery: ‘$‘,//这两种方式都可以
	// VueRouter 这个值为vue-router 导出的接口对象，不知道的查
	vue: ‘Vue‘,
	‘vue-router‘: ‘VueRouter‘
	},

4、在router.js文件中加载使用

import VueRouter from ‘vue-router‘
import Foo from ‘./components/Foo.vue‘
import Bar from ‘./components/Bar.vue‘

// 这里直接默认导出new出来的router实例
export default  new VueRouter({
	routes: [{
			path: ‘/foo‘,
			component: Foo
		},
		{
			path: ‘/bar‘,
			component: Bar
		}
	]
})

5、在main.js中配置使用路由对象

import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./routers‘

// import ‘./components/main.css‘//可以这样引入css文件，并且支持热更新
new Vue({
	el: ‘#app‘,
	template: ‘<App />‘,
	router,
	components: {
		App
	}
})

/* new Vue({
	template: ‘<App />‘,
	components: {
		App
	}
}).$mount(‘#app‘) */

6、在App.vue中设置路由出口

<template>
	<div id="app">
		<h1 class="A1">已经是热更新了，呵呵呵</h1>
		<ul>
			<li><a href="#/foo">foo</a></li>
			<li><a href="#/bar">bar</a></li>
		</ul>
		<router-view></router-view>
		
	</div>
</template>

vue-webpack-starter开始小demo

原文：https://www.cnblogs.com/191080438qq/p/14977851.html