电视盒子做网站服务器,网站建设热门吗,app营销策略模板,做爰网站名称目录
1.创建vue3工程
2.创建package文件
3.编写组件#xff0c;并且导出
4.编写package.json
5.npm账号注册登录并发布
6.从npm安装使用
7.注意事项 1.创建vue3工程
#xff08;1#xff09;初始化Vue项目
cnpm create vite
#xff08;2#xff09;进入文件夹…目录
1.创建vue3工程
2.创建package文件
3.编写组件并且导出
4.编写package.json
5.npm账号注册登录并发布
6.从npm安装使用
7.注意事项 1.创建vue3工程
1初始化Vue项目
cnpm create vite
2进入文件夹安装依赖
cnpm i
3运行项目
npm run serve
2.创建package文件 在根目录创建package文件夹,按照下面的目录结构创建components文件夹用来存放组件 3.编写组件并且导出
1这里我们就以button组件为例任意编写一点代码代码如下
templatedivbutton我是测试按钮/button/div
/template
script setup namecreate-button//上面的namecreate-button是组件名必须填写他决定了在其他项目中引入此组件的名称
/script
style scoped
button {width: 100px;height: 50px;display: flex;align-items: center;justify-content: center;border: none;border-radius: 10px;cursor: pointer;
}
/style
组件编写完毕可以在App.vue里引入编写的组件来测试一下我这里就不展示了
2下面编写同文件夹下的index.js文件,这个文件的作用主要是用来单独导出某一个组件使用的,比如将来在一个项目里只需要引入一个button组件 import createButton from ./index.vue;
createButton.install (app) {app.component(createButton.name, createButton)return app
}export default createButton
3下面再编写与components文件夹同级的index.js文件
import createButton from ./components/button/index.vue;//导入写好的组件
const components [createButton]//所有的组件都放这个数组里
const install (app) {for (const item of components) {app.component(item.name, item)//批量注册组件}return app
}
export default { install }//如果有方法函数也可以在这里导出
4.编写package.json
在package文件夹下创建package.json文件并编写 create-ui是我随便写的名字
{name: create-ui,version: 0.0.1,description: 测试组件库,author: {name: you name,email: you email},private: false,publishConfig: {access: public,registry: https://registry.npmjs.org/},dependencies: {vue: ^3.3.4,element-plus: ^2.4.2,axios: 0.24.0}
} name: 项目的名称这是在 npm 上注册和发布你的包时使用的唯一标识符。 version: 项目的当前版本号。遵循语义化版本规范Semantic Versioning格式为主版本号.次版本号.修订号。 description: 对项目的简要描述用于展示给用户或其他开发者。 author: 项目的作者信息包括姓名和电子邮件地址。 private: 一个布尔值指示该包是否被视为私有包。如果设置为 true则不能通过 npm publish 发布它。 publishConfig: 这个字段用于配置发布时的一些参数比如 access 用于指定包的访问级别registry 用于指定包发布到的注册表地址。 dependencies: 项目的依赖项列表。这里列出了项目所依赖的各种 npm 包以及它们的版本范围。
每个字段在 package.json 文件中都扮演着重要的角色它们用于描述项目的基本信息、依赖关系以及发布配置等。这些信息对于 Node.js 项目的管理和发布至关重要。
除了上述列出的字段package.json 文件还包含其他常用字段例如 repository指定了项目的代码存储位置可以是一个 URL 或者一个包含 type 和 url 属性的对象。 keywords描述了包的关键词有助于其他开发者在 npm 上搜索到这个包。 license指定了项目所采用的许可证类型。 scripts包含了一系列可执行脚本的键值对。例如可以定义 start、test 等脚本命令以便在命令行中运行。 devDependencies类似于 dependencies 字段用于列出开发过程中需要用到的依赖包。 main指定了包的入口文件即当用户 require 包时的入口文件。 engines指定了项目的运行环境要求比如 Node.js 的版本范围等。 peerDependencies声明了该包所需的对等依赖关系。这些依赖关系是指包与当前包一起使用的其他包。 browserslist用于指定项目的目标浏览器和 Node.js 版本以便在构建过程中进行相应的兼容性处理。
这些字段可以根据项目的需要进行添加和配置以便更好地描述和管理项目的相关信息和依赖关系。
5.npm账号注册登录并发布
1注册账号
想要发布到npm仓库就必须要有一个账号先去npm官网npm | Home (npmjs.com)注册一个账号注意记住用户名、密码和邮箱发布的时候可能会用到。
2添加npm用户
添加npm用户执行命令
npm adduser
这里会让你填写用户名等等如果之前设置过即可跳过此步。
3发布npm
在package目录下执行命令
npm publish
如果发布失败可能是名字重复了改了名字即可发布成功后我们即可到npm管网上查看自己发布得npm包 6.从npm安装使用
直接执行安装命令
cnpm install create-ui //我随便写的名字
然后在main.js引用注册代码如下
//注册全部组建
import createUi from create-ui;
import create-ui/index.css;//如果有css文件也可以引入
app.use(createdUi);//单独注册某一个组件
import createButton from create-ui/components/button;
app.use(createButton);
直接使用组件create-button代码如下
templatecreate-button/create-button
/template
script setup/script7.注意事项
1每次发布都需要更改 package.json里面的版本号version
2避免用到过多的依赖,有些依赖会导致整个npm包无法使用
3组件的name一定要取一些不常见不会和其他组件重名的
4极少情况发布上去的版本会有延迟要等30分钟左右才能下载
