vue+webpack+thinkphp多页应用配置
来源:互联网 发布:电信网络电视怎么开通 编辑:程序博客网 时间:2024/06/07 17:40
去年一直开发的前端项目越来越大的时候,问题就逐渐凸显出来了。一个很重要的问题是视图无法复用,重复冗余的代码很多;视图是用模板引擎引擎写的,Html代码看起来也不方便,需要采用一些方案来解决问题。
观望和体验vue已经很长一段时间了,终于在3月的时候开始在尝试在项目中使用vue。首先遇到的一个问题就是vue的脚手架是单页的,而项目本身是多页的,需要进行多页处理;多页处理在网上已经有较多的文章介绍了,不过大多都是基于webpack1.0版本的。还有一个问题是前端项目是和thinkphp结合在一起的,路由由thinkphp来控制,所以文件需要打包到thinkphp对应的文件路径。
刚开始改webpack配置的时候出现各种问题,主要原因还是webpack相关的内容不熟悉,最后还是去webpack官网仔仔细细的把文档看了一下,终于把基本的配置搞定了。
中文官网地址:中文官网
英文官网地址:英文官网
一、项目结构
接下来介绍一下完整的项目结构(既包括了thinkphp的文件夹,也包括了vue脚手架的文件夹),如下:
二、代码编写
开发的时候主要编写src文件夹下得文件,包括了assets,components,pages。assets放资源文件、components放vue的组件、pages下面放thinkphp下对应的模块名,模块下面再放对应的页面文件夹,页面文件夹包括一个app.vue文件,一个index.html和一个index.js。
三、多页配置及使用
主要更改了vue脚手架中的webpack.base.conf.js、webpack.prod.conf.js、webpack.dev.conf.js;将entry改为了多入口,生产环境打包时,将路径调整为thinkphp对应的路径;具体配置参考下面github项目。
npm run dev在生产环境中编写和调试页面效果
npm run build打包到thinkphp对应的目录下
四、存在的部分问题
1、因为使用的thinkphp3.2.3版本,所有View文件夹下得模块需要大写,所以pages下面的文件夹为大写,打包出来resouse文件夹下面也为大写。
2、每个页面都有一个html文件,可能大部分html文件都是相同的,考虑使用同一html文件打包
github地址如下:https://github.com/feinimoshu753/vue-webpack-mutilpage
有什么问题欢迎大家留言讨论。
- vue+webpack+thinkphp多页应用配置
- vue-cli+webpack实现多页面应用的配置
- vue-cli + webpack 多页面实例应用
- 重写webpack多页应用配置脚手架
- 传统多页应用的webpack配置
- vue-cli中的webpack配置
- vue + webpack 安装和配置
- Vue-webpack项目配置详解
- vue-cli中的webpack配置
- vue-cli webpack 配置分析
- vue-cli中的webpack配置
- vue-cli webpack配置分析
- vue配置 webpack构建vue项目
- VUe+webpack构建单页router应用(一)
- Vue+webpack构建单页router应用(二)
- 一步一步来实现webpack+vue的多页面应用
- ThinkPHP多应用配置技巧
- webpack编译多页面vue项目的配置问题
- web前端优化
- opencv 入门学习
- 二叉搜索树与双向链表
- onchange和window.location
- Spring基础知识汇总
- vue+webpack+thinkphp多页应用配置
- 算法导论 练习题 4.3-7
- 设计模式_单例模式之懒汉式
- 关于 XML 头声明和standalone 的解释
- 输入某年某月某日,判断这一天是这一年的第几天?
- 网络资源链接1
- 线程的五种状态
- 如何为一个服务进程创建监控,即使出core也能自动重启
- 获取 MySQL 崩溃时的 core file