vue 组件开发神器 vue-sfc-cli

安装

1	$ npm i vue-sfc-cli -g

初始化项目

$ sfc-init
✔ Is this a single component or a library? › Library                         开发一个组件还是组件库?
✔ What is the npm name of your component? … element-ui-admin                 项目名称
✔ What is the kebab-case tag name for your component? … element-ui-admin     项目名称(短横线命名)
✔ Will this component be written in JavaScript or TypeScript? › JavaScript   JavaScript/TypeScript
✔ Enter a location to save the component files: … ./element-ui-admin         项目存放路径


  Init is complete, your files have been generated and saved into the directory you specified above.
  Within that directory, use src/element-ui-admin.vue as a starting point for your SFC.
  When you're ready, run `npm run build` to generate the redistributable versions.
$ ll
total 0
drwxr-xr-x  8 xxxxx  staff  256  5 28 15:18 element-ui-admin
$ cd element-ui-admin
$ ll
total 16
-rw-r--r--  1 xxxxx  staff    65  5 28 15:18 babel.config.js
drwxr-xr-x  3 xxxxx  staff    96  5 28 15:18 build
drwxr-xr-x  4 xxxxx  staff   128  5 28 15:18 dev                  自测目录
-rw-r--r--  1 xxxxx  staff  1415  5 28 15:18 package.json
drwxr-xr-x  4 xxxxx  staff   128  5 28 15:18 src                  源文件目录
$ cnpm install

自测

1	$ npm run serve

发布 npm

参考第一次发布npm包

主要有以下几步:
1. 在 https://www.npmjs.com/ 注册账号
2. 项目中登录 npm 账号
  $ npm login
3. 发布项目
  $ npm publish

关于更新

1
2
3

再次 publish 前，先要更新 package.json 中的 version
$ npm version patch/minor/major   补丁/小改/大改
对应 version "1.0.0" 中的三段

遇到问题及解决

在 element-ui 基础上的二次封装，使用这种写法
export default {
  name: "el-checkbox-string",
  template : `
  
  `,
}
报错: [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解决: 需要修改 vue 为 compiler（模板）模式
加 vue.config.js 文件，内容为:
module.exports = {
  productionSourceMap : false,
  chainWebpack: config => {
    config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
  },
}