［vue］vue+vue-router+es6搭建一个简单的spa应用（一）

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 点击切换看一看咯，就是如此简单

songhlc / blog

［vue］vue+vue-router+es6搭建一个简单的spa应用（一） #13

vue+vue-router+es6搭建一个简单的spa应用