vue2搭建簡易spa

使用vue-cli來配置webpack,webpack是一個打包工具，使程序模塊化

全局安裝vue-cli:

npm install -g vue-cli

安裝好后，使用vue-cli腳手架配置webpack:

vue init webpack lanspa

lanspa 為項目名稱，ESLint是一個QA工具，用來避免低級錯誤和統一代碼的風格,我選了no. 安裝vue-router 允許我們在 頁面/路由 之間進行切換，而不會 刷新/重新 加載頁面

然后

  cd spa
  npm install
// 運行開發服務
  npm run dev

即可看到頁面。修改頁面默認的功能：

打開src里的main.js,可以看到為：

// 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 }
})

替換為：

// 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 the vue instance
import Vue from 'vue'
//import the App component
import App from './App'
//import the vue router
import VueRouter from 'vue-router'
//tell vue to use the router
Vue.use(VueRouter)
/* eslint-disable no-new */
//import the hello component
import Hello from './components/Hello'
//import the about component
import About from './components/About'
//define your routes
const routes = [
    //route for the home route of the webpage
    { path: '/', component: Hello },
    //route for the about route of the webpage
    { path: '/about', component: About }
]

// Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({//創建路由
  routes, // short for routes: routes
  mode: 'history'//以防止我們的 URL 中包含 # 標記
})
//instatinat the vue instance
new Vue({
    //define the selector for the root component
  el: '#app',
  //pass the template to the root component
  template: '<App/>',
  //declare components that the root component can access
  components: { App },
  //pass in the router to the vue instance
  router
}).$mount('#app')//mount the router on the app

打開App.vue文件，看到

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <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>

替換為：

<template>
  <div id="app">
  <!-- the router outlet, where all matched components would ber viewed -->
  <router-link v-bind:to="'/'">Home</router-link>
<!-- 為我們創建兩個錨點標簽，並動態路由，使頁面不需要重新加載-->

<router-link v-bind:to="'/about'">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>
<!-- styling for the component -->
<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>

兩者主要區別為：1 router-view 標簽被放置在了 template 內，用於渲染視圖。

2 刪除 hello 組件的 import 語句。

3 在 script 標簽中刪除了組件代碼塊

此時重新加載可看到新頁面。

定義一個新路由的方法：

1 在 src/components 文件夾內創建一個名為 About.vue 的文件，hello.vue文件也是一樣的：

<template>
  <div id="about">
  blabla bla bla hahahah
  </div>
</template>

<script>
export default {
  name: 'about'
}
</script>
<!-- styling for the component -->
<style>
#about {
  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>

要渲染about.vue,需要設置路由,即前文main.js中的

import Hello from './components/Hello'
//import the about component
import About from './components/About'
//define your routes
const routes = [
    //route for the home route of the webpage
    { path: '/', component: Hello },
    //route for the about route of the webpage
    { path: '/about', component: About }
]

然后在router-view之前設置router-link使點擊頁面不會重新加載。

spa可通過設置更多的路由和傳遞路徑參數獲得更加復雜頁面。

參考https://scotch.io/tutorials/how-to-build-a-simple-single-page-application-using-vue-2-part-1