共计 1229 个字符,预计需要花费 4 分钟才能阅读完成。
应用 @vue/cli4 脚手架,从零开始搭建 typescript 版的 UI 库
1. 全局装置 @vue/cli4
官网地址:https://cli.vuejs.org/zh/guid…
npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue --version
@vue/cli 4.5.13 #以后版本
2. 构建我的项目
# 创立我的项目 totoro
vue 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,// 启动我的项目时主动关上浏览器},
};
正文完