应用@vue/cli4脚手架,从零开始搭建typescript版的UI库

1. 全局装置@vue/cli4

官网地址:https://cli.vuejs.org/zh/guid...

npm install -g @vue/cli# ORyarn global add @vue/clivue --version@vue/cli 4.5.13 #以后版本

2.构建我的项目

# 创立我的项目totorovue create totoro# 配置选项Vue CLI v4.5.13? Please pick a preset: Manually select features? Check the features needed for your project: Choose Vue version, Babel, TS, Router, CSS Pre-processors, Linter, Unit? Choose a version of Vue.js that you want to start the project with 2.x? Use class-style component syntax? Yes? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes? Use history mode for router? (Requires proper server setup for index fallback in production) No? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)? Pick a linter / formatter config: Prettier? Pick additional lint features: Lint on save? Pick a unit testing solution: Jest? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files? Save this as a preset for future projects? Yes? Save preset as: vuecl4_vue2_ts? Pick the package manager to use when installing dependencies: Yarn

3.简略配置

vscode 保留主动格式化

# vscode settings.json文件"editor.codeActionsOnSave": {    "source.fixAll.eslint": true}

yarn serve时主动关上浏览器

# 我的项目根目录新建vue.config.js配置文件module.exports = {  devServer: {    open: true,// 启动我的项目时主动关上浏览器  },};