使用@vue/cli4脚手架从零开始搭建typescript版本的UI库1.全局安装@vue/cli4官网地址：https://cli.vuejs.org/zh/guid...npminstall-g@vue/cli#ORyarnglobaladd@vue/clivue--version@vue/cli4.5.13#当前版本2.构建项目#创建项目totorovuecreatetotoro#配置选项VueCLIv4.5.13?请选择一个预设：手动选择功能？检查项目所需的功能：选择Vue版本、Babel、TS、路由器、CSS预处理器、Linter、Unit？选择一个你想用2.x启动项目的Vue.js版本？使用类风格的组件语法？是的？将Babel与TypeScript一起使用（现代模式、自动检测的polyfills、转译JSX需要）？是的？路由器使用历史记录模式？（需要为生产中的索引回退设置适当的服务器）否？选择一个CSS预处理器（默认支持PostCSS、Autoprefixer和CSSModules）：Sass/SCSS（带dart-sass）？选择一个linter/格式化程序配置：更漂亮？选择其他lint功能：Lintonsave？选择一个单元测试解决方案：Jest？在哪里你更喜欢为Babel、ESLint等放置配置？在专用配置文件中？将其保存为未来项目的预设？是的？将预设另存为：vuecl4_vue2_ts?选择安装依赖项时要使用的包管理器：Yarn3。简单配置vscode保存自动格式化#vscodesettings.json文件"editor.codeActionsOnSave":{"source.fixAll.eslint":true}yarnserve时自动打开浏览器#在项目中新建vue.config.js配置文件根目录module.exports={devServer:{open:true,//启动项目时自动打开浏览器},};4、目录结构设计包：组件源码网站：原src目录改为组件文档官网，展示exampleswebsite/docs：组件文档和示例代码markdown格式src：组件公共工具函数src/theme：组件style文件夹（组件的所有样式都放在这里）src/index.ts：组件统一导出入口文件（整体导出，全包）5.修改vue。config.js配置#vue.config.js//eslint-disable-next-line@typescript-eslint/no-var-requiresconstpath=require("path");module.exports={devServer:{open:true,},pages:{index:{//页面条目entry:"website/main.ts",//templatesourcetemplate:"public/index.html",//dist/index.html中的输出文件名:"index.html",//当使用标题选项时},},configureWebpack:{resolve:{//设置别名alias:{"totoro-ui":path.join(__dirname,"./"),packages:path.join(__dirname,"./packages"),"@":path.join(__dirname,"./website"),main:path.join(__dirname,"./src"),},},},//扩展webpack配置以将包添加到已编译的chainWebpack：(config)=>{config.module.rule("js").include.add(path.resolve(__dirname,"packages")).end().use("babel").loader("babel-loader").tap((options)=>{//修改它的选项...returnoptions;});},};
