vue spa


Author: yifei / Created: Sept. 22, 2017, 12:30 p.m. / Modified: Sept. 23, 2017, 8:15 p.m. / Edit

之前在网页里小范围的用了vue, 感觉用起来非常爽, 现在打算做自己的笔记应用. 这次打算做成SPA的形式, 前端全部用vue来写. 需要node的一些东西, 记录下学习过程. 主要参考这篇文档[1]

安装

首先, 全局安装vue:

npm install --global vue-cli

创建vue应用

因为我们会直接通过*.vue文件来编写vue的组件, 因此需要使用webpack打包编译. 另外我们需要使用官方的vue-router来

vue init webpack notelet

这条命令基于 webpack 这个模板创建了notelet这个应用, 也就是我们的笔记应用.

打开 src/router/index.js 可以看到 vue 创建的router的代码, 其中@src目录的缩写.

import Vue from 'vue'
  import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
    ¦ path: '/',
    ¦ name: 'Hello',
    ¦ component: Hello
    }
  ]
})

然后打开 src/main.js, 可以看到在里面使用了 App 来作为我们的跟组件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

执行 npm run dev, 然后打开 http://localhost:8080/ 就可以看到我们的vue应用了. 注意, 在写这篇文章的时候 node 8.x 下似乎有bug, 导致 app.js 加载不出来, 安装 6.x 就好了. 该死的node.

打开 App.vue, 也就是我们的根组件, 可以看到下面的内容

<template>
  <div id="app">
  ¦ <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注意其中的 router-view 便签, 意思就是路由的内容都在 router-view 中显示.

添加一个新的组件和路由

接下来我们添加一个"关于"页面. 打开src/router/index.js, 改成下面这样:

export default new Router({
  routes: [
  ¦ {
  ¦ ¦ path: '/',
  ¦ ¦ name: 'Hello',
  ¦ ¦ component: Hello
  ¦ },
  ¦ {
  ¦ ¦ path: '/about',
  ¦ ¦ name: 'About',
  ¦ ¦ component: About
  ¦ }
  ]
})

然后添加 src/components/About.vue 文件

<template>
  <div class="hello">
  ¦ <h1>About Notelet</h1>
  ¦ <p>This is a simple note app</p>
  </div>
</template>

<script>
export default {
  name: 'About',
  data () {
  ¦ return {
  ¦ ¦ msg: 'Hello Vue'
  ¦ }
  }
}
</script>

然后更改 App.vue 文件

<template>
  <div id="app">
  ¦ <router-link :to="{name: 'Hello'}">Home</router-link>
  ¦ <router-link to="/about">About</router-link>
  ¦ <router-view></router-view>
  </div>
</template>

注意, 我们使用about指向了 About 这个组件, 而使用 hello 指向了 Hello 这个组件, 注意其中还动态传递了参数.

[1] https://scotch.io/tutorials/getting-started-with-vue-router


有任何问题可以发邮件到 kongyifei (at) gmail.com 讨论