在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使用方法，以后有时间再补充一下