小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
Vue3 + TS 开发前端组件库 丨 项目创建
- vue3 项目结构介绍
- vue3 项目的基本开发知识
- 如何用ts开发vue的组件?
- 如何用composition API 开发组件?
- 如何用JSX开发vue组件?
- vue3 和 vue2开发的一些区别
- setup API 的使用
创建项目
全局安装 vue cli
$ yarn add global @vue/cli
通过 vue/cli 创建项目
$ vue create vue3-ts-components-demo
Vue CLI v4.5.10
┌─────────────────────────────────────────────┐
│ │
│ New version available 4.5.10 → 4.5.13 │
│ Run yarn global add @vue/cli to update! │
│ │
└─────────────────────────────────────────────┘
? Please pick a preset:
nnn ([Vue 2] babel)
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features
# 这里 选择 Manually select features
? Check the features needed for your project:
◉ Choose Vue version
◉ Babel
◉ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter # 代码规范检测
◉ Unit Testing
◯ E2E Testing
# 选择版本
? Choose a version of Vue.js that you want to start the project with
2.x
❯ 3.x (Preview)
? Use class-style component syntax? (y/N) n
# 是否在 ts 的基础上还使用Babel? 因为会用到JSX 所以选择
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
❯ ESLint + Prettier (可以自动格式化代码)
TSLint (deprecated)
? Pick additional lint features:
◉ Lint on save # 保存时检测代码
◉ Lint and fix on # commit commit 时自动检测代码
? Pick a unit testing solution: (Use arrow keys)
Mocha + Chai
❯ Jest # 选择 Jest
? Where do you prefer placing config for Babel, ESLint, etc.?
❯ In dedicated config files # 将配置放在各自的配置的文件中
In package.json
? Save this as a preset for future projects? (y/N) y # 是否保存为预设方案
# 安装成功后 运行项目
cd vue3-ts-components-demo
yarn serve
项目创建成功~
查看目录结构
tree -I "node_modules"
.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.ts
│ └── shims-vue.d.ts
├── tests
│ └── unit # 单元测试
│ └── example.spec.ts
├── tsconfig.json
├── jest.config.js # jest 单元测试配置文件
├── babel.config.js # babel 配置文件
├── .browserslistrc
├── .gitignore
├── .eslintrc.js # eslint 配置文件
└── yarn.lock
配置代码格式化工具prettier
webStorm 配置 prettier
Preferences -> Plugins -> 搜索 prettier -> 安装
VScode 配置prettier
插件-> 搜索 prettier -> 安装
根目录下创建 .prettierrc 配置文件
{
"tabWidth": 4, # Specify the number of spaces per indentation-level.
"semi": false, # 代码规范里面是否要写分号
"singleQuote": true, # 是否使用单引号
"arrowParens": "always", # 写匿名函数,箭头函数时参数是否一定要加括号
"trailingComma": "all"
}
# 其它具体配置见官网
# https://prettier.io/docs/en/options.html
Webstorm 配置保存文件自动格式化代码
yarn add -D prettier
Preferences > Tools > File Watchers
webstrom 保存自动代码格式化就配置好了
