vue2搭建簡易spa
阿新 • • 發佈:2017-07-07
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