Vue CLI3基础学习之pages构建多页应用

下面是关于“Vue CLI3基础学习之pages构建多页应用”的攻略，包含以下内容：

1. 什么是Vue CLI3的pages构建多页应用？

Vue CLI3支持构建多页应用，即可以使用单个Vue CLI3项目同时构建多个HTML页面。每个页面都可以有自己的脚本和样式文件。

2. 如何在Vue CLI3中创建多页应用？

首先，我们需要在Vue CLI3项目使用以下命令安装vue-cli-plugin-pages插件：

vue add pages

安装完成后，我们需要在vue.config.js文件中配置pages：

module.exports = {
  pages: {
      index: {
        entry: 'src/pages/index/index.js',
        template: 'public/index.html',
        filename: 'index.html'
      },
      about: {
        entry: 'src/pages/about/about.js',
        template: 'public/about.html',
        filename: 'about.html'
      }
  },
  // 其它配置
}

上面示例展示了如何配置两个页面：index和about。其中，entry字段指定页面的入口文件，template字段指定页面的HTML模板文件，filename指定生成的HTML文件名。

3. 如何使用多页应用？

在Vue CLI3中使用多页应用需要注意两点：

• 不同页面之间的路由互相独立，需要使用vue-router插件
• 不同页面之间共用的组件和静态资源需要单独存放

下面，我们来看一个示例：

假设我们有一个页面为index，其中有一个按钮，点击后跳转到about页面。

首先，我们需要在项目中安装vue-router插件：

npm install vue-router --save

然后，在src/router/index.js文件中定义路由：

import VueRouter from 'vue-router'
import IndexPage from '@/pages/index/index.vue'
import AboutPage from '@/pages/about/about.vue'

const router = new VueRouter({
  routes: [
    { path: '/', component: IndexPage },
    { path: '/about', component: AboutPage }
  ]
})

export default router

最后，在src/pages/index/index.vue文件中使用按钮实现页面跳转：

<template>
  <div class="index-page">
    <button @click="goAbout">Go to About page</button>
  </div>
</template>

<script>
export default {
  methods: {
    goAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

以上是使用Vue CLI3构建多页应用的详细攻略，希望能对你有所帮助。