1.0.0 • Published 2 years ago

07.learn_cli v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago
  • 自定义终端命令 入口文件 index.js,且其上配置运行环境 #!; npm init 初始化npm环境:生成package.json文件,同时在bin属性下配置终端命令;

  • version-help-option :帮助和可选信息 其实是分开的:我们在核心文件夹core下面做配置: version help option, 我们如何配置脚手架的基本信息;通过commander辅助创建脚手架;

  • 创建create项目的命令:创建其他指令 先将github中的项目下载到本地 -> npm install安装项目依赖 -> npm run serve将项目运行起来 -> 打开浏览器

  • 执行运行命令和打开浏览器

    1. clone项目
    2. npm install 安装依赖
    3. npm run server运行项目
    4. 打开浏览器
  • 创建组件的流程和ejs模块

    1. 有对应的ejs模块
    2. 编译ejs模板result
    3. 将result写入到vue文件中
    4. 放到对应的文件夹中 【总流程】:用户在控制台输入:why addCpn NavBar -> 执行create中相应的action -> 执行actions中的actions函数,根据ejs模板动态生成相应的文件,并将相应的文件写入到用户想要放入的文件夹中!!!
  • ejs模块的编译过程(重点) compile函数,在utils中的:主要是renderFile函数的运用

    const compile = (template, data) => {
        const templatePosition = `../templates/${template}`;
        const templatePath = path.resolve(__dirname, templatePosition);
        return new Promise((resolve, reject) => {
            ejs.renderFile(templatePath, {data}, {}, (err, result) => {
                if(err) {
                    console.log(err);
                    reject(err);
                    return;
                }
                resolve(result);
            });      
        })
    }