Vue3 + TypeScript 入门项目搭建

802 阅读2分钟

1. 版本前提

使用Vue3,需要升级vue-cli,全局安装最新版本@vue/cli

npm install -g @vue/cli@next

安装成功后,输入命令查看当前版本(注意:V 为大写)

image.png

2. 创建项目

安装成功Vue-cli 4,用命令行创建vue3项目

vue create vue3-demo
  1. 选择Manually select features,点击回车

image.png 2. 按照自己项目需求选择对应的配置(按空格选中或取消选择),选择后点击回车

image.png

Babel:使用babel,便于将我们源代码进行转码(把es6=>es5)
TypeScript:使用TypeScript进行源码编写,使用ts可以编写强类型js,对我们的开发有很大的好处 
Progressive Web App(PWA):使用渐进式网页应用(PWA) 
Router:使用vue-router Vuex:使用vuex状态管理器 
CSS Pre-processors:使用CSS预处理器,比如:less,sass等 
Linter/Formatter:使用代码风格检查和格式化
Unit Testing:使用单元测试
E2E Testing:使用E2E测试, end to end(端到端)是黑盒测试的一种
  1. 选择Vue版本,在这里选择Vue 3

image.png

3. 项目配置

  1. Use class-style component syntax? (Y/n) 是否使用Class(类)风格装饰器, 即通过export default class Home extends Vue{} 创建Vue实例

image.png

  1. Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) 使用Babel做转义, 与TypeScript一起用于自动检测

image.png

  1. Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 路由模式, 是否选择history模式,启用history模式,项目build之后,可能会出现打开页面空白的情况哦

image.png

  1. Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) 选择一种css 预处理器

image.png

  1. Pick a linter / formatter config: (Use arrow keys) 选择一种代码格式化检测工具

image.png

TSLint: ts格式检验工具 ESLint with error prevention only: ESLint 只会进行错误提醒 
ESLint + Airbnb config: ESLint Airbnb标准 
ESLint + Standard config: ESLint Standard 标准 
ESLint + Prettier: ESLint(代码质量检测)+ Prettier(代码格式化工具)
  1. Pick additional lint features 代码检查方式:保存时检查/提交时检查

image.png

  1. Where do you prefer placing config for Babel, ESLint, etc. Babel, PostCSS, ESLin等配置文件怎么存放, 是放到单独的配置文件中?还是package.json里? 这里方便配置清晰好看, 我选择每个配置单独文件。

image.png

  1. Save this as a preset for future projects? (y/N) 是否需要保存当前配置,在以后的项目中可快速构建? 保存后, 后续创建项目时可以直接选择该配置, 不需单独配置

image.png

  1. 配置完成后,等待安装依赖

image.png

image.png

  1. 构建完成后,项目目录结构

image.png

4. 启动项目

cd my-demo
npm run serve

image.png

以上,Vue 3项目搭建过程完成。