vue 页面第一次进入首页空白好久出来_vuecli3开发多页面项目

    本文探讨下vue-cli3开发多页面项目的简单构建,先分析下使用场景,举个栗子:公司做后台管理系统,涉及到前端展示和后端管理两个部分。这种情况,当然可以在一个项目里开发,但是我们希望分开来方面单独管理,但是又不想开两个项目去做,会增加开发和维护成本,所以就可以选择多页面开发。

    讲明应用场景,下面撸起袖子搞起来。

    先将vue-cli3项目搭建好,CMD命令在指定路径下:vue create myPro,然后巴拉巴拉一顿操作搞起来,你会得到:

006c10e2659ec0489cb6aa772531e9a3.png

然后,别忘了新建vue.config.js配置文件。然后命令:cd myPro

再npm run serve启动项目,正常运行,OK,然后接下来画重点了。

    既然我们的目的是多页面开发,比如,我们分page1和page2,在url后面添加page1或page2分别进入两个模块的页面,我们在src下面新建pages文件夹,然后再分别新建page1和page2两个文件夹分别写两个模块的代码,这两个模块需要各自的入口文件,实例化vue,路由和vuex,所以在这两个文件加下还要新建上述的一些文件,

2f197f1caa8fa42f7bb37a2c845fe6b9.png

    下面看下page1下面这几个文件的内容(page2类似):

App.vue:

b1a3443f9f0bdc150774580aed22d60a.png

index.html:

a4d12cfbc056fdd69cca4585f1634119.png

index.js:

83f9b18f401c8f1243c19d9f32701eda.png

注意上面三个id值保持一致。

router.js:

d7c87d0d91899d3a65125e9ecd437404.png

store.js:

ee546742090c5db10080317fa330e386.png

下面vue.config.js配置多页面的重点,先上代码:

2c0a69e8bda5ee6d5c0f6dcb5a3791cd.png

参照上面的写,每行代码的注释也是很清楚了。先试试将项目再运行起来,

此时你如果在浏览器上输入localhost+端口,你会发现页面是空白的,然后你在url后面加上page1,你会看到:

8051e5663d10f4d4435304cb5823731f.png

加上page2时:

7a57ee5faeff271294adc579ebad5168.png

到这里我们已经实现了创建多页面开发项目。

不过还没结束,我们回顾下,我们直接输入ip+端口时页面是空白的,这是因为项目运行时会默认去找index的页面文件,但是我们在vue.config.js中并没有在pages里面定义index的页面,所以就是空白的,解决这个也很简单,我们复制page1文件夹,放在同级目录下改名为index,里面views/home.vue将div的内容改成index,方便查看页面变化,然后vue.config.js中也添加index部分内容:

73ade1ddf5500e8f945c5a48faedf301.png

我们再输入输入localhost: 端口,页面就会显示index页面的内容了:

6dc668dce1ebc31f84f95207015d22e4.png

另外,这个vue.config.js这样写很繁琐,我们可以引入node.js的glob模块来处理,先上代码:

a467782cc6a83ba7fae34ff0832302e0.png

golb模块允许我们使用*来匹配对应规则的文件,所以我们可以创建一个函数实现pages的配置。

我们再来看下打包出来的文件dist:

5990d56c473505025dc772dd11c8baab.png

有三个html文件,把dist文件夹丢到服务器中,也是可以分别打开这三文件对应的页面的。

OK,到此结束项目的开发。以上是个人的归纳总结,希望对你有帮助,如果发现不正确的地方欢迎指正!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值