dd命令 创建文件并写入数据_npm命令行创建文件夹和文件

很多时候我们新建文件的时候，手动添加似乎有点麻烦，大部分人都想使用一条命令行执行就可以创建出想要的文件夹以及其基本内容，如：

以上是执行了npm run aa.vue components，这条命令行的意思是在components目录下新建一个aa.vue的文件。

var fs=require('fs');   //fs是node.js的核心模块，不用下载安装，可以直接引入

1. fs.stat  检测是文件还是目录(目录 文件是否存在)

2. fs.mkdir  创建目录 (创建前自动判断文件是否存在)

3. fs.writeFile  写入文件(文件不存在就创建,不能创建目录)

4. fs.appendFile 写入追加文件

5.fs.readFile 读取文件

6.fs.readdir 读取目录

7.fs.rename 重命名

8. fs.rmdir  删除目录

9. fs.unlink 删除文件

01 新建单个文件

以下展示代码：

const fs = require('fs')const path = require('path')const basePath = path.resolve(__dirname, '../') // 默认在src下面// npm run files aa.vue compoents/** * @param argv[0] node的安装路径 * @param argv[1] node的执行文件路径 * @param argv[2] 新建文件‘名称’-->aa.vue, setting.scss,... * @param argv[3] 新建文件在哪里--‘路径名称’ */const dirName = process.argv[2] // 获取文件夹名称const pathName = process.argv[3] // 获取路径名称const capPirName = dirName.substring(0, 1).toUpperCase() + dirName.substring(1)if (!dirName) {    console.log('文件夹名称不能为空！')    console.log(`示例：npm run tep ${capPirName}`)    process.exit(0)}// writeFileSync 文件存在就写入，不存在就自动创建一个文件fs.writeFileSync(`${basePath}/${pathName}/${dirName}`)process.exit(0)

02

新建views(页面)文件夹以及文件夹下文件内容

一下代码展示：

const fs = require('fs')const path = require('path')const basePath = path.resolve(__dirname, '../')const dirName = process.argv[2]const capPirName = dirName.substring(0, 1).toUpperCase() + dirName.substring(1)if (!dirName) {    console.log('文件夹名称不能为空！')    console.log('示例：npm run tep ${capPirName}')    process.exit(0)}/** * @msg: vue页面模版 */const VueTep = `  

{{data.pageName}}

@import './${dirName}.scss'`// ts 模版const tsTep = `import { Component, Vue } from "vue-property-decorator"// import { Getter, Action } from "vuex-class"import { ${capPirName}Data } from '@/types/views/${dirName}.interface'// import { } from "@/components" // 组件@Component({})export default class ${capPirName} extends Vue { // Getter // @Getter ${dirName}.author // Action // @Action GET_DATA_ASYN // data data: ${capPirName}Data = { pageName: '${dirName}' } created() { // } activated() { // } mounted() { // } // 初始化函数 init() { // } }`// scss 模版const scssTep = `@import "@/assets/scss/variables.scss";.${dirName}-wrap { width: 100%;}`// interface 模版const interfaceTep = `// ${dirName}.Data 参数类型export interface ${capPirName}Data { pageName: string}// VUEX ${dirName}.State 参数类型export interface ${capPirName}State { data?: any}// GET_DATA_ASYN 接口参数类型// export interface DataOptions {}`// vuex 模版const vuexTep = `import { ${capPirName}State } from '@/types/views/${dirName}.interface'import { GetterTree, MutationTree, ActionTree } from 'vuex'import * as ${capPirName}Api from '@/api/${dirName}' // 接口const state: ${capPirName}State = { ${dirName}: { author: undefined }}// 强制使用getter获取stateconst getters: GetterTree<${capPirName}State, any> = { author: (state: ${capPirName}State) => state.${dirName}.author}// 更改stateconst mutations: MutationTree<${capPirName}State> = { // 更新state都用该方法 UPDATE_STATE(state: ${capPirName}State, data: ${capPirName}State) { for (const key in data) { if (!data.hasOwnProperty(key)) { return } state[key] = data[key] } }}const actions: ActionTree<${capPirName}State, any> = { UPDATE_STATE_ASYN({ commit, state: ${capPirName}State }, data: ${capPirName}State) { commit('UPDATE_STATE', data) }, // GET_DATA_ASYN({ commit, state: LoginState }) { // ${capPirName}.getData() // }}export default { state, getters, mutations, actions}`// api 接口模版const apiTep = `import Api from '@/utils/request'export const getData = () => { return Api.getData()}`fs.mkdirSync(`${basePath}/views/${dirName}`) // mkdir// vue 页面process.chdir(`${basePath}/views/${dirName}`) // cd viewsfs.writeFileSync(`${dirName}.vue`, VueTep) // vue fs.writeFileSync(`${dirName}.ts`, tsTep) // tsfs.writeFileSync(`${dirName}.scss`, scssTep) // scss// ts 接口process.chdir(`${basePath}/types/views`); // cd typesfs.writeFileSync(`${dirName}.interface.ts`, interfaceTep) // interface// vuexprocess.chdir(`${basePath}/store/module`); // cd storefs.writeFileSync(`${dirName}.ts`, vuexTep) // vuex// api接口process.chdir(`${basePath}/api`); // cd apifs.writeFileSync(`${dirName}.ts`, apiTep) // apiprocess.exit(0)

03

新建component(组件)

一下代码展示：

const fs = require('fs')const path = require('path')const basePath = path.resolve(__dirname, '../components')/** * [   'F:\\app\\nodejs\\node.exe',  'G:\\code\\vue\\typescript\\demo\\src\\scripts\\component.js',  'cc',  '../src' ] */const dirName = process.argv[2]// console.log(dirName);const capPirName = dirName.substring(0, 1).toUpperCase() + dirName.substring(1)if (!dirName) {    console.log('文件夹名称不能为空！')    console.log('示例：npm run tep ${capPirName}')    process.exit(0)}/** * @msg: vue页面模版 */const VueTep = `  

{{data.pageName}}

@import './${dirName}.scss'`// ts 模版const tsTep = `import { Component, Vue } from "vue-property-decorator"import { Getter, Action } from "vuex-class"import { ${capPirName}Data } from '@/types/views/${dirName}.interface'// import { } from "@/components" // 组件@Component({})export default class About extends Vue { // Getter // @Getter ${dirName}.author // Action // @Action GET_DATA_ASYN // data data: ${capPirName}Data = { pageName: '${dirName}' } created() { // } activated() { // } mounted() { // } // 初始化函数 init() { // } }`// scss 模版const scssTep = `.${dirName}-wrap { width: 100%;}`fs.mkdirSync(`${basePath}/${dirName}`) // mkdir 创建文件夹process.chdir(`${basePath}/${dirName}`) // cd viewsfs.writeFileSync(`${dirName}.vue`, VueTep) // vue fs.writeFileSync(`${dirName}.ts`, tsTep) // tsfs.writeFileSync(`${dirName}.scss`, scssTep) // scssprocess.exit(0)

参考fs的文档：http://nodejs.cn/api/fs.html#fs_fs_writefilesync_file_data_options