vue2搭建简易spa

Posted 2020-09-27 梦见一只电子羊

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