vue cli3.0搭建一个多页面全过程

川长思鸟来 2023-07-11 11:29 51阅读 0赞

### 这两天腾了一会vue搭建多页面，基本框架算是出来了，在这里简单的记录下备忘。 ###

> ### 简介  ###
> 
> 首先我们得搞懂什么是多页面。我们都知道vue是典型的单页面应用，也就是只有一个入口文件（main.js和app.vue和index.html），所有的路由都是基于这个入口文件来跳转的，因此也可理解为这个入口页面的子页面吧。这样我们就好理解多了。因此可以这样理解，一个入口文件（main.js和app.vue和index.html）就一个单页面。其他的都是在这个单页面内的路由出口展示的子页面，也就是路由跳转只在这个单页面内的子页面之间进行跳转。我们平时所有的开发都是基于这个单页面进行开发的。那么多页面也好理解了，也就是多个入口（main.js和app.vue和index.html），这样就有了多个单页面，单页面之间只能用a标签跳转，因此可以不用路由，单页面之内如果有子页面跳转那么在使用路由进行跳转。这样我们在页面开发的时候就和平时开发一样的，只需要对多个单页面里面的子页面进行分别开发就行了，也就是等同于有了多套的main.js和app.vue和index.html。说了这么多，我们实际搭建起来

> ### 一、 先创建项目 ###
> 
>     vue create test
> 
> 安装选项选择默认（路由和vuex后期再加上），然后保证项目能正常启动。文件目录如下：
> 
> ![2020030516002769.png][]
> 
> 结构不用多说大家都很熟悉了，项目的入口文件问mian.js，对应app.vue和index.html文件，

> ### 二、改造成多页面 ###
> 
> 根据之前我们介绍的，也就是我们要有多个入口文件，其实就是多复制几个main.js，app.vue，index.html而已，在此之前我们得先有个vue.config.js文件，也就是配置文件，在这里配置我们的多页面pages选项，具体配置我就不多说了，[官网][Link 1]写的很详细了。我们就直接码代码。我的配置如下
> 
>     let pageMethod = require('./src/util/getPages.js');
>     pages = pageMethod.pages();
>     
>     module.exports = {
>     	lintOnSave: false, //禁用eslint
>     	productionSourceMap: false,
>     	pages,
>     	devServer: {
>     		index: 'page1.html', //默认启动serve 打开page1页面
>     		open: process.platform === 'darwin',
>     		host: '',
>     		port: 8088,
>     		https: false,
>     		hotOnly: false,
>     		
>     		before: app => {}
>     	},
>     	
>     }
> 
> 这里我们引入一个getPages.js文件，这个是用来遍历我们的文件的，然后生pages配置需要的格式的数据然后配置使用的代码如下
> 
>     const glob = require('glob')
>     let pages = {}
>     module.exports.pages = function () {
>       glob.sync('./src/pages/*/*.js').forEach(filepath => {
>         let fileList = filepath.split('/')
>         let fileName = fileList[fileList.length - 2]
>         pages[fileName] = {
>           entry: `src/pages/${fileName}/${fileName}.js`,
>           // 模板来源
>           template: `src/pages/${fileName}/${fileName}.html`,
>           // 在 dist/index.html 的输出
>           filename: process.env.NODE_ENV === 'development' ? `${fileName}.html` : `${fileName}/${fileName}.html`,
>           // 提取出来的通用 chunk 和 vendor chunk。
>           chunks: ['chunk-vendors', 'chunk-common', fileName]
>         }
>       })
>       return pages
>     }
> 
> 从代码可以看出就是去遍历我们src下的pages文件夹下所有的入口文件（js和html和对应的vue）然后生成pages需要的格式进行配置，也就是我们所有的多页面都写在pages里面，如我们要两个多页面page1和page2那么就在pages里面新建两个文件夹page1和page2，然后吧对应的入口文件和html模板拷贝进去就行了，这里我们先直接拷贝main.js和app.vue和index.html在对其进行从命名成page1和page2内容不变。此时文件结构如下：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70][]
> 
> 拷贝完成后app.vue和mian.js和index.html用不上了，直接删除，修改page1.js内容如下
> 
>     import Vue from 'vue'
>     import App from './page1.vue'
>     
>     Vue.config.productionTip = false
>     
>     new Vue({
>       render: h => h(App),
>     }).$mount('#app')
> 
> 也就是指改了下vue的引入，之前是引入了app.vue这里我们改成page1.vue做为入口
> 
> 修改page1.vue内容如下：
> 
>     <template>
>       <div id="app">
>         <h1>这里是page1</h1>
>         HelloWorld组件：
>         <HelloWorld msg="Welcome to Your Vue.js App"/>
>       </div>
>     </template>
>     
>     <script>
>     import HelloWorld from '@/components/HelloWorld.vue'
>     
>     
>     export default {
>       name: 'App',
>       components: {
>         HelloWorld,
>       }
>     }
>     </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>
> 
> 改动也不大，也就是组件的引入路径改了一下。
> 
> 对于page2同样的修改，只是把的名字和路径page1改成page2就行了
> 
> 到此我们的页面就完成了改造，npm run serve 启动后可以看到如下界面
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 1][]浏览器里面输入[http://localhost:8088/page1][http_localhost_8088_page1] 可进入我们的page1这个单页面，
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 2][]
> 
> [http://localhost:8088/page][http_localhost_8088_page1]2则进入page2这个单页面里面
> 
> ### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 3][] ###
> 
>

> ### 三、后期开发 ###
> 
> 后期开发其实很简单，就和我们平常vue的单页面开发一样的，只不过我们有多个page，假设我们现在开发page2加入route和vuex也就是page2这个页面加入两个子页面（home和about）用路由跳转，很简单，在page里面和我们平时一样的开发就行了。
> 
> 先安装路由和vuex这个不多说。
> 
> 然后在page2.vue加入路由出口，并不在引入HelloWorld组件代码如下：
> 
>     <template>
>       <div id="app">
>         <h1>这里是page2</h1>
>         
>         <router-link to="/page2/home">Home</router-link> |
>         <router-link to="/page2/about">About</router-link>
>     
>          <router-view/>|
>       </div>
>     </template>
>     
>     <script>
>     
>     
>     export default {
>       name: 'App',
>       components: {
>         
>       }
>     }
>     </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>
> 
> 然后在page2.js中引入路由代码如下：
> 
>     import Vue from 'vue'
>     import App from './page3.vue'
>     import router from './router'//新增部分
>     
>     
>     
>     Vue.config.productionTip = false
>     
>     new Vue({
>       router,//新增部分
>       render: h => h(App),
>     }).$mount('#app')
> 
> 然后创建路由文件，结构如下
> 
> ![20200305164456613.png][]
> 
> index.js代码如下：
> 
>     import Vue from 'vue'
>     import VueRouter from 'vue-router'
>     
>     
>     Vue.use(VueRouter)
>     
>     const routes = [
>       {
>         path: '/page2',
>         redirect: '/page2/home',
>       },
>       {
>         path: '/page2/home',
>         name: 'home',
>         component:  () => import( './../view/home/home.vue')
>       },
>       {
>         path: '/page2/about',
>         name: 'about',
>         
>         component: () => import( './../view/about/about.vue')
>       }
>     ]
>     
>     const router = new VueRouter({
>       mode: 'history',
>       base: process.env.BASE_URL,
>       routes
>     })
>     
>     export default router
> 
> 这里要注意，所有路由都要在前面加上page2，也就是我们的页面名称。
> 
> 最后创建我们的新页面结构如下
> 
> ![20200305164748649.png][]
> 
> home.vue代码如下：
> 
>     <template>
>       <div class="home">
>         <h1>This is an home page</h1>
>       </div>
>     </template>
>     
>     <script>
>     
>     
>     
>     export default {
>       name: 'home',
>       created(){
>     
>       }
>     
>     }
>     </script>
> 
> about.vue一样的只是把This is an home page改成This is an home about，name属性改成about即可.
> 
> 到此路由已经加完，输入[http://localhost:8088/page2][http_localhost_8088_page2]页面效果如下：
> 
>  
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 5][] 下面我们在给page2加上vuex也很简单，安装vuex完毕后再page2里面加入store文件如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 6][]

在page2.js里面引入：

代码如下：

import Vue from 'vue'
    import App from './page2.vue'
    import router from './router'
    import store from './store'//新增部分
    
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,//新增部分
      render: h => h(App),
    }).$mount('#app')

好了，这样就引入成功了，在home里面测试是否成功。在created里面添加代码如下

console.log(this.$store)

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 7][]

可以看到，vuex已经被打印出来，说明安装成功。到此我们配置了两个独立的页面，page1就一个简单的页面，page2则引入了路由和vuex。这样就实现了多个页面的不同需求。实现了多页面。打包后我们可以看到也给我们生成了多个独立的文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 8][]

[2020030516002769.png]: https://img-blog.csdnimg.cn/2020030516002769.png
[Link 1]: https://cli.vuejs.org/zh/config/#pages
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200305162056419.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200305163349388.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5,size_16,color_FFFFFF,t_70
[http_localhost_8088_page1]: http://localhost:8088/page1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020030516370778.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200305163721988.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5,size_16,color_FFFFFF,t_70
[20200305164456613.png]: https://img-blog.csdnimg.cn/20200305164456613.png
[20200305164748649.png]: https://img-blog.csdnimg.cn/20200305164748649.png
[http_localhost_8088_page2]: http://localhost:8088/page2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200305165853509.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200305165916626.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200305170145375.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200305170532285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200305171336280.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5,size_16,color_FFFFFF,t_70