vue3.0搭建项目

vue3.0搭建项目

第一种使用 vue2 加 componsition-api

// mian.js中使用

// 让vue 2.x项目使用vue3.x的语法
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>{{msg}}</div>
    <div>{{msg2}}</div>
    <div>{{msg3}}</div>
    <button @click="changeMsg">更改数据</button>
    <div>{{num}}</div>
    <div>{{doubleNum}}</div>
    <button @click="add">+1</button>
  </div>
</template>

<script>
// 使用 toRefs 把 reactive 变为响应式数据
import { reactive, toRefs, ref, computed, watch ,onMounted, onUnmounted} from '@vue/composition-api';

export default {
  data(){
    return {
      msg:'fqniu'
    }
  },
  /**
   * setup 函数在vue3.0是一个非常重要的函数，他的执行时机在beforeCreate之后 和created之前，
   * 很多代码都必须写在这个函数里面，并且如果在组价的template中使用，那么就必须在setup中return 出去；
   * 
   * setup中两个参数说明：
   * 
   * props 用于接收父组件传递的值，注意：必须先在setup外面props中定义，才能通过props.xxx拿到父组件传递过来的值
   * 
   * context上下文对象，这个上下文对象中包含一些有用的属性，这些属性在vue2.x中需要通过this才能访问，在vue3.0中，他们的访问如下
   * setup(props, context){
   *  context.attrs
   *  context.slots
   *  context.parent
   *  context.root
   *  context.emit
   *  context.refs
   * }
   * 
   * computed计算属性：
   * 1、写在setup函数中  const getDoubleNum = computed(() => state.num *2)
   * 2、写在state中      const state = reactive({ myName:computed(() => 'my name is fqniu') })
   * 
   * 生命周期 官网
   * 
  */ 

  setup(){
    console.log('setup');
    const state = reactive({
      msg2 : '我在学vue3',
      num : 1,
      // 这里不用导出
      doubleNum : computed(() => {
        return state.num*2
      })
    })
    // return state

    watch(() => state.num, (newVal, oldVal) => {
      console.log(newVal, oldVal);
    })

    const msg3 = ref('我在学vue3.0')

    const changeMsg = () => {
      console.log('--------');
      state.msg2 = "niufuqiang"
      msg3.value = "修改msg3的值"
    }

    const  add = ()=>{
      state.num++
    }

    // const doubleNum = computed(() => {
    //   return state.num*2
    // })
    onMounted(()=>{
      console.log('onMounted');
    })

    onUnmounted(()=>{
      console.log('onUnmounted');
    })

    // data ,method 
    return {
      msg3,
      ...toRefs(state),
      changeMsg,
      add,
      // doubleNum
    }
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created(){
    console.log('created');
  },

}
</script>

第二种使用 vue2 + vue add vue-next

搭建vue2项目，之后终端安装：vue add vue-next

安装前

安装后

第三种使用 脚手架 搭建 vue3（推荐）

推荐vue3.0搭建项目解析：狗哥之 vue3.0 + ts 创建项目

vue3.0中axios请求封装

1、安装 axios npm i axios -S

2、新建 api文件 和 utils文件

3、utils文件中新建request.ts

import axios from 'axios'

const request = axios.create({
  baseURL: process.env.VUE_APP_BASEURL,
  withCredentials: true,
})

export default request

4、api中新建请求文件 例如xxx.ts

import request from '@/utils/request';

//获取数据
export const getData = ({ page= 0, limit= 5 }) => {
  return request({
    url: `xxxxx?page=${page}&limit=${limit}`,
  });
};

其中使用了VUE_APP_BASEURL；

根目录下新建 .env.development 和 .env.production

VUE_APP_BASEURL = 'http://localhost:3000/api/'

vue3.0编程式导航

1、引入useRouter

import { useRouter } from 'vue-router';

2、setup函数中使用

const router = useRouter()

3、跳转使用

router.push('/list');

vue3.0页面获取路由参数

1、引入useRoute

import { useRoute } from 'vue-router';

2、setup函数中使用

const route = useRoute();
console.log(route.params);

vue3.0使用vuex

1、引入useStore

import { useStore } from 'vuex';

2、setup函数中使用

const store = useStore();
store.commit('xxx', xxx);

vue3.0注意点

1、响应式数据 写在 reactive 中，返回用 ...toRefs(state) 包裹，子组件中数据响应式处理；
2、setup函数中return 的值 ，包括 data 、method ；
3、请求在生命周期中调用 onMounted（）