The installation

Through scaffolding VUE - CLI: NPM install -g@vue /cli # or YARN global add @vue/cli vue create hello-vue3 # Select Manually select features #Copy the code

Project directory

. ├ ─ ─ Babel. Config. Js ├ ─ ─ package. The json ├ ─ ─ public ├ ─ ─ the SRC │ ├ ─ ─ App. Vue │ ├ ─ ─ API │ │ ├ ─ ─ commjs. Js │ │ ├ ─ ─ MyFindWorkCard. Js │ │ └ ─ ─ works. Js │ ├ ─ ─ assets │ │ ├ ─ ─ common. Less │ │ ├ ─ ─ the font │ │ ├ ─ ─ image │ │ ├ ─ ─ mixins. Less │ │ └ ─ ─ theme. Less │ ├ ─ ─ business │ │ ├ ─ ─ const. Ts │ │ ├ ─ ─ dataTrans. Js │ │ ├ ─ ─ pageAnimate. Ts │ │ └ ─ ─ requestTip. Js │ ├ ─ ─ Components │ ├ ─ ─ the config │ │ └ ─ ─ but ts │ ├ ─ ─ main. Ts │ ├ ─ ─ the router │ │ └ ─ ─ but ts │ ├ ─ ─ shims - vue. Which s │ ├ ─ ─ store │ │ ├ ─ ─ index. Js │ │ └ ─ ─ the module │ ├ ─ ─ types │ │ ├ ─ ─ const. Ts │ │ ├ ─ ─ the index, which s │ │ └ ─ ─ the route. The ts │ ├ ─ ─ the use │ │ └ ─ ─ UseUserInfo │ │ └ ─ ─ index. Ts │ ├ ─ ─ utils │ └ ─ ─ views │ ├ ─ ─ findjobs │ │ ├ ─ ─ but less │ │ └ ─ ─ index. The vue │ ├ ─ ─ the login │ │ └ ─ ─ index. Vue │ └ ─ ─ mime │ └ ─ ─ index. The vue ├ ─ ─ tsconfig. Json ├ ─ ─ tslint. Json ├ ─ ─ vue. Config. Js └ ─ ─ yarn. The lock The types directory is added to manage type files in a unified manner for later maintenanceCopy the code

New features

Modular API

Use: Setup (props, context) {console.log(props, context) return {} // Anything returned here can be used for the rest of the component} Setup was executed before the instance was created, So you won't be able to access any of the properties declared by the component but you can get the current instance through the API getCurrentInstanceCopy the code

Global method properties

main.ts const app = createApp(App) app.config.globalProperties.$filters = { mapTrans (value:string, Obj: object) {return obj [value]}} get: getCurrentInstance (). The appContext. Config. GlobalProperties. $filtersCopy the code

Registering global components

Main. ts: import myComponent from '@/components/index' myComponent(app) @/components/index:  import myTop from '@/components/myTop/index.vue' const myComponent = function (app:any) { app.component('my-top', myTop) } export default myComponentCopy the code

Modular API

Setup is similar to minxin, but mixins tend to cause context confusion and are difficult to maintain. Ref: a Proxy object is returned and x.value = xx reactive: a Proxy object is set to x.value = xx reactive The setup function registered in different life cycle of the callback function The return value: Object | Funtion returns an Object in the component template can be accessed directly; Or return a render function that extracts common code logic from the setup function, like React hooks, for later maintenance. Simply put, you can now use vue instance features in a setup function, such as responsive data, computed, watch, life hook functions, etcCopy the code

component

Asynchronous component registration: such as {path: '/mine', name: 'mine', component: DefineAsyncComponent (() => import('@/views/mine/index.vue')), meta:{title:' I '}} Custom event registry: export default {props: ['text'], emits: ['accepted'] }Copy the code

Other minor changes

Fragment: Vue3 supports multiple nodes Teleport: can specify the parent of the current node to render v-for: mixin: This is a shallow merge. Properties that are not declared in the component data are not merged...Copy the code