一、工程创建

1.安装node

2. 安装vue3.0

方式一：npm i -g @vue/cli
方式二：cnpm install -g @vue/cli
这个需要安装淘宝镜像

npm install -g cnpm --registry=http://registry.npm.taobao.org

其中 -g 表示全局安装

3、创建vue3.0的项目

 vue create project-name

4、使用vue3.0

在main.js中：

import VueCompositionApi from '@vue/composition-api'
//使用vue3.0
Vue.use(VueCompositionApi);

二、使用

组件传参

传输方

 import {reactive, provide, toRefs} from '@vue/composition-api';export default {//组件导入components: {Slide,Categories,CategoryList},setup: function () {const state = reactive({images: [//播放的图片require("@/assets/img/1.png"),require("@/assets/img/2.png"),require("@/assets/img/3.png")]});//传输方代码provide('slideList', state.images);return {...toRefs(state)}}

接收方

 import {reactive, toRefs, onMounted,inject} from '@vue/composition-api'export default {name: "Slide",//reactive处理响应值数据setup: function () {//接收参数const slideList=inject('slideList');}
}

axios使用

main.js

import axios from 'axios'//引入
//放到原型对象中
Vue.prototype.$http = axios; 
//默认的url
axios.defaults.baseURL ="http://localhost:10080/";

使用

import {reactive, toRefs,onMounted} from '@vue/composition-api'export default {name: "Categories",//root相当于vue2.0的thissetup: function (props,{root}) {const state = reactive({//水果分类fruitCategories: []});let getData=()=>{root.$http.get("/category/getCategories").then(result=>{if(result.data.code===200){state.fruitCategories=result.data.data;}else{alert("操作失败")}}),error=>{console.log(error)}};onMounted(()=>{getData();});//返回全部return {...toRefs(state),// play}}}