前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【xingorg1-ui】基于vue3.0从0-1搭建组件库 (二) 库初始化配置

【xingorg1-ui】基于vue3.0从0-1搭建组件库 (二) 库初始化配置

作者头像
xing.org1^
发布2020-11-24 12:05:19
4500
发布2020-11-24 12:05:19
举报
文章被收录于专栏:前端说吧

(二) 库初始化

目录结构整理

新建相关文件,整理vue-cli自动建立的目录文件,删除demo文件等

配置文件整理

代码格式化prettier

安装prettier:

代码语言:javascript
复制
npm install -D prettier

新建并配置.prettierrc.json文件:

代码语言:javascript
复制
{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none"
}

vue.config.js

配置devServer+host
代码语言:javascript
复制
module.exports = {
  publicPath: '/',
  devServer: {
    host: 'dev.xingorg1-ui.com',
    port: 8080,
    disableHostCheck: true
  }
}
别名配置
代码语言:javascript
复制
const path = require('path')
function resolve(filePath) {
  return path.join(__dirname, filePath)
}
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('packages', resolve('packages'))
      .set('comp', resolve('src/components'))
      .set('style', resolve('styles'))
  }
}
htmlWebpackPlugin配置

安装plugin

代码语言:javascript
复制
npm install -D html-webpack-plugin

暂停配置

导出vue.config配置明细

在项目根目录下,执行下行代码,将vue的默认配置与自己的配置结合导出到outputjs

代码语言:javascript
复制
vue inspect > output.js

撰写README

...

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-11-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 目录结构整理
  • 配置文件整理
    • 代码格式化prettier
      • vue.config.js
        • 配置devServer+host
        • 别名配置
        • htmlWebpackPlugin配置
        • 导出vue.config配置明细
      • 撰写README
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档