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