This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

For Vue3, it has been released for some time, and it has been explored and studied intermittently, but it is not systematic and there is no summary. Let me make a brief summary this weekend:

Configure the Vue3 development environment

Vue3 repository & document address

Vue3 source repository: github.com/vuejs/vue-n… The document address of Vue3 is v3.vuejs.org/

Create a Vue3 version project

    1. Create a project with scaffolding:
Install or upgrade
npm install -g @vue/cli
# OR
yarn global add @vue/cli

Ensure that vue CLI version is above 4.5.0
vue --version

# Create a project
vue create vue3_study
Copy the code

When creating a project with scaffolding, there are also some configuration options for the project to choose from. Here are some notes:

  • Please pick a preset – Select Manually select features

  • Check the features needed for your project – Select TypeScript. Note that space is selected and carriage return is the next step

  • Choose a version of vue.js that you want to start the project with – select 3.x (Preview)

  • Use class-style component syntax – Type n, press Enter

  • Use Babel alongside TypeScript – Type n, press Enter

  • Pick a linter/formatter config – Press Enter

  • Pick Additional Lint features – Direct Carriage return

  • Where do you prefer placing config for Babel, ESLint, etc.? – Enter

  • Save this as a preset for future projects? – Type n, press Enter

    1. Of course, you can also create projects using a graphical interface, or the command line
# Formalize the interface to create a project
vue ui
Copy the code

Then launch the project and you can see it in your browser

Learn some of the plug-ins recommended by the Vue3 project

Has been using VSCode to knock code, here are some of the installed plug-ins

  1. Vue Language Features (Volar) :VeturThe corresponding

Volar

Fast Vue Language Support Extension VueLF is a Language Support plugin built specifically for Vue 3

  1. Eslint plug-in The most commonly used code formatting checker :ESLint

If esLint does not take effect, you can create a.vscode folder in the project root directory and create settings.json in that folder

Then enter the following code

{
  "eslint.validate": ["typescript"]}Copy the code

Project structure and some code demo

Ref syntax structure

  1. The setup method

Methods created Mounted setup(){… },

Setup () then returns the required methods and functions, data, and so on.

  1. Ref function

Ref is a function, it takes a parameter, and it returns a magical responsive object. The 0 that we initialize is wrapped in the object as a parameter, so that changes can be detected in the future and the corresponding response can be made.

<script lang="ts">
import { computed, defineComponent, onMounted } from 'vue'
import ColumnList from '.. /components/ColumnList.vue'
import Uploader from '.. /components/Uploader.vue'
import { useStore } from 'vuex'
import { GlobalDataProps, ResponseType, ImageProps } from '.. /store'
import createMessage from '.. /components/createMessage'
// import { testData } from '.. /const/testData'
export default defineComponent({
  name: 'Home'.components: {
    ColumnList,
    Uploader
  },
  setup () {
    const store = useStore<GlobalDataProps>()

    const beforeUpload = (file: File) = > {
      const isJPG = file.type === 'image/jpeg'
      if(! isJPG) { createMessage('Upload images in JPG format only'.'error')}return isJPG
    }
    const onFileUploaded = (rawData: ResponseType<ImageProps>) = > {
      createMessage('Upload picture Id${rawData.data._id}`.'success')}const onFileUploadedError = (rawData: ResponseType<ImageProps>) = > {
      createMessage('Upload picture Id${rawData.data._id}`.'error')
    }

    onMounted(() = > {
      store.dispatch('fetchColumns')})const list = computed(() = > store.state.columns)
    // const biggerColumnLen = computed(() => store.state.columns.filter(c => c.id > 2).length)
    const biggerColumnLen = computed(() = > store.getters.biggerColumnLen)
    return {
      list,
      biggerColumnLen,
      beforeUpload,
      onFileUploaded,
      onFileUploadedError
    }
  }
})
</script>

Copy the code

Reactive Reactive data hijacking functions

Reactive functions – Documentation: Of course the most critical data response hijacking Reactive functions can also be introduced separately on demand

Here’s a chestnut:

// Import the needed functions directly from vUE: for example, computed Reactive and so on

import { ref, computed, reactive, toRefs } from 'vue'

// Define a data type
interface DataProps {
  count: number;
  double: number;
  increase: () = > void;
}

setup() {
  // Define data directly as the type declared above, and use 'reactive' wrapping as the response data
  const data: DataProps  = reactive({
    count: 0.increase: () = > { data.count++},
    double: computed(() = > data.count * 2)})const refData = toRefs(data)
  return {
    ...refData
  }
}
Copy the code