微观漫步

vue中使用scss语法

2019-12-17T00:00:00+08:00

1，scss语法时将css语法进行封装一层的语法，其本质并有发生改变，基本语法页没有发生大的改变，只是在使用的时候会有所区别

2，下载scss的渲染器，加载器

npm i –save-dev node-sass sass-loader

  "dependencies": {
    "core-js": "^3.4.3",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  }

在package.json文件中会有这一样依赖管理

使用–save-dev 会将下载的组件依赖放入devDependencies中 –save则不会只会在dependencies加入你下载的组件

 "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  }

vue中ViewPort的配置

2019-12-17T00:00:00+08:00

1，在移动端和pc端，有时候需要要求对页面做一定的自适应配置，这时候需要在viewport中添加一些配置

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

2，引入rem

引入rem的作用是适应自适应布局

document.addEventListener('DOMContentLoaded',()=>{
  const html = document.querySelector('html')
  let fontSize = window.innerWidth / 10  // 表示当前列宽的10分之一
  fontSize = fontSize > 50 ? 50 : fontSize   // 如果字体超过50px,则字体大小为50，否则为宽度的10分之一
  html.style.fontSize = fontSize + 'px'
})

使用：

<style scoped>
    .text{
        font-family:'Days One';
        font-size: 1rem;
        color: orange;
    }
</style>

vue中web字体的使用

2019-12-17T00:00:00+08:00

web字体是css3中web设计的一种特性，使用@font-face规则用来实现自定义字体，在此之前，web用户只能使用在计算机中安装好的字体，通过css3，web设计师可以应用他们喜欢的任意web字体，通过互联网就可以加载自己的web字体

1，将自己字体文件拷贝的工程路径中

2，在工程中使用web字体

在main.js中引入字体样式即可

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/styles/icon.css'
import './assets/fonts/daysOne.css'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3, 测试

启用字体

未启用字体：

vue中使用mixin.js实现组件使用

2019-12-17T00:00:00+08:00

1，在工程根目录中新建utils目录，在utils中新建mixin.js

import {mapGetters,mapActions} from 'vuex'
export const ebookMixin = {
    computed:{
        ...mapGetters([
            'fileName',
            'menuVisible'
        ])
    },
    methods: {
        ...mapActions([
            'setFileName',
            'setMenuVisible'
        ]),
        initGlobalStyle(){
            removeAllCss()
        }
    }
}

2，在vue组件中引用mixin组件

<script type="text/ecmascript-6">
  import { ebookMixin } from '../../utils/mixin'
  export default {
    mixins: [ebookMixin],
    data() {
      return {
        
      }
    },
    methods: {
        setFontSize(fontSize){
            this.setDefaultFontSize(fontSize)
          // this.$store.dispatch('setDefaultFontSize',fontSize).then(() => {   })
        },
        showFontFamilyPopup(){
            this.setFontFamilyVisible(true)
        }
    
    }
  }
</script>

3，我们在actions.js的文件中写入的代码

const actions = {
      setMenuVisible: ({ commit }, visible) => {
        return commit('SET_MENU_VISIBLE', visible)
      },
      setFileName: ({ commit }, fileName) => {
        return commit('SET_FILENAME', fileName)
      }
}

export default actions

4，我们早getter.js中的文件

const book = {
    fileName: state => state.book.fileName,
    menuVisible: state => state.book.menuVisible
}
export default book

5，我们在模块book.js的文件

const book = {
    state: {
        fileName: '',
        menuVisible: true
    },
    mutations: {
        'SET_FILENAME':(state,fileName)=>{
          state.fileName = fileName
        },
        'SET_MENU_VISIBLE':(state,menuVisible)=>{
            state.menuVisible = menuVisible
          }
    }
}
export default book

vue中使用mixin.scss控制公共样式

2019-12-17T00:00:00+08:00

1，在assestswe文件夹中新建mixin.scss文件

$ratio: 375 / 10;

@function px2rem($px) {
  @return $px / $ratio + rem;
}
// mixin语法
  @mixin center{
    dispaly:flex;
    justify-content:center;
    align-items:center;
  }

2，将mixin.scss放在global.js中进行管理

@import './reset.scss';
@import './mixin.scss';

3，在vue文件样式中引入全局样式

<style lang="scss"  rel="stylesheet/scss" scoped>
@import "./assets/styles/global";
.right{
  flex:1;
  display:flex;
  justify-content:flex-end;
  .icon-wrapper{
    flex:0 0 px2rem(40);
    @include center;  // 引入mixin语法中样式
    .icon-cart{
      font-size:px2rem(22);
    }
  }
}
</style>

4，注意点：

1, 在mixin.scss中css中的函数需要加上@
@function px2rem($px){
  @return $px / 20 + rem;
}
// mixin语法
  @mixin center{
    dispaly:flex;
    justify-content:center;
    align-items:center;
  }

vue中使用vuex进行组件间的数据传递

2019-12-17T00:00:00+08:00

1，创建项目的时候已经选择了vuex的组件，如果没有选择则需要安装组件

npm i –save vuex

2, 在工程的根目录中新建一个store文件夹在其中新建store.js的文件

3，引入vue, vuex, 在vue中挂载vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: { // 用来存数据
    test: 1
  },
  mutations: {  // 用来设置数据
    'SET_TEST':(state, newTest) => {
        state.test = newTest
    }
  },
  actions: {   // commit调用mutations改变test的值
      setTest:({commit,state},newTest) => {
          return commit('SET_TEST',newTest)
      }
  },
  modules: {
  }
})

4, 在main.js中引入store.js 然后挂载store即可

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/styles/icon.css'
import './assets/styles/global.scss'

Vue.config.productionTip = false

new Vue({
  router,
  store,   // 挂载store
  render: h => h(App)
}).$mount('#app')

5, 在具体引用中使用

 mounted(){
        this.$store.dispatch('setTest',10).then(()=>{
            console.log(this.$store.state.test)
        })
    }
// $store.dispatch('setTest',10) 调用的是store.js中action方法

6，vuex的改进

我们观察发现，如果我们的系统中有大量的这种属性值需要进行后期计算，这样的维护是不可持续的。这样vuex为我们引入了一个模块化的概念，就是一个模块管理自己的一个store，通过module的方式进行集中式管理

7, 在store的文件夹中建立一个module的文件夹，在module文件夹中建立一个book.js的模块。

const book = {
    state: { // 用来存数据
        test: 1
      },
      mutations: {  // 用来设置数据
        'SET_TEST':(state, newTest) => {
            state.test = newTest
        }
      },
      actions: {   // commit调用mutations改变test的值
          setTest:({commit,state},newTest) => {
              return commit('SET_TEST',newTest)
          }
      }
}
export default book

8, 在store的目录下面添加一个getters.js的文件，来获取module中book的数据

const book = {
    test: state => state.book.test
}

export default book

9，在index.js中引入getters

import Vue from 'vue'
import Vuex from 'vuex'
import book from './modules/book'
import getters from './getters'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    book
  },
  getters
})

10，在具体使用中使用mapGetters方法

import {mapGetters} from 'vuex'
export default {
    computed:{
        ...mapGetters(['test'])
    },
    mounted(){
        this.$store.dispatch('setTest',10).then(()=>{
            console.log(this.test)  //直接使用this.test就可改变属性值
        })
    }
}

11，扩展…mapgetters

1, ...表示es6的扩展运算符
仿写...mapgettes（['test']）
const getters = {
  a：()=> 1,
  b:()=> 2
}
function fn(keys){
  const data = {}
  keys.forEach(key => {
    if(getters.hasOwnProperty(key)){
      data[key] = getters[key]
    }
  })
  return data
}
export default{
  computed:{
    ...fn(['a','b','c'])
  },
  mounted(){
    console.log(this.a,this.b)
  }
}

vue中使用web缓存机制

2019-12-17T00:00:00+08:00

1，安装web缓存库

npm i –save web-storage-cache

2，在utils文件夹中新建localStorage.js

3，引入web-storage-cache

import Storage from 'web-storage-cache'

const localStorage = new Storage()

export function getLocalStorage(key) {
  return localStorage.get(key)
}

export function setLocalStorage(key, value, expire = 30 * 24 * 3600) {
  return localStorage.set(key, value, { exp: expire })
}

export function removeLocalStorage(key) {
  return localStorage.delete(key)
}

export function clearLocalStorage() {
  return localStorage.clear()
}

export function getTheme(fileName) {
  return getBookObject(fileName, 'theme')
}

export function saveTheme(fileName, theme) {
  setBookObject(fileName, 'theme', theme)
}

export function getFontSize(fileName) {
  return getBookObject(fileName, 'fontSize')
}

export function saveFontSize(fileName, fontSize) {
  setBookObject(fileName, 'fontSize', fontSize)
}

export function getBookObject(fileName, key) {
  if (getLocalStorage(`${fileName}-info`)) {
    return getLocalStorage(`${fileName}-info`)[key]
  } else {
    return null
  }
}

export function setBookObject(fileName, key, value) { // 相当于常见了一个book的缓存对象
  let book = {}
  if (getLocalStorage(`${fileName}-info`)) {
    book = getLocalStorage(`${fileName}-info`)
  }
  book[key] = value
  setLocalStorage(`${fileName}-info`, book)
}

2，在vue组件中使用缓存机制

 import { ebookMixin } from '../../utils/mixin'
import {FONT_SIZE_LIST} from '../../utils/book'
import { saveFontSize } from '../../utils/localStorage'
  export default {
    mixins: [ebookMixin],
    data() {
      return {
        fontSizeList:FONT_SIZE_LIST
      }
    },
    methods: {
        setFontSize(fontSize){       
            saveFontSize(this.fileName, fontSize)     // 调用缓存机制，缓存当前字体，页面刷新数据也不会消失 
        },
        showFontFamilyPopup(){
            this.setFontFamilyVisible(true)
        }
    }
  }
</script>

vue中构建常量管理组件管理数据

2019-12-17T00:00:00+08:00

1，在utils中新建book.js文件

export const FONT_SIZE_LIST = [
    {fontSize: 12},
    {fontSize: 14},
    {fontSize: 16},
    {fontSize: 18},
    {fontSize: 20},
    {fontSize: 22},
    {fontSize: 24}
]

export const FONT_FAMILY = [
    { font: 'Default' },
    { font: 'Cabin' },
    { font: 'Days One' },
    { font: 'Montserrat' },
    { font: 'Tangerine' }
  ]

  export function themeList(vue) {
    return [
      {
        alias: vue.$t('book.themeDefault'),
        name: 'Default',
        style: {
          body: {
            'color': '#4c5059',
            'background': '#cecece'
          },
          img: {
            'width': '100%'
          },
          '.epubjs-hl': {
            'fill': 'red', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply'
          }
        }
      },
      {
        alias: vue.$t('book.themeGold'),
        name: 'Gold',
        style: {
          body: {
            'color': '#5c5b56',
            'background': '#c6c2b6'
          },
          img: {
            'width': '100%'
          },
          '.epubjs-hl': {
            'fill': 'red', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply'
          }
        }
      }
      }
    ]
}


export function addCss(href){
    const link = document.createElement('link')
    link.setAttribute('rel','stylesheet')
    link.setAttribute('type','text/css')
    link.setAttribute('href',href)
    document.getElementsByTagName('head')[0].appendChild(link)
}

export function removeCss(href){
    const links = document.getElementsByTagName('link')
    for(let i = links.length; i >= 0; i--){
        const link = links[i]
        if(link && link.getAttribute('href') && link.getAttribute('href') === 'href'){
            link.parentNode.removeChild(link)
        }
    }
}

2，常量组件的使用

// 一般，我们会把这种常量混入带mixin.js中，减少引用次数
import {mapGetters,mapActions} from 'vuex'
import {themeList, addCss, removeAllCss} from './book'
export const ebookMixin = {
    computed:{
        ...mapGetters([
            'fileName',
            'menuVisible'
        ]),
        themeList(){
            return themeList(this)
        }
    }

3, 在vue组件中使用

<script type="text/ecmascript-6">
import {FONT_SIZE_LIST} from '../../utils/book'    // 引入常量模块
  export default {
    mixins: [ebookMixin],
    data() {
      return {
        fontSizeList:FONT_SIZE_LIST   // 使用常量
      }
    },
    methods: {
        setFontSize(fontSize){

        },
        showFontFamilyPopup(){
        
        }
  }
</script>

vue中使用路由

2019-12-17T00:00:00+08:00

1，在根目录中新建一个router.js文件

2，引入vue, Router

3,挂载路由

4，设置路由

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/ebook'
  },
  {
      path:'/ebook',
      component:() => import('../views/ebook/index.vue'),
      children:[
          {
              path:':fileName',
              component: () => import('../components/ebook/EbookReader.vue')
          }
      ]
  }
]

const router = new VueRouter({
  routes
})

export default router

5，在main.js中引入路由组件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/styles/icon.css'
import './assets/styles/global.scss'
import i18n from './lang'
Vue.config.productionTip = false

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

6，在component中创建一个组件ebook-reader用于接收动态路由

<template>
  <div class="ebook-reader">
      <div id = 'reader'</div>
  </div>
</template>

<script>
export default {
  
}

7,在view文件下的index.vue中引入ebook-reader组件

<template>
  <div class="ebook">
      <ebook-reader></ebook-reader>
  </div>
</template>

<script>
import EbookReader from '../../components/ebook/EbookReader'
export default {
    components:{
        EbookReader
    }
}
</script>

vue中国际化使用

2019-12-17T00:00:00+08:00

1，安装国际化依赖

2，使用命令安装 npm i –save vue-i18n

3，我们在语言包中准备好国际化json文件en.js,cn.js文件

// cn.js
const messages = {
  book: {
    pulldownAddMark: '下拉添加书签',
    releaseAddMark: '松手添加书签',
    pulldownDeleteMark: '下拉删除书签',
    releaseDeleteMark: '松手删除书签',
    selectFont: '选择字体'
  }
}
export default messages

// en.js
const messages = {
  book: {
    pulldownAddMark: 'Pull down to add bookmark',
    releaseAddMark: 'Release to add bookmark',
    pulldownDeleteMark: 'Pull down to delete bookmark',
    releaseDeleteMark: 'Release to add bookmark',
    selectFont: 'Select Font'
  }
}
export default messages

4，在lang文件中新建一个index.js

5，引入i18n组件

6，加载i18n插件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en'
import cn from './cn'
import { getLocale, saveLocale } from '../utils/localStorage'

/**加载插件 */
Vue.use(VueI18n)

const messages = {
  en, cn
}

let locale = getLocale()
if (!locale) {
  locale = 'cn'
  saveLocale(locale)
}

const i18n = new VueI18n({
  locale,
  messages
})

export default i18n

7，在main.js中引入国际化资源

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/styles/icon.css'
import './assets/styles/global.scss'
import i18n from './lang'   // 引入国际化资源文件
Vue.config.productionTip = false

new Vue({
  router,
  store,
  i18n,   //挂载国际化资源
  render: h => h(App)
}).$mount('#app')

8，引用国际化$t(‘xxx.xxx’)

<div class="content-page-tab">
                    <div class="content-page-tab-item"
                    :class="{'selected': currentTab === 1}"
                    @click="selectTab(1)"></div>
                    <div class="content-page-tab-item"
                    :class="{'selected': currentTab === 2}"
                    @click="selectTab(2)"></div>   
	// 引用国际化资源 
                </div>