export default new Vuex.Store({
  state: {
    device: 'pc'
  },
  mutations: {
    setDevice (state, data) {
      state.device = data
    }
  }
})

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
import { throttle } from 'lodash-es'
export default {
  created () {
    // resize節(jié)流
    this.resizeChange = throttle(this.resizeChange, 200)
    this.resizeChange()
    window.addEventListener('resize', this.resizeChange, false)
  },
  methods: {
    ...mapMutations(['setDevice']),
    resizeChange () {
      // 判斷是否是 pc 或者 移動端，也可以用機型之類的條件來判斷，個人覺得用像素更簡單快捷
      // 默認設(shè)置當屏幕寬度 > 1000 時，為PC端
      if (document.documentElement.clientWidth > 1000) {
        this.setDevice('pc')
      } else {
        // 默認設(shè)置當屏幕寬度 <= 1000 時，為移動端
        this.setDevice('m')
      }
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.resizeChange, false)
  }
}
</script>

// index.vue
<template>
  <div class="index">
    <component :is="$store.state.device"></component>
  </div>
</template>
<script>
import m from './device/m.vue'
import pc from './device/pc.vue'
export default {
  name: 'index',
  components: {
    pc,
    m
  }
}
</script>

// device 目錄下的 m.vue 或 pc.vue
// m.vue
<template>
  <div class="index-m">
  	<p> 這里沒有其他特殊之處，正常寫 移動端 和 pc 端代碼即可 </p>
  	<p> m.vue 和 pc.vue 沒有本質(zhì)差異，僅修改 類名 或 組件名稱后綴為 -pc </p>
  </div>
</template>
<script>
export default {
  name: 'index-m'
}
</script>
<style lang="scss" scoped>
.index-m {
	// 如果是 m.vue，這里正常使用 px 作為基本單位
}
</style>

npm install postcss-px-to-viewport --save-dev
yarn add -D postcss-px-to-viewport

// .postcssrc.js
module.exports = {
  plugins: {
      // 用來給不同的瀏覽器自動添加相應(yīng)前綴，如-webkit-，-moz-等等
      autoprefixer: {}, 
      "postcss-px-to-viewport": {
        // 需要轉(zhuǎn)換的單位，默認為"px"
        unitToConvert: 'px',
        viewportWidth: 375,
        // 單位轉(zhuǎn)換后保留的精度
        unitPrecision: 3,
        // 能轉(zhuǎn)化為vw的屬性列表
        propList: [
          '*'
        ],
        // 希望使用的視口單位
        viewportUnit: 'vw',
        // 字體使用的視口單位
        fontViewportUnit: 'vw',
        // 設(shè)置最小的轉(zhuǎn)換數(shù)值，如果為1的話，只有大于1的值會被轉(zhuǎn)換
        minPixelValue: 1,
        // 僅轉(zhuǎn)換的文件，這里不要使用 \/ 去匹配文件，不生效??
        // 這里還有一個坑，就是如果使用了 include 規(guī)則的話，正常的版本不生效，可以安裝這個
        // "postcss-px-to-viewport": "github:evrone/postcss-px-to-viewport"
        include: [/device\\m.vue/]
      }
  }
};

module.exports = {
  viewTemplate: viewName => {
    return `
<template>
  <div class="${viewName}">
    <component :is="$store.state.device"></component>
  </div>
</template>
<script>
import m from './device/m.vue'
import pc from './device/pc.vue'
export default {
  name: '${viewName}',
  components: {
    pc,
    m
  }
}
</script>
`
  },
// 移動端 頁面基本結(jié)構(gòu)
  mTemplate: viewName => {
    return `
<template>
  <div class="${viewName}-m">
  </div>
</template>
<script>
export default {
  name: '${viewName}-m'
}
</script>
<style lang="scss" scoped>
.${viewName}-m {
}
</style>
`
  },
// pc端 頁面基本結(jié)構(gòu)
  pcTemplate: viewName => {
    return `
<template>
  <div class="${viewName}-pc">
  </div>
</template>
<script>
export default {
  name: '${viewName}-pc'
}
</script>
<style lang="scss" scoped>
.${viewName}-pc {
}
</style>
`
  }
}

// generateView.js
const chalk = require('chalk')
const path = require('path')
const fs = require('fs')
const log = message => console.log(chalk.green(`${message}`))
const successLog = message => console.log(chalk.blue(`${message}`))
const errorLog = error => console.log(chalk.red(`${error}`))
const { viewTemplate, mTemplate, pcTemplate } = require('./template')
const generateFile = (path, data) => {
  if (fs.existsSync(path)) {
    errorLog(`${path}文件已存在`)
    return
  }
  return new Promise((resolve, reject) => {
    fs.writeFile(path, data, 'utf8', err => {
      if (err) {
        errorLog(err.message)
        reject(err)
      } else {
        resolve(true)
      }
    })
  })
}
// 創(chuàng)建頁面目錄
const dotExistDirectoryCreate = (directory) => {
  return new Promise((resolve) => {
    mkdirs(directory, function () {
      resolve(true)
    })
  })
}
// 遞歸創(chuàng)建目錄
const mkdirs = (directory, callback) => {
  var exists = fs.existsSync(directory)
  if (exists) {
    callback()
  } else {
    mkdirs(path.dirname(directory), function () {
      fs.mkdirSync(directory)
      callback()
    })
  }
}
// 獲取頁面名稱
const getViewName = (viewPath) => {
  const arr = viewPath.split('\\')
  return arr[arr.length - 1]
}
log('請輸入要生成的頁面組件名稱(無需添加.vue后綴)、支持深層目錄解析(dirName/viewName)、頁面將生成在 views/目錄下')
let viewName = ''
process.stdin.on('data', async chunk => {
  const inputName = String(chunk).trim().toString()
  // Vue頁面組件路徑
  let viewPath = path.resolve(__dirname, '../src/views', inputName)
  viewName = getViewName(inputName)
  viewPath = path.resolve(viewPath, viewName + '.vue')
  const viewDirectory = path.dirname(viewPath)
  // 檢查界面是否存在
  const hasViewExists = fs.existsSync(viewPath)
  if (hasViewExists) {
    errorLog(`${inputName}頁面已存在，請重新輸入`)
    return
  }
  try {
    // 1.生成頁面目錄
    log(`正在生成頁面目錄 ${viewDirectory}`)
    await dotExistDirectoryCreate(viewDirectory)
    // 2.生成頁面子目錄
    const sonViewDirectory = path.resolve(viewDirectory, './device')
    log(`正在生成頁面子目錄 ${sonViewDirectory}`)
    await dotExistDirectoryCreate(sonViewDirectory)
    // 3.生成 m.vue 頁面
    const mViewPath = path.resolve(sonViewDirectory, './m.vue')
    log(`正在生成子目錄子頁面文件 ${mViewPath}`)
    await generateFile(mViewPath, mTemplate(viewName))
    // 4.生成 pc.vue 頁面
    const pcViewPath = path.resolve(sonViewDirectory, './pc.vue')
    log(`正在生成子目錄子頁面文件 ${pcViewPath}`)
    await generateFile(pcViewPath, pcTemplate(viewName))
    // 5.生成頁面
    log(`正在生成頁面文件 ${viewPath}`)
    await generateFile(viewPath, viewTemplate(viewName))
    successLog('生成成功')
  } catch (e) {
    errorLog(e.message)
  }
  process.stdin.emit('end')
})
process.stdin.on('end', () => {
  log('exit')
  process.exit()
})

  "new:view": "node ./scripts/generateView"