Vue开发电子书app

2024-09-03 18:17:07

ebook-app

在根目录下创建vue.config.js文件

module.export = {

	baseUrl: process.env.NODE_ENV === 'production' ? './' : '/'

}

引入Web字体文件. 主题设计
利用 vuex + minxin 实现组件解耦 + 复用, 大大精简代码量

项目准备

字体图标准备
- 在index.html中<link rel="icon" href="<%= BASE_URL %>fonts/daysOne.css">, 在css样式中引入font-family: daysOne.css内的font-family
- 在index.html中 import './assets/styles/icon.css'在html中写入相应的class,如<span class="icon-back"></span>
- 也可以直接在main.js中import './assets/styles/icon.css'和import './assets/fonts/dayOne.css',然后如上使用
项目依赖包下载 + 项目配置
准备Web字体

viewport配置

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

rem设置 + 自适应布局实现思路
- 在App.vue中

<script>

  export default {}

  document.addEventListener('DOMContentLoaded', () => {

    let fontSize = window.innerWidth / 10

    fontSize = fontSize > 50 ? 50 : fontSize

    const html = document.querySelector('html')

    html.style.fontSize = fontSize + 'px'

  })

</script>

global.scss 和 reset.scss
- 在main.js中引入import './assets/styles/global.scss'和import './assets/styles/reset.scss'
- reset
- 再自己添加些样式

html, body {

  width: 100%;

  height: 100%;

  overflow: hidden;

  user-select: none;

}

body {

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

html, body {

  font-family: 'PingFangSC-Light', 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', 'Arial', 'sans-serif';

}

 global: `@import "./reset";

 $ratio: 375 / 10;

 @function px2rem($px) {

  	@return $px / $ratio + rem;

 }`

引入 vuex

搭建静态资源服务器

Nginx 安装
配置文件
常见问题及处理方法

#########################################

travel

最新文章

热门文章