mpvue如何配置单文件页面
这篇文章主要介绍mpvue如何配置单文件页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联长期为1000多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为海门企业提供专业的网站建设、网站制作,海门网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
mpvue 的出现把 vue 的开发体验带到了小程序这个平台中,但其目录结构与传统的 vue 项目却并不完全一致,一个典型的页面包含以下三个文件:
index.vue // 页面文件 main.js // 打包入口,完成 vue 的实例化 main.json // 小程序特有的页面配置,早期写在 main.js 文件中
其中,每个页面的 main.js 文件基本都是一致的,可通过 mpvue-entry 来自动生成(weex 也有类似的处理),而 main.json 我个人认为直接在 vue 文件中配置更为合适,于是开发了 mpvue-config-loader 来加以实现
本文将介绍如何在 mpvue 官方模板的基础上,通过配置 mpvue-config-loader 来实现在 vue 文件内书写小程序的页面配置
步骤
1.初始化项目
vue init mpvue/mpvue-quickstart my-project
2.安装依赖
npm i mpvue-config-loader -D
or
yarn add mpvue-config-loader -D
3.修改打包配置
build/webpack.base.conf.js
module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'mpvue-loader', options: vueLoaderConfig }, + { + test: /\.vue$/, + loader: 'mpvue-config-loader', + exclude: [resolve('src/components')], + options: { + entry: './main.js' + } + } ... ] } ... plugins: [ new MpvuePlugin(), - new CopyWebpackPlugin([{ - from: '**/*.json', - to: '' - }], { - context: 'src/' - }), ... ] }
4.修改页面配置
src/App.vue - 复制 app.json 中的内容,并修改格式以符合 eslint 规范
标签导出对象的 config 属性以上是“mpvue如何配置单文件页面”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
标题名称:mpvue如何配置单文件页面
当前网址:http://pwwzsj.com/article/ipcojc.html