Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
songhlc opened this issue Jul 16, 2016 · 1 comment
Open

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

songhlc opened this issue Jul 16, 2016 · 1 comment
Labels
VUE

Comments

@songhlc
Copy link
Owner

songhlc commented Jul 16, 2016

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 songhlc changed the title ［vue］vue+vue-router+es6搭建一个简单的spa应用（一、两个简单的页面切换） ［vue］vue+vue-router+es6搭建一个简单的spa应用（一） Jul 16, 2016
@songhlc
Copy link
Owner Author

songhlc commented Jul 16, 2016

这里关于.vue文件，大家把它理解成一个html文件就可以了，里面包含script style 和template（html片段）

@songhlc songhlc added bug VUE and removed bug labels Jul 20, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
VUE
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@songhlc