评论

uniapp使用npm命令自动新建页面

uniapp使用npm命令自动新建页面

#适用场景:项目内新建页面需要新建很多文件,编写自动化脚本一键创建需要的文件及模板内容
#以uniapp模板项目为例
#个人学习记录,新手新手新手,不严谨的地方还请指正,感谢感谢


1、新建uniapp项目

2、在根目录打开终端,进行npm初始操作

npm init
npm install

3、目录结构如下:

4、自己定义执行命令

#我命令采用的是如下格式:
#npm run create login/login 登录页
#npm run 自定义命令名 文件夹名/文件名 文件中文名

在package.json中添加以下命令:
"scripts": {
    "create": "node ./bin/create/index"     //create是自定义的命令名,create事件是 执行bin/create文件夹下的index.js文件
},


5、模板编写

less模板是空文件,vue就是通用格式,若要定制内容需自己改写

6、执行文件index.js

#以下以命令 "npm run create login/login 登录页"为例

##定义部分常量

##函数 - 判断是否已存在文件/文件夹

##函数 - 获取vue、less模板内容

##函数 - 创建文件夹/文件

##最后在index.js末端,执行创建

注意:执行顺序自上而下,确保函数位置正确

只做了简单的示例,还有部分操作没写(路由、文件中文名title的配置等)

最后一次编辑于  2021-09-03  
点赞 0
收藏
评论
登录 后发表内容