在vue中自動生成文件以及自動引入component，router、vuex按模塊劃分

作爲一個經常偷懶的程序員，用vue寫代碼的時候怎麼可以一個一個.vue文件創建和一個一個引入componet呢，下面是提交你開發效率的方法。
1.安裝插件npm install chalk --save-dev
2.在根目錄下創建一個scripts文件

代碼如下：
generateVue.js

// index.js
const chalk = require('chalk')
const path = require('path')
const fs = require('fs')
const resolve = (...file) => path.resolve(__dirname, ...file)
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 {
  vueTemplate
  // entryTemplate
} = 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)
      }
    })
  })
}
log('請輸入要生成的vue文件夾名稱 views: xxx、comp: xxx、pageComp: xxx、 它們會生成在對應的文件目錄下')
let componentName = ''
process.stdin.on('data', async chunk => {
  // 組件名稱
  const inputName = String(chunk).trim().toString().split(':')[1]
  // 判斷放在那個文件夾裏面
  let pathName = String(chunk).trim().toString().split(':')[0]
  switch (pathName) {
    case 'views':
      pathName = 'views'
      break
    case 'comp':
      pathName = 'components'
      break
    case 'pageComp':
      pathName = 'pageComponents'
      break
  }
  // Vue頁面組件路徑
  const componentPath = resolve(`../src/${pathName}`, inputName)
  // vue文件
  const vueFile = resolve(componentPath, 'index.vue')
  // 入口文件
  // const entryFile = resolve(componentPath, 'entry.js')
  // 判斷組件文件夾是否存在
  const hasComponentExists = fs.existsSync(componentPath)
  if (hasComponentExists) {
    errorLog(`${inputName}頁面組件已存在，請重新輸入`)
    return
  } else {
    log(`正在生成 ${inputName} 的目錄 ${componentPath}`)
    await dotExistDirectoryCreate(componentPath)
    if (pathName === 'views') {
      log(`正在生成頁面子組件 components 的目錄 ${componentPath}\\components`)
      await fs.mkdir(`${componentPath}\\components`, err => {
        log(err)
      })
    }
  }
  try {
    // 獲取組件名
    if (inputName.includes('/')) {
      const inputArr = inputName.split('/')
      componentName = inputArr[inputArr.length - 1]
    } else {
      componentName = inputName
    }
    log(`正在生成 vue 文件 ${vueFile}`)
    await generateFile(vueFile, vueTemplate(componentName))
    // log(`正在生成 entry 文件 ${entryFile}`)
    // await generateFile(entryFile, entryTemplate(componentName))
    successLog('生成成功')
  } catch (e) {
    errorLog(e.message)
  }

  process.stdin.emit('end')
})
process.stdin.on('end', () => {
  log('exit')
  process.exit()
})

function dotExistDirectoryCreate(directory) {
  return new Promise((resolve) => {
    mkdirs(directory, function() {
      resolve(true)
    })
  })
}
// 遞歸創建目錄
function mkdirs(directory, callback) {
  var exists = fs.existsSync(directory)
  if (exists) {
    callback()
  } else {
    mkdirs(path.dirname(directory), function() {
      fs.mkdirSync(directory)
      callback()
    })
  }
}

template.js

// template.js
module.exports = {
  vueTemplate: compoenntName => {
    return `<template>
  <div class="${compoenntName}"></div>
</template>

<script>
export default {
  name: '${compoenntName}',

  components: {},

  mixins: [],

  props: {},

  data() {
    return {}
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  destroyed() {},

  methods: {}
}
</script>

<style lang="" scoped>
  .${compoenntName}{

  }
</style>
`
  }
}

3.在package.json裏面新建命令

"scripts": {
    "new:vue": "node ./scripts/generateVue"
  },

自動生成文件這樣就做好了，下面來演示一下使用的方法：

npm run new:vue
dist

可以看到在views文件夾下生成了test文件夾

那麼如何快速引入component呢？ 下面介紹這種方法

在components文件夾下創建一個index.js負責全部導出
代碼如下：

const componentFiles = require.context('./', true, /\index.vue$/)

const components = componentFiles.keys().reduce((files, filePath) => {
  const fileName = filePath.replace(/^\.\/(.*)\/index\.\w+$/, '$1')
  const value = componentFiles(filePath)
  files[fileName] = value.default
  return files
}, {})

module.exports = components

注意，以上組件的格式必須要如下：按照vue推薦的格式規範文件夾名字命名單詞大寫開頭。

然後再vue.config.js裏面設置一下
1.npm install path --save

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
 chainWebpack: config => {
    config.resolve.alia
   .set('components', resolve('src/components/index.js'))
  },
}

然後在你需要使用組件的地方：

import { 文件名 } from 'components'

你看這樣配合上剛剛自動生成文件是不是非常的方便。 哈哈哈

router按模塊劃分

const routerFiles = require.context('./modules', true, /\.js$/)
let routerList = []

routerFiles.keys().forEach((fileName) => {
  if (routerFiles(fileName).default instanceof Array) {
    routerList = routerList.concat(routerFiles(fileName).default)
  } else {
    routerList.push(routerFiles(fileName).default)
  }
})

// 404 頁面必須放在最後！！!
const errorPage = { path: '*', redirect: '/404', hidden: true }
routerList.push(errorPage)
// 路由配置
const RouterConfig = {
  mode: 'history',
  base: process.env.BASE_URL,
  routes: routerList
}
const router = new VueRouter(RouterConfig)

文件格式如下：

const routers = [
  {
    // 首頁
    path: '/',
    name: 'Home',
    components: {
      default: () => import('@/views/home/index.vue'),
    },
    meta: {}
  }
  ]

vuex按模塊劃分

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

getters.js

const getters = {
  themeColor: state => state.settings.color, // 獲取主題顏色
export default getters

舉個modules例子

import { findTabMenu } from '@/http/api.js'
/* 設置模塊 */
const state = {
  stepsActive: -1, // 步驟條激活步驟 Number
  color: '#1BA79A', // 主題顏色

}

const mutations = {
 
}

const actions = {
 
}

export default {
  namespaced: true, // 每個模塊都需要添加 namespaced: true
  state,
  mutations,
  actions
}

這樣就封裝好了，至於按模塊劃分的vuex使用方法，以後有時間再補充一下