公司要求使用 framework7+vue+webpack 开发一个web app,关于framework7,vue,webpack的相关介绍就不再赘述,接下来都只是介绍我用framework7+vue+webpack开发这个web app遇到的问题(因为framework7+vue+webpack的坑还是有很多,希望我能稍微填一点土)。
一、项目初始:
1.直接拿示例模板来开发,省略了安装步骤:
$ git clone https://github.com/nolimits4web/Framework7-Vue-Webpack-Template my-app
2.进入下载的项目文件夹(进入my-app文件夹)并安装依赖项:
$ npm install
3.运行开发环境,让项目在浏览器跑起来:
$ npm run dev
4.项目完成后,可以打包成web
$ npm run build
至此,相关依赖介绍完。
二、项目目录相关介绍:
1.build 文件夹里……
2.config 文件夹里是一些配置文件,可按需调整配置
3.node_modules 文件夹里是一些依赖包,如framework7(以下简称f7)的Dom7库……
4.src 文件夹里主要是css,js,fonts,pages,static……
5.浏览器主要渲染入口index.html在根目录下
6.主component挂载文件:app.vue
项目目录介绍完。
三、接下来主要是介绍项目中主要技术实现方法:
1.想要在项目底部永远出现同一个导航栏,我直接把toolbar放在app.vue里:
<f7-toolbar labels>
<f7-link href="/" icon-f7="home" text="Home"></f7-link>
<f7-link href="/category/" icon-f7="data" text="Category"></f7-link>
<f7-link href="/explore/" icon-f7="compass" text="Explore"></f7-link>
<f7-link href&