方法说明：
返回一个readStream(文件读取流，输入流)对象。(可读流)
语法：
fs.createReadStream(path, [options])
由于该方法属于fs模块，使用前需要引入fs模块(var fs= require(“fs”) )
接收参数：
path: (string) 欲读取的文件路径
options : (object) 数组对象包含以下属性
{ flags: 'r',
encoding: null,
fd: null,
mode: 0666,
autoClose: true
}
options 可以通过start 和 end 设置 文件 可读取的字节数范围，而不是读取整个文件。
如果start 和 end都被包含的情况下 ，将从0开始。
encodeing 可以是 ‘utf8′, ‘ascii', 或 ‘base64′三种格式。
如果autoClose为false时，文件描述符将不会被关闭，即使他们报错了。
最好把它关闭掉 并确保不会出现文件描述符泄漏。
如果autoClose为true时(默认的行为)，对错误或结束的文件描述符将自动关闭。
例子：
该例子将读取一个100k的文件中的最后10十字节内容。
fs.createReadStream('sample.txt', {start: 90, end: 99});
源码：
fs.createReadStream = function(path, options) {
return new ReadStream(path, options);
};

作为一个经常偷懒的程序员，用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使用方法，以后有时间再补充一下

Vue cli别名配置

新建一个vue.config.js文件，这个文件的作用有：配置别名、配置一些插件像scss-resources-loader:一个可以创建多个文件，文件内部的内容都会作为全局变量,在其他创建的文件中不用引入可以直接访问、以及其他插件。
配置内容

const path = require('path'); 
const fs = require('fs');

function resolve(dir) { // 拿到文件的函数
  return path.join(__dirname, dir);// 将当前文件和dir参数的路径自动合并成为正确的路径
}

module.exports = { // 主体
  configureWebpack: { 
    resolve: {
      alias: { // 别名配置
        'views': '@/views', // 这里是views文件夹的路径 src/views
        'components': '@/components' // 这里是components文件夹的路径 src/components
      }
    }
  },
  chainWebpack: config => {  // 这里的config拿到的是configureWebpack
    config.resolve.alias // 这个自然就是别名配置了
      // src内部路径
      .set('@$', resolve('src')) // 设置@表示src文件夹

      // components内部路径
      .set('components', resolve('src/components')) // 设置components表示src/components

      // views路径
      .set('views', resolve('src/views')); // 设置views表示src/views
  }
}


可能有时候配置是正确的但是仍然无法正确访问路径，最好办法建议这时候可以使用@/...来访问你的文件，@/xxx访问路径目前没有出过问题。


good study and everyday up.——coderNoob

electron-vue 更新踩坑


新建一个update.js文件

首先引入electron-updater,没装的就npm install下

import { autoUpdater } from 'electron-updater'
//因为要和渲染器进程通信 所以引入
import { ipcMain } from 'electron'
const fs = require('fs-extra')
const path = require('path')
const log = require('electron-log')   //日志打印方便查看

//定义状态
const MESSAGE = {
  error: {
    status: 0,
    text: '检查更新出错'
  },
  checking: {
    status: 1,
    text: '正在检查更新……'
  },
  updateAva: {
    status: 2,
    text: '检测到新版本'
  },
  updateNotAva: {
    status: 3,
    text: '现在使用的就是最新版本，不用更新'
  }
}

贴上主要代码
class Update {
//将该窗口对象作为参数
  constructor(mainWindow) {
    this.mainWindow = mainWindow
    this.updaterCacheDir = 'xxxx'   //更新下载产生的文件目录名 要与packjson 里的name 一致
    this.uploadUrl = 'xxxx';   //更新服务器的地址
    this.init()
    this.onError()
    this.onCheckUpdate()
    this.onCheckFound()
    this.onNoCheckFound()
    this.onDownloadProcess()
    this.onUpdateComplate()
    this.onDownload()
  }
  sendUpdateMessage(text) {
    this.mainWindow.webContents.send('message', text)
  }
  init() {
    autoUpdater.setFeedURL(this.uploadUrl)
    autoUpdater.autoDownload = false
    log.transports.console.level = false
    log.transports.console.level = 'silly'
    autoUpdater.logger = log
    const updatePendingPath = path.join(autoUpdater.app.baseCachePath, this.updaterCacheDir, 'pending')
    fs.emptyDir(updatePendingPath)    // 每次打开软件时候清空下载更新的目录
    log.warn('下载的更新目录缓存地址:' + updatePendingPath)
  }
  onError() {
    autoUpdater.on('error', error=> {
     this.sendUpdateMessage(MESSAGE.error)
    })
  }
  onCheckUpdate() {
    autoUpdater.on('checking-for-update', _=>{
      log.warn('触发检查更新')
      this.sendUpdateMessage(MESSAGE.checking)
    })
  }
  onCheckFound() {
    autoUpdater.on('update-available', info=> {
      log.warn('检测到新版本')
      this.sendUpdateMessage(MESSAGE.updateAva)
    })
  }
  onNoCheckFound() {
    autoUpdater.on('update-not-available',info=>{
      this.sendUpdateMessage(MESSAGE.updateNotAva)
    })
  }
  // 更新下载进度事件
  onDownloadProcess() {
    autoUpdater.on('download-progress', progressObj=> {
      log.warn(progressObj)
      this.mainWindow.webContents.send('downloadProgress', progressObj)
    })
  }
  onUpdateComplate() {
    autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate)=> {
      ipcMain.on('isUpdateNow', (e, arg) => {
        autoUpdater.quitAndInstall()
        this.mainWindow.destroy()
      })
      this.mainWindow.webContents.send('isUpdateNow')
    })
  }
  onDownload() {
    ipcMain.on('downloadUpdate', () => {
      log.warn('触发下载')
      autoUpdater.downloadUpdate()
    })
  }
}

export default Update

回到主进程的js文件里引入
import Update from 'xxxx'
new Update(mainWindow);  

回到渲染页面 App.vue引入 ipcRenderer 进行监听就行了

ui用的element-ui 就不贴代码了很简单
注意事项

1.之前一只在本地运行项目 我说怎么触发的更新事件都是报错 原来是要打包好了运行才可以正常触发

2.就是注意下electron的版本 之前是老版本1.x.x的版本 也是报错  后面更新到^3.0.0就ok了，还有electron-updater 的版本我这里是^4.1.2