脚手架初步开发笔记

脚手架初步开发笔记

创建一个简单的脚手架

创建一个目录

初始化项目

npm init -y

创建 bin

文件夹

添加 index.js 文件

#!/usr/bin/env node 
// 配置获取环境变量 node 第一行
// bin/index.js
console.log('cli')

修改 package.json,添加配置

{
    ...
    "bin": {
        "cliName": "bin/index.js"
    },
    // cliName 名称自拟
}

发布到 npm

npm login # 登录
npm publish # 发布

发布的时候注意是否已经登录,邮箱是否激活,远程仓库是否为 npm 官网

npm whoami # 查看当前登录用户
npm config get registry # 查看是否为 npm 官网 http://registry.npmjs.org/
npm config set registry=http://registry.npmjs.org # 设置为官网

发布成功后可以到 npm 官网上查看 packages

为了防止包名重复的情况,还可以登录 npm 官网自行创建一个 Organization

输入适当的名称即可,公开的是免费的,私有的收费,添加完就得到一个组织 @testname

package.json 中将 name 改为 @testname/core testname 组织下的 core 包

发布,默认有组织的包会使用私有包进行发布,可添加 --access public 更改为公开包发布

npm publish --access public

还有一个点要注意,就是发布成功的包 72小时 内可以通过 npm unpublish 包名 取消发布

超过后将无法取消,需要通过给官方发邮件,进行取消 unpublish 注意事项

npm i -g @testname/core # 进行全局安装

注意,如果在项目所在上级文件夹会直接指向本地项目,方便进行本地测试

在非包含的文件夹内安装,则会指向远程仓库

脚手架本地测试

可以通过上述的在上级文件夹进行全局安装,可以进行本次测试

还可以项目文件夹内使用 npm link 进行指向

npm link 可以将当前项目链接到 node 全局 node_modules 作为一个库文件,并解析 bin 配置创建可执行文件

注意使用 npm link 前先移除全局安装

npm rm -g @testname/core
如何进行本地分包测试

新建一个包名称自拟, 如 @testname/utlis 初始化 npm init -y

创建文件夹,一般用 lib 命名

创建 index.js 文件

module.exports = {
    sum (a, b) {
        return a + b
    }
}

简单的导出一个方法

同时设置 package.jsonmain 指向 lib/index.js 因为在作为包的情况下会调 mian 指向的的文件

{
    ...
    "main": "lib/index.js",
}

现在回到,原先脚手架项目,使用 npm link @testname/utils 进行导入

由于包还没有进行发布到远程,会报错

回到 @testname/utils 使用 npm link 加入到本地全局

再回到脚手架项目使用 npm link @testname/utils 即可正常导入

由于没有远程库,只能手动添加 devDependencies ,不加不影响本地使用,不过会影响上线后包的导入

{
	...
	"devDependencies": {
        "@testname/utils": "^1.0.0"
    },
}

导入使用

// bin/index.js
#!/usr/bin/env node
let { sum } = require('@testname/utils') // 导入
console.log(sum(1, 2))
console.log('Hello My-cli!!!')

使用 cliName 运行

3
Hello My-cli!!!

回到,本地包项目中,将包提交到 npm

回到,脚手架项目中,移除包

npm unlink @testname/utils

npm unlink 将当前项目从 node 移除 node_modules

再通过

npm i @testname/utils -S

进行安装, 即可

如果安装不了,可能是没有移除干净,必要时可以手动进行包的删除后,再次安装

rm -rf node_modules
npm i @testname/utils -S

或者使用另外一直方式

// 在 package.json 中使用 file: + 相对路径的方式, 同时需要在路径下进行 npm i 安装相对路径包
// 同样可以达到效果,同时使用这种方式可以免去,将包挂载到 node 全局上,管理方便,缺点,发布时需要更改成版本号,如果使用这种方式,后期可以通过使用,其他工具进行转换,如 lerna
{
	...
	"devDependencies": {
        "@testname/utlis": "file:../utils"
    },
}

尽量在本地进行测试,等稳定后再进行发布

注册一个命令 init
cliName init

可以使用 nodeprocess 模块的 argv 来获取参数,参数会按照空格进行分割

#!/usr/bin/env node
let lib = require('my-test-lib') // 导入包
let { argv } = require('process')

// 注册一个命令 init
console.log(argv)
/*
[
  'C:\\Program Files\\nodejs\\node.exe', node
  '...\\you-test-cli\\bin\\index.js', cliName
  'init' 所需参数
]
*/
let commond = argv[2] // 获取

if (commond) { // 判断
    if (lib[commond]) {
        lib[commond]() // 执行
    } else {
        console.log('无效的命令')
    }
}
// my-test-lib/lib/index.js
module.exports = {
    init () {
        console.log('执行初始化')
    }
}
参数解析
cliName init 1 2 3
#!/usr/bin/env node
let lib = require('munanc-test-lib')
let { argv } = require('process')

// 注册一个命令 init
let commond = argv[2]

let options = argv.slice(3)

if (commond) {
    if (lib[commond]) {
        lib[commond](...options)
    }
}
module.exports = {
    init (...options) {
        console.log('执行初始化', ...options) // 执行初始化 1 2 3
    }
}
cliName -V | cliName --version
#!/usr/bin/env node
let lib = require('munanc-test-lib')
let { argv } = require('process')

// 注册一个命令 init
let commond = argv[2]

let options = argv.slice(3)

if (options.length > 0) {
    if (commond) {
        if (lib[commond]) {
            lib[commond](...options)
        }
    }
} else {
    (commond.startsWith('--') || commond.startsWith('-')) { // 判断参数
        commond = commond.replace(/--|-/g, '')
        if (commond === 'version' || commond === 'V') {
            console.log('1.0.0')
        }
    }
}
### 使用 Vue CLI 创建记事本应用 为了创建一个基于 Vue 的记事本应用程序,可以按照如下方式操作: #### 安装 Vue CLI 工具 确保已经全局安装了 `@vue/cli` 。如果没有安装,则可以通过 npm 来完成这一工作。 ```bash npm install -g @vue/cli ``` 此命令会下载并设置好最新版本的 Vue CLI 到系统的环境中[^1]。 #### 初始化新项目 使用更新后的指令来初始化一个新的 Vue 项目。对于 Windows 用户遇到上下键无法正常工作的状况,建议采用带有 `winpty` 命令的方式来启动创建过程: ```bash winpty vue.cmd create note-app ``` 这条命令将会引导用户通过交互界面选择所需的预设配置选项,比如是否要含 TypeScript 支持、单元测试框架等特性[^4]。 #### 进入项目目录并运行开发服务器 一旦项目结构搭建完毕,进入刚建立好的文件夹内,并启动本地服务来进行初步验证: ```bash cd note-app npm run serve ``` 此时浏览器应自动打开页面展示默认生成的应用程序模板;如果未自动跳转,请手动访问 http://localhost:8080 地址查看效果[^2]。 #### 开发记事本核心功能 针对具体业务逻辑——即实现简单的笔记编辑保存等功能,可以在 src/components 文件夹下新建组件用于表示单篇日记条目或整个列表视图。同时利用 Vuex 状态管理模式管理数据状态变化,以及路由机制支持多页面导航需求。 例如定义一个名为 NoteEditor.vue 组件负责处理文本输入框内的内容增删改查动作: ```html <template> <div class="note-editor"> <!-- 文章标题 --> <input v-model="title"/> <!-- 正文区域 --> <textarea v-model="content"></textarea> <!-- 提交按钮 --> <button @click="saveNote">Save</button> </div> </template> <script> export default { data() { return { title: '', content: '' } }, methods: { saveNote(){ console.log('Title:', this.title); console.log('Content:', this.content); // 将数据提交给父级组件或其他地方... } } } </script> ``` 以上代码片段展示了如何构建基本表单控件并与 JavaScript 方法关联起来响应用户的交互行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值