Vue开发电子书app

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