vue3.0(包含中文官方文档)

vue3.0 官方文档

一、工程创建

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的this
        setup: 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
            }
        }
    }

vuex的使用