［vue］vue+vue-router+es6搭建一个简单的spa应用（一） #13
Description
vue+vue-router+es6搭建一个简单的spa应用
使用es6+简单的vue componet
点我看效果
1.创建工程，引入依赖npm init //引入vue npm install vue --save-dev //引入 vue router npm install vue-router --save-dev
2.创建如下目录结构
assert
build
dist
src
|--pages
|----index
|------index.vue
|----setting
|------setting.vue
|--main.js
test
index.html
package.json
3.index.html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>vue-router</title>
</head>
<body>
<div id="app">
<h1>header</h1>
<hr>
<!-- 路由外链 -->
<router-view></router-view>
<hr>
<h2>footer</h2>
</div>
<script src="dist/build.js"></script>
</body>
</html>
4.main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 创建一个路由器实例
// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用了一个记住滚动条位置的配置 随意忽略吧
var router = new VueRouter({
saveScrollPosition: true
})
//定义页面路由,这里url路由切换到/index 会加载index.vue
//然后将组件内容替换html中的<router-view></router-view>
router.map({
'/index':{
component:require("./pages/index/index.vue")
},
'/setting':{
component:require("./pages/setting/setting.vue")
}
})
var App = Vue.extend({})
router.start(App, '#app')
window.router = router
5.index.vue/setting.vue
//index.vue
<script>
export default {}
</script>
<template>
<div class="content">
<p>i am page index</p>
<a v-link="{path:'/setting'}">跳转到setting</a>
</div>
</template>
<style scoped>
p{color:red;}
</style>
//setting.vue
<script>
export default {}
</script>
<template>
<div class="content">
<p>i am page setting2</p>
<a v-link="{path:'/index'}">index</a>
</div>
</template>
<style scoped>
p{color:black;}
</style>
以上，所有的代码就编写完了
6.然后开始配置webpack相关的东西咯,这里不去详解把我package.json的配置直接贴出来了。
基本就是引入babel解析es6 引入vue-loader解析.vue文件，引入vue-hot-reload-api方便开发时候调试。
//依赖配置
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^6.0.0",
"css-loader": "^0.23.1",
"style-loader": "^0.13.1",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.3",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
//运行配置
"scripts": {
"dev": "webpack-dev-server --inline --hot --config build/webpack.dev.config.js",
"build": "webpack --progress --hide-modules --config build/webpack.prod.config.js"
}
这里要注意一下vue-hot-reload-api的版本，别引入2.x的版本，2.x的版本是专门给vue2.0用的 这点要注意。
7.运行看一看
npm install
npm run build
npm run dev
然后访问http://localhost:8080/index
点击切换看一看咯，就是如此简单