Vue-1 Vue cli3 多页面配置

1 准备工作

1.1 先查看版本

npm -V
[email protected] D:\Program Files\nodejs\node_modules\npm
vue -V
vue == 3.11.0

1.2 创建项目

vue create templates

会创建一个名为templates的项目
目录结构为：

初始结构.png

npm run serve

App running at:
- Local:   http://localhost:8080/
- Network: http://192.168.43.36:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

运行npm run serve，可以在

http://localhost:8080/
http://192.168.43.36:8080/

看到这个页面：

初始index.png

2 多页面配置

2.1 修改目录

1、在src目录下创建一个pages文件夹，
2、在pages文件夹下面创建index文件夹，
修改之后文件夹结构为：

第一次修改目录结构.jpg

3、把public文件夹下的index.html移到index文件夹，
4、把components文件夹下面的HelloWorld.vue移到index文件夹，（这里可以不移动，因为这个是默认生成的一个例子，实际开发中，创建项目生成的这个页面我们根本用不到，移动只是为了方便做例子，不另外写一个index页面）
5、把src文件夹下的App.vue和main.js都移到index文件夹下面

这时候目录结构：

第一次移动文件.png

2.2 理一下逻辑

index.html

这个文件便是打开首页显示的文件。

记住 id="app"这行

App.vue

内容如下：

这里就是写index.html中id="app"这个div的内容。
并且引入了HelloWorld.vue
在

components: {
    HelloWorld
  }

包含了这个组件
在

给HelloWorld.vue传入了一个msg变量

HelloWorld.vue

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

render: h => h(App)这句话的意思是创建 App element
就是下面这个函数的意思

render: function (createElement) {
    return createElement(App);
}

2.3 修改文件名称

App.vue改为index.vue;
main.js改为index.js

2.4 修改文件内容

index.vue

index.js

import Vue from 'vue'
import App from './index.vue'  修改这里

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3 配置vue.config.js

在src文件夹同一级目录添加一个名为vue.config.js的js文件。

添加vue.config.js.png

内容如下：

module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'assets',
    indexPath: 'index.html',
    filenameHashing:true,
    pages: {
        index: {
            entry: "./src/pages/index/index.js", // 配置入口js文件
            template: "./src/pages/index/index.html", // 主页面
            filename: "index.html", // 打包后的html文件名称
            title: "首页", // 打包后的.html中
  
  
    
    

    
  

baicai.vue

baicai.js

import Vue from 'vue'
import App from './baicai.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

5 配置router

在src下创建router文件夹，在router文件夹下创建router.js
修改内容为：

import Vue from 'vue'
import Router from 'vue-router'

import index from '../pages/index/index.vue';
import baicai from '../pages/baicai/baicai.vue';

Vue.use(Router);

const routers = [
    {
        path: '/',
        redirect: '/index',
        component: index,
        meta: {requiresAuth: false}
    },
    {
        path: '/index',
        name: 'index',
        component: index,
        meta: { requiresAuth: false },
    },
    {
        path: '/baicai',
        name: 'baicai',
        component: baicai,
        meta: { requiresAuth: false },
    },
];
const router = new Router({
    mode: 'history',
    routers,
});

export default router;

6 重启服务

打开http://localhost:8080/baicai

baicai.png

7 首页跳转

修改index文件夹下的 index.vue

重启服务，打开http://localhost:8080

跳转到白菜页面.png

点击跳转到白菜页面
就会跳转到http://localhost:8080/baicai.html

一颗数据小白菜.png

8 总结

多页面配置其实就是2个步骤：
1、配置vue.config.js中的pages
2、配置router

demo地址
GitHub