mqli-ui v1.0.2

目录结构

|-- examples // 原 src 目录，改成 examples 用作示例展示

|-- packages // 存放组件

配置支持 packages 目录

系统报错：找不到 src/main.js

原因：新增的 packages 目录，未加入 webpack 编译

vue.config.js

module.exports = {
    // 修改 src 目录为 examples 目录
    pages: {
        entry: 'examples/main.js',
    }
}

发布到 npm

package.json 构建目标：库

// --target,构建目标，默认为应用模式，这里修改为 lib 启用库模式
// --dest，输出目录，默认为 dist，这里修改为 lib
// [entry]，最后一个参数为入口文件，默认为src/App/vue，这里指定编译 packages/ 组件库目录
“lib”: “vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js”

配置package.json 发布 npm 的字段信息

// name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
// version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
// description: 描述。
// main: 入口文件，该字段需指向我们最终编译后的包文件。
// keyword：关键字，以空格分离希望用户最终搜索的词。
// author：作者
// private：是否私有，需要修改为 false 才能发布到 npm
// license： 开源协议

{
“name”: “vcolorpicker”,
“version”: “0.1.5”,
“description”: “基于 Vue 的颜色选择器”,
“main”: “lib/vcolorpicker.umd.min.js”,
“keyword”: “vcolorpicker colorpicker color-picker”,
“private”: false
}

忽略 .npmignore 文件，设置忽略发布文件

我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。

和 .gitignore 的语法一样

// 忽略目录
examples/
packages/
public/

// 忽略指定文件
vue.config.js
babel.config.js
*.map

登录 npm

1. 注册账号，若配置了淘宝镜像，先设置回 npm 镜像，之后在终端执行登录命令(npm login)，输入用户名，密码，邮箱即可登录

发布

npm publish
# 当你的包名为@your-name/your-package时才会出现 npm ERR! You must sign up for private packages
# 原因是当包名以@your-name开头时，npm publish会默认发布为私有包，但是 npm 的私有包需要付费，所以需要添加如下参数进行发布
npm publish --access public

撤销发布

npm unpublish xxx --force

使用

npm install xxx -S

// main.js
import xxx from ''
vue.use(xxx)

笔记

app.vue

在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示（即 中内容会显示），随后会被组件的模板内容所取代（即main.js 中的 APP组件），而 index.html 中的 title 部分不会被取代，会一直保留

入口文件

默认加载 src/main.js，可通过修配置 webpack.config.js 手动指定

module.exports = {
    ...,
  pages:{
    index: {
      // 应用入口配置，相当于单页面应用的main.js，必需项
      entry: 'src/Index_config/main.js',
  
      // 应用的模版，相当于单页面应用的public/index.html，可选项，省略时默认与模块名一致
      template: 'public/index.html',
  
      // 编译后在dist目录的输出文件名，可选项，省略时默认与模块名一致
      filename: 'index.html',
  
      // 标题，可选项，一般情况不使用，通常是在路由切换时设置title
      // 需要注意的是使用title属性template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      // title: 'console page',
  
      // // 包含的模块，可选项
      // chunks: ['console']
    },
    test: {
      // page 的入口
      entry: 'src/Test_config/main.js',
  
      // 应用的模版，相当于单页面应用的public/index.html，可选项，省略时默认与模块名一致
      template: 'public/test.html',
  
      // 编译后在dist目录的输出文件名，可选项，省略时默认与模块名一致
      filename: 'test.html',
    },
}