1. 程式人生 > >vue2搭建簡易spa

vue2搭建簡易spa

log col sset 修改 conf 新頁面 root 標簽 cnblogs

使用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

vue2搭建簡易spa