搜尋
首頁web前端js教程vue todo-list元件上傳npm

这次给大家带来vue todo-list组件上传npm,vue todo-list组件上传npm的注意事项有哪些,下面就是实战案例,一起来看一下。

最近几个人合作完成了一个项目,发现有一些公用的基础业务组件,可以提取出来,不仅方便大家在各自模块直接引用,也可以在以后的项目中使用。想到了可不可以自己动手把组件打包发布到内部的npm上,避免以后小伙伴们的重复工作呢?于是乎,说干就干,在这里操练一下,写个todo-list的vue组件案例。案例源码:https://github.com/wuwhs/todoList

建立npm项目

1. 初始化npm项目

建一个文件夹(todoList),在这个文件夹路径下打开cmd窗口,输入指令npm init,前提是已经装好了node(自带npm)。

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (todolist)</pkg>

提示输入项目包名称,这里的名称将作为发布到npm上这个包的名称,以后别人使用就可以直接importrequire到项目中使用。

package name: (todolist) todolist
version: (1.0.0)

接下来提示输入版本,这里的版本将作为发布到npm上这个包版本控制号,每次发布必须要改一下版本号,才允许发布,在这里作为第一个版本可以直接回车,默认是1.0.0

version: (1.0.0)
description:

然后提示输入描述信息,描述一下这个包的功能作用。于是输入:

description: a vue component of todolist
entry point:(webpack.config.js)

再者,提示整个项目的入口文件,这里是我们打包后的文件,打包后文件都放到dist目录下,先设定生成的文件是todoList.min.js,于是:

entry point:(webpack.config.js) ./dist/todoList.min.js
test command:
git repository:

接下来提示输入测试命令、git仓库,先不管,后面再详细写,回车默认空。

再提示输入关键字,便于其他人在npm上搜索得到你写的包,最后就是作者和认证,根据自己实际情况填。

keywords: todolist vue
author: wuwhs
license: (ISC)
About to write to D:\WampServer\wamp\www\todoList\package.json:
{
 "name": "vue-todolist",
 "version": "1.0.0",
 "description": "a vue component of todolist",
 "main": "dist/todolist.min.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [
  "todolist",
  "vue"
 ],
 "author": "wuwhs",
 "license": "ISC"
}
Is this ok? (yes) yes

这样,一个npm项目就初始化完了。接下来,来发布一个已经打包好了的组件包(先为空的)到npm上。

发布包到npm上

首先需要有npm官网的一个注册账号,然后输入npm adduser,依次输入npm登录账号、密码和注册激活邮箱。这样就轻松的登录上了。(PS:在window的CMD窗口,输入密码时不显示输入密码,盲输入,确定后回车即可,这里被坑了一下)

$ npm adduser
Username: wuwhs
Password: balabala...
Email: (this IS public) balabala...
Logged in as wuwhs on https://registry.npmjs.org/.

最后,直接输入指令publish即可大功告成。

$ npm publish
+ vue-todolist@1.0.0

不过,好事多磨,可能事情没有那么顺利。

一个可能取的包名称跟别人的重名了,这样是不能上传上去的,会提示你没有权限发布这个包。

$ npm publish
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You do not have permission to publish "vue-router". Are you logged in as the correct user? : vue-router
npm ERR! A complete log of this run can be found in:
npm ERR!   C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-02T15_41_56_696Z-debug.log

解决方法:需要到package.json里改一下包名称name,或者去npm官网搜一下你要取的名称,有没有同名,再回头来改。

还有就是每次发布,没改版本号。

$ npm publish
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You cannot publish over the previously published versions: 1.0.1. : vue-todolist
npm ERR! A complete log of this run can be found in:
npm ERR!   C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-02T15_40_28_571Z-debug.log

解决方法:需要到package.json里改一下版本号后发布。

把npm线路打通了,接下来就是打包输出,上传资源了。

webpack打包

组件写好后,一般要借助自动化工具,将资源整合打包压缩,提供一个入口文件,供别人直接引用。在这里,选用webpack来打包。

为了方便演示,写一个vue官网上todo-list的例子,作为组件打包发布。

整个目录结构

--todoList
  --src
    --components
      --todoItem.vue
      --todoList.vue
    --App.vue
    --index.js
    --main.js
  --index.html
  --webpack.config.js
  --package.json
  --.babelrc
  --.npmignore

下面来分别说明文件内容:

1. package.json文件

{
 "name": "vue-todolist",
 "description": "a vue component of todolist",
 "version": "1.0.0",
 "author": "wuwhs",
 "license": "MIT",
 "private": false,
 "main": "./dist/todoList.min.js",
 "scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 },
 "dependencies": {
  "vue": "^2.5.11"
 },
 "browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <p style="text-align: left;">主要安装一些必要的依赖插件,如vue、babel和webpack</p><p style="text-align: left;">2. webpack.config.js文件</p><pre class="brush:php;toolbar:false">var path = require('path')
var webpack = require('webpack')
module.exports = {
 entry: './src/main.js',
 output: {
  path: path.resolve(dirname, './dist'),
  publicPath: '/dist/',
  filename: 'build.js'
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    use: [
     'vue-style-loader',
     'css-loader'
    ],
   },   
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
     loaders: {
     }
     // other vue-loader options go here
    }
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
   },
   {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
     name: '[name].[ext]?[hash]'
    }
   }
  ]
 },
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.esm.js'
  },
  extensions: ['*', '.js', '.vue', '.json']
 },
 devServer: {
  historyApiFallback: true,
  noInfo: true,
  overlay: true
 },
 performance: {
  hints: false
 },
 devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
 module.exports.devtool = '#source-map'
 module.exports.plugins = (module.exports.plugins || []).concat([
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"'
   }
  }),
  new webpack.optimize.UglifyJsPlugin({
   sourceMap: true,
   compress: {
    warnings: false
   }
  }),
  new webpack.LoaderOptionsPlugin({
   minimize: true
  })
 ])
}

webpack的基本热更新以及打包配置,可以参考webpack中文官网

3. .babelrc文件

{
 "presets": [
  ["env", { "modules": false }],
  "stage-3"
 ]
}

ES6转化工具babel配置

4. main.js项目入口文件

import Vue from 'vue'
import App from './App.vue'
new Vue({
 el: '#app',
 render: h => h(App)
})

5. App.vue vue根组件

<template>
 <p>
  Hello, todo-list!
 </p>
</template>
<script>
export default {
 name: &#39;app&#39;
}
</script>

6. index.html 页面

nbsp;html>

 
  <meta>
  <title>todolist</title>
 
 
  <p></p>
  <script></script>
 

输入命令npm install,所有依赖包安装完成后,npm run dev,启动成功。

PS:遇到一个坑,先用npm install感觉太慢了,于是断掉了,用cnpm install,安装完成后,启动总是缺少这个依赖包,那个依赖包,没完没了,于是,把node_modules全删了,重新cnpm install一气呵成正常了。cnpm安装会引入一些版本文件,前面npm已装好的包没有,于是就出现了报错,找不到某某依赖包。

至此,打包工具webpack的基本配置就完成了,接下来就是写vue组件了。

写todo-list的vue组件

todo-list组件在很多地方都会作为一个案例使用,在这就直接模范vue官网的案例来写了。

1. todoList.vue组件——列表

<template>
<p>
 <input>
 </p>
<ul>
  <li>
 </ul>

</template>
<script>
import TodoItem from &#39;./TodoItem&#39;
export default {
 components: {
  TodoItem
 },
 data () {
  return {
   newTodoText: &#39;&#39;,
   todos: [
    {
     id: 1,
     title: &#39;Do the dishes&#39;,
    }
   ],
   nextTodoId: 2
  }
 },
 methods: {
  addNewTodo: function () {
   this.todos.push({
    id: this.nextTodoId++,
    title: this.newTodoText
   })
   this.newTodoText = &#39;&#39;
  }
 }
}
</script>

2. todoList.vue组件——列表项

减小耦合度,把列表项单独拿出来做一个组件。

<template>
<li>
 {{ title }}
 <button>X</button>
</li>
</template>
<script>
export default {
 props: [&#39;title&#39;]
}
</script>

3. App.vue根组件

将todo-list组件引入并挂载到根节点。

<template>
 <p>
  <todo-list></todo-list>
 </p>
</template>
<script>
import TodoList from &#39;./components/todoList&#39;
export default {
 name: &#39;app&#39;,
 components: {
  TodoList
 }
}
</script>

刷新浏览器,查看效果

OK,组件基本完成。

组件打包

前面已经验证了,我们写的todo-list组件没问题了,要将这个组件独立打包成一个文件。这时就需要更换一下入口文件了,把测试案例用的main.js换成index.js文件。

独立组件入口文件 index.js

目的只是将要打包的组件引入。

import TodoList from './components/todoList.vue'
export default TodoList

更改webpack配置 webpack.config.js

将入口文件更换成./src/index.js,文件出口路径和名称更换成package.jsonmain的路径和名称,这样方便不调整npm的发布目录。

module.exports = {
 entry: './src/index.js',
 output: {
  path: path.resolve(dirname, './dist'),
  publicPath: '/dist/',
  filename: 'todoList.min.js'
 },
 ...
}

改好后,npm run build,打包组件,结果就在dist目录下有了todoList.min.js文件。这就是打包组件后的文件。也是将要发布到npm上别人真正使用的入口文件。

测试打包好的文件

刚打包好的文件能不能直接使用,在发布到npm上之前先在本地测试一下。要测试方法很简单,就是把跟组件引入的vue组件改成引入刚打包的文件。于是App.vue这样改:

<script>
import TodoList from &#39;../dist/todoList.min.js&#39;
export default {
 name: &#39;app&#39;,
 components: {
  TodoList
 }
}
</script>

再改回测试案例入口,刷新浏览器,报错!

vue.esm.js?3153:591 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <todolist>
    <app> at src\App.vue
     <root></root></app></todolist>

有点小奔溃,没有渲染函数?难道自己打包出来的组件竟然不能用!后来查资料才知道,打包需要指定一种模块输出类型,可以是commonjs,AMD,script,UMD模式。在这里是写插件,要采用UMD模式,即libraryTarget: 'umd'。于是webpack.config.js出口文件配置修改为:

 output: {
  path: path.resolve(dirname, './dist'),
  publicPath: '/dist/',
  filename: 'todoList.min.js',
  library: 'vueTodoList',
  libraryTarget: 'umd',
  umdNamedDefine: true
 }

再打包独立组件,更新todoList.min.js文件,改回测试文件(entry: './src/main.js',)入口,npm run dev,刷新浏览器,成功!

发布和使用npm组件包

发布npm组件包

已经验证了我们已经打包生成的todoList.min.js可以正常使用,接下来就可以发布到npm上了,同样npm跟git一样,可以使用.npmignore忽略一些上传文件,比如node_moudules就不要上传上去了。

.DS_Store
node_modules/
npm-debug.log
yarn-error.log
# Editor directories and files
.idea
.editorconfig
*.suo
*.ntvs*
*.njsproj
*.sln

更改一下package.jsonversion,执行npm publish即可

$ npm publish
+ vue-todolist@1.0.3

使用npm组件包

发布成功后,这就是一个平常使用的插件了,cnpm install vue-todolist --save即可安装(使用npm或cnpm安装均可)完成,

$ cnpm install vue-todolist --save
√ Installed 1 packages
√ Linked 1 latest versions
√ Run 0 scripts
Recently updated (since 2018-03-27): 1 packages (detail see file D:\appSoft\wampserver\wamp64\www\todoList\node_modules\.recently_updates.txt)
 Today:
  → vue-todolist@*(1.0.3) (11:15:22)
√ All packages installed (1 packages installed from npm registry, used 564ms, speed 528.68kB/s, json 2(281.56kB), tarball 16.62kB)

然后直接在页面中引入使用。

在App.vue引入todolist组件,就不需要引入本地写的了,直接引入刚才安装好的

<script>
import TodoList from &#39;vue-todolist&#39;
export default {
 name: &#39;app&#39;,
 components: {
  TodoList
 }
}
</script>

再次运行npm run dev,刷新浏览器,一切正常,good。

总结

至此,打包、发布和使用自己写的vue组件就完成了。总结一下这几条需要关注:

  1. npm包配置(package.json)中,提供对外使用的入口文件最好跟打包后的文件一致,这样打包完成后就可直接测试和发布;

  2. 每次发布要改版本号;

  3. webpack配置文件出口要加库输出类型libraryTarget: 'umd';

  4. 最好单独用一个文件作为组件输出打包,不要跟测试案例入口文件弄混;

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

在vue中使用swiper插件

热模块替换有哪几种实现方法

以上是vue todo-list元件上傳npm的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何在FastAPI中实现文件上传和处理如何在FastAPI中实现文件上传和处理Jul 28, 2023 pm 03:01 PM

如何在FastAPI中实现文件上传和处理FastAPI是一个现代化的高性能Web框架,简单易用且功能强大,它提供了原生支持文件上传和处理的功能。在本文中,我们将学习如何在FastAPI框架中实现文件上传和处理的功能,并提供代码示例来说明具体的实现步骤。首先,我们需要导入需要的库和模块:fromfastapiimportFastAPI,UploadF

VUE3开发基础:使用extends继承组件VUE3开发基础:使用extends继承组件Jun 16, 2023 am 08:58 AM

Vue是目前最流行的前端框架之一,而VUE3则是Vue框架的最新版本,相较于VUE2,VUE3具备了更高的性能和更出色的开发体验,成为了众多开发者的首选。在VUE3中,使用extends继承组件是一个非常实用的开发方式,本文将为大家介绍如何使用extends继承组件。extends是什么?在Vue中,extends是一个非常实用的属性,它可以用于子组件继承父

酷狗上传自己的音乐的简单步骤酷狗上传自己的音乐的简单步骤Mar 25, 2024 pm 10:56 PM

1、打开酷狗音乐,点击个人头像。2、点击右上角设置的图标。3、点击【上传音乐作品】。4、点击【上传作品】。5、选择歌曲,然后点击【下一步】。6、最后点击【上传】即可。

电脑怎么拍照上传电脑怎么拍照上传Jan 16, 2024 am 10:45 AM

电脑只要安装了摄像头就可以进行拍照,但是有些用户还不知道该怎么拍照上传,现在就给大家具体介绍一下电脑拍照的方法,这样用户得到图片之后想上传到哪里都可以了。电脑怎么拍照上传一、Mac电脑1、打开访达,再点击左边的应用程序。2、打开后点击相机应用。3、点击下方的拍照按钮就可以了。二、Windows电脑1、打开下方搜索框,输入相机。2、接着打开搜索到的应用。3、再点击旁边的拍照按钮就可以了。

如何在QQ音乐上传歌词如何在QQ音乐上传歌词Feb 23, 2024 pm 11:45 PM

随着数字化时代的到来,音乐平台成为人们获取音乐的主要途径之一。然而,有时候我们在听歌的时候,发现没有歌词是一件十分困扰的事情。很多人都希望在听歌的时候能够显示歌词,以便更好地理解歌曲的内容和情感。而QQ音乐作为国内最大的音乐平台之一,也为用户提供了上传歌词的功能,使得用户可以更好地享受音乐的同时,感受到歌曲的内涵。下面将介绍一下在QQ音乐上如何上传歌词。首先

Win10电脑上传速度慢怎么解决Win10电脑上传速度慢怎么解决Jul 01, 2023 am 11:25 AM

  Win10电脑上传速度慢怎么解决?我们在使用电脑的时候可能会觉得自己电脑上传文件的速度非常的慢,那么这是什么情况呢?其实这是因为电脑默认的上传速度为20%,所以才导致上传速度非常慢,很多小伙伴不知道怎么详细操作,小编下面整理了win11格式化c盘操作步骤,如果你感兴趣的话,跟着小编一起往下看看吧!  Win10上传速度慢的解决方法  1、按下win+R调出运行,输入gpedit.msc,回车。  2、选择管理模板,点击网络--Qos数据包计划程序,双击限制可保留带宽。  3、选择已启用,将带

如何提升电脑上传速度如何提升电脑上传速度Jan 15, 2024 pm 06:51 PM

上传速度变得非常慢?相信这是很多朋友用电脑上传东西时候都会遇到的一个问题,在使用电脑传送文件的时候如果遇到网络不稳定,上传的速度就会很慢,那么应该怎么提高网络上传速度呢?下面,小编将电脑上传速度慢的处理方法告诉大家。说到网络速度,我们都知道打开网页的速度,下载速度,其实还有一个上传速度也非常关键,特别是一些用户经常需要上传文件到网盘的,那么上传速度快无疑会给你省下不少时间,那么上传速度慢怎么办?下面,小编给大伙带来了电脑上传速度慢的处理图文。电脑上传速度慢怎么解决点击“开始--运行”或者“窗口键

聊聊Vue怎么通过JSX动态渲染组件聊聊Vue怎么通过JSX动态渲染组件Dec 05, 2022 pm 06:52 PM

Vue怎么通过JSX动态渲染组件?下面本篇文章给大家介绍一下Vue高效通过JSX动态渲染组件的方法,希望对大家有所帮助!

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版