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的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}}}

vuex的使用

總結

以上是生活随笔為你收集整理的vue3.0(包含中文官方文档)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。