前几天遇到一个问题,需要写一个tree组件,研究了半天发现网上的基本上都有问题,这里我就分享给大家一个完整的教程吧

1.创建一个vue-cli项目,如果你还不会创建可以看一下我之前的教程。

vue init webpack-simple yizhiyan-ui-button

2.根据vue-cli提示进行初始化操作

  cd yizhiyan-ui-button
  npm install
  npm run dev

先来看看整体目录吧

我在src目录下新建了个button目录然后在下面新建index.vue文件

我们修改index的name为zyButton,然后在indec.vue同级目录下新建index.js文件

编写index.js如下

import zyButton from './index.vue';

//设置模块导出名字
zyButton.install = Vue => Vue.component(zyButton.name, zyButton);
//导出模块,如果这里是单个模块就直接导出单个名字
// 如果是同时导出多个则使用{}如:{zyButton,zuTree}
export default zyButton

我们在app.vue中引入我们的index.js测试一下

运行之后发现报错找不到模块index.vue仔细一看原来是我们的文件名写错了

改过来之后在运行

npm run dev

测试成功现在咱们就开始修改配置文件进行发布前的准备

首先修改package.json文件,注意private一定要改成false。既然上传到npm上面就是公开如果是true上传就不会成功

然后在修改我们的webpack.config.js


const NODE_ENV = process.env.NODE_ENV; //别忘了这里的常量  
//入口,编译的时候'./src/button/index.js'作为入口,运行的时候使用'./src/main.js'作为入口
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/button/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',//路径
    filename: 'yizhiyan-ui-button.js',//打包之后的名称
    library: 'yizhiyan-ui-button', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },

然后我们在根目录下新建文件.npmignore文件,此文件是用来避免上传其他无用文件和目录的

.*
*.md
*.yml
build/
node_modules/
src/
test/


好了现在配置完成了,发布,如果没有npm账户可以取官网注册,发布之前账户必须要通过邮箱验证

注意:发布之前一定要先生成dist文件夹命令

//生成dist
npm run build
//登录
npm login
//发布,如果没有登录需要先登录npm
npm publish

好了,步骤比较详细,如果还是有不明白的地方,欢迎加博主博客进行交流

下一篇将讲到如何使用本次发布的作品

标签: Webpack, vue, vue-cli

添加新评论