vue3 composition api用法，vue3 template详解

本内容由系统网小编为大家分享，Windows系统安装教程、办公系统、软件怎么使用、软件使用教程、办公软件攻略等信息。

项目搭建

vite

vue-cli

如果已经全局安装过旧版本的vue-cli，先卸载。

安装新版@vue/cli

备注：

vite 是一个由原生ESM驱动的Web开发构建工具，打开 vite 依赖的 package.json 可以发现在 devDependencies 开发依赖里面已经引入了TypeScript ，甚至还有 vuex , vue-router , less , sass 这些本地开发经常需要用到的工具。vite 轻量，开箱即用的特点，满足了大部分开发场景的需求，作为快速启动本地 Vue项目来说，这是一个非常完美的工具。

vue-cli搭建项目

vue3 的更新怎么能少得了 vue-cli 呢， vue-cli 更强调的是用 cli 的方式进行交互式的配置，选择起来更加灵活可控。丰富的官方插件适配，GUI的创建管理界面，标准化开发流程，这些都是 vue-cli 的特点。

备注：想要预装什么，就手动check什么（即使前期忘记勾选，后期也可以加装）。

例如：忘记使用选择 TypeScript 也没事，加一行cli命令就行了

最后，别忘了在 .vue 代码中，给 script 标签加上 lang=“ts”

vite搭建项目（重点讲）

访问：http://localhost:3000

上图可以看到新建的项目结构与vue-cli4创建的项目结构基本一样，都是App.vue和main.js

查看main.js文件内容

发现创建Vue的方式变了，原来是new Vue来初始化Vue，但在Vue3.0中，修改为了通过createApp的方式；Vue3中文文档

配置项目

配置typescript

1、安装typescript

2、初始化 tsconfig.json

3、将main.js修改为main.ts

其他的引用也修改为main.ts,也需要将其他页面的<script>修改为<script lang="ts">

4、配置 ts 识别vue文件,在项目根目录添加shim.d.ts文件添加以下内容

配置Vue Router

Vue Router 4.0 ，变化请查看 Github 中完整的细节， 目前版本beta: v4.0.12, yarn 进行安装需要带上版本号1、安装vuex

2、安装完后配置vue-router在项目src目录下面新建router目录，然后添加index.ts文件，添加以下内容

3、将router引入到main.ts中,修改main.ts文件

配置Vuex

Vuex 4.0 ，变化请查看 Github 目前版本beta: v4.0.21、安装vuex

2、安装完后配置vuex在项目src目录下面新建store目录，并添加index.ts文件，添加以下内容

配置Ant Design Vue

具体使用方式请参考： 官方文档 1、引入ant-design-vue

2、在main.ts中引入

XTw.com.Cn系统网专业应用软件下载教程，免费windows10系统,win11,办公软件,OA办公系统,OA软件,办公自动化软件,开源系统,移动办公软件等信息，解决一体化的办公方案。