vue3的基础使用

1、创建vue3的两种方式

第一种

##安装或者升级
npm install -g @vue/cli
##保证vue cli版本在4.5.0以上
vue --version或vue -V
##创建项目
vue create my-project

然后按照步骤：
1、Please pick a preset - 选择 Manually select features
2、Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
3、Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
4、Use class-style component syntax - 直接回车
5、Use Babel alongside TypeScript - 直接回车
6、Pick a linter / formatter config - 直接回车
7、Use history mode for router? - 直接回车
8、Pick a linter / formatter config - 直接回车
9、Pick additional lint features - 直接回车
10、Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
Save this as a preset for future projects? - 直接回车

第二种：使用vite创建

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

如果新建的项目中组件使用有eslint报错。则点击vcode中上方的文件，选择首选项，选择设置，搜索eslint。找到Vetur，把右边的Validate vue-html in using eslint-plugin-vue勾选去掉。

2、与vue2的区别

1、vue2中的html模板中必须要有一对根标签，vue3组件的html模板中可以没有根标签。

3、Composition API(常用部分)

1、setup（函数）

• 新的option所有的组合API函数都在此使用，只在初始化时执行一次
• 函数如果返回对象，对象中的属性或方法，模板中可以直接使用