Vue3+TS

一、vue3环境搭建

1.检查本地环境

如果脚手架过低 npm uninstall vue-cli -g 

npm install -g @vue/cli

2.创建项目 vue create 项目名字,选择重新创建一个项目

3.根据自己的需求选择自己需要的选项

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（端到端）是黑盒测试的一种

 

4.选择安装的配置

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


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


Use history mode for router?
路由模式, 是否选择history模式，启用history模式，项目build之后，可能会出现打开页面空白的情况哦


Pick a CSS pre-processor?
选择一种css 预处理器

Pick a linter / formatter config?
选择一种代码格式化检测工具
TSLint: ts格式检验工具
ESLint with error prevention only: ESLint 只会进行错误提醒
ESLint + Airbnb config: ESLint Airbnb标准
ESLint + Standard config: ESLint Standard 标准
ESLint + Prettier: ESLint（代码质量检测）+ Prettier（代码格式化工具）

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

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

 5.等待下载安装完成就ok了

注意：刚安装时候 由于环境问题可能会安装失败报错（记录一下）

解决方法

找到C:\Users\Administrator\.vuerc这个文件
设置packageManager为npm


可参考这篇文章
https://www.cnblogs.com/Anthony518/p/12054632.html

二、vue3 新增 Composition API 的一些特性 setup()、computed()和 watch()，Composition API 可以把复杂组件的逻辑变得更为紧凑，使代码有更高复用性和灵活性。

三、vue3 集成Ant Design Vue 

1.Ant Design Vue 官网

https://2x.antdv.com/docs/vue/getting-started-cn

2.main挂载Ant Design Vue

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App).use(store).use(router).use(Antd).mount('#app')