Vue3.0 project construction and usage process

I was recently refactoring an old project, and my leader asked me to use a new technology stack. Well, it's time to show off my new vue3.0.

Without further ado, let me begin my show. . . (The following is just my own personal understanding and usage habits, for reference only)

1. Project construction

1. You can configure vite yourself, but to save time, I will use scaffolding to build it directly. (If you are interested, you can study Vite, it is still very fragrant)

2. Project generation: in iTerm: vue create myproject

Then choose different configurations according to your requirements

Select the 3.x we need

Then configure the router as required, already pack.json. . . Then npm run serve

ok. A basic 3.0 project has been built and ended. (That is impossible)

2: Directory structure

The original directory structure is as follows:

In order to facilitate data management, we need to customize some other files. The following is a simple demo structure:

Hooks are used to define methods of some common components, which can be reused in multiple components or used in conjunction with vuex.

typing defines some ts types you need to use. for example:

Different types are split according to different components, and then exported uniformly in the index. Some common types can be defined in index.

request defines some http requests.

base.ts basic path

api.ts collection api

http.ts can intercept axios requests and configure the environment. (development, product)

The overall configuration is roughly like this, centralizing the API and TS types to facilitate subsequent management.

The components also need to be split:

This is an about page. Divided into .vue files and a folder with Hooks inside. The .vue file is the basic demo structure. Different files are split into different files according to different functions in hooks. For example: the listDownHooks.ts file is a method collection used to display the drop-down menu. You can also split a style file separately (I thought it was a bit troublesome so I didn't do it..)

This is the directory structure. First define the basic data types in typing, then introduce them into the methods in Hooks under each component and use the corresponding methods in the .vue file.

Three: Composition API

The Composition API is a set of additional function-based APIs that allow flexible composition of component logic. It is better to eat with ts~~~

1. defineComponent

Deconstructed from Composition Api and used with ts. Define a component:

export default defineComponent({});

If you don't use ts, you can also use export default {}.

2. setup

The core part of Composition Api is the highlight of Vue3.0. Replaces the beforeCreate and created lifecycles.

You can initialize some responsive data in setup.

setup(props, ctx) accepts two parameters, props and ctx (context).

Props are traditional parent-child data. It is not recommended to destructure props in setup, as this will make props unresponsive.

ctx can be deconstructed into slots, attrs, and emit, and its usage is similar to 2.0.

3. Ref and reactive

Methods used to create responsive data. Deconstruct from vue => import {ref, reactive} from 'vue';

ref usage:

import {ref, defineComponent} from 'vue';
export default defineComponent({
 setup() {
  const number = ref(0);
  console.log(number); 
  return {
   number
  }
 }
})

Create a responsive data through ref and take a look at it in the console.

This is a ref response data. When operating, we use number.value to operate the data and then return the result.

What is the difference between ref declaration of basic type and reference type?

ref declares the basic type, which creates a responsive object of ref

ref declares the reference type and also creates a ref object, but the internal part is a responsive object wrapped with reactive methods.

If your ref object is changed in a reactive, you can directly get it through the key and value methods

Reactive use:

import {reactive, defineComponent, toRefs} from 'vue';
export default defineComponent({
 setup() {
  const obj = reactive({   
    menuList: [] as Array<T>
   });
  console.log(number); 
  return {
    ...toRefs(obj);
  }
 }
})

Create a proxy response data. Return the data through toRefs. The interior is like this:

Personally, I think that some basic types can be defined more using ref, and for an overall definition, reactive can be used.

other:

Some other commonly used methods such as computed, watch, etc. are actually similar to 2.0 in usage. I won’t describe it in detail here.

Four: Basic use:

Take a basic news list as an example.

The main thing is to retrieve data during the mounted phase and refresh the data when turning the page.

Table of contents:

src -> views -> News -> Hook -> newsListHook.ts (used to process list data)

Define the raw data in the file.

let dataSource = reactive({
 list: [] as Array<InewsList> // InewsList is a data type});

Define a newsList() method, which contains a getList method to obtain interface data. A method is triggered when a paging request is made, and getList is mounted. Then return the data and methods. The code is as follows:

/** * 1. List request data */ import api from '../../../request/api';
import {reactive, onMounted} from 'vue';
import {InewsList} from '../../../typing';
export function newsList(): object { 
 let dataSource = reactive({list: [] as Array<InewsList>});
 function getList(obj: object): void {
  api.newsList(obj).then(res => {
   dataSource.list = res.data.data; })
 };
 function onChange(e: any): void {
  let start = e || 10;
  const obj = {start,num: 10};
  getList(obj);
 }; 
 onMounted(() => {
  const startObj = {start: 1, num: 10};
  getList(startObj);
 }); 
 return {
  dataSource,
  getList,
  onChange
}}

Then use it in src -> views -> News -> News.vue file.

import {newsList} from './Hook/newslistHook';
export default defineComponent({ 
  name: 'news',
  setup() { 
  const list = newsList();
  return {
   ...list // list contains all defined data and methods.
  } 
}})

console list:

This way you can render and use it directly in the vue file.

To sum up: the methods and events (click, mousedown, keyup...) that need to be used can be executed in the hook, and the vue file is used for data rendering.

The Vue framework of antd is used in the project. It is best to load it on demand when using it. After all, antd is too big.

import Menu from 'ant-design-vue/es/menu/index'
import Select from 'ant-design-vue/es/select/index'
createApp(App).use(store).use(router).use(Menu).use(Select)

Okay, that’s all. A newbie is trying to write vue3.0. Please point out any shortcomings.

The above is the details of the vue3.0 project construction and usage process. For more information about vue3.0 project construction and usage, please pay attention to other related articles on 123WORDPRESS.COM!