Shulou(Shulou.com)06/02 Report--

Editor to share with you how to improve development efficiency in Vue3, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

I. setup name enhancement

Vue3's setup syntax sugar is a good thing, but the first problem brought about by using setup syntax is the inability to customize name, and we often need name to use keep-alive. This problem is usually solved by writing two script tags, one using setup and the other not, but this must not be elegant enough.

Import {defineComponent, onMounted} from 'vue'export default defineComponent ({name:' OrderList'}) onMounted (() = > {console.log ('mounted===')})

At this time, with the help of the plug-in vite-plugin-vue-setup-extend, we can solve this problem more elegantly. Instead of writing two script tags, we can define name directly on the script tag.

Installation

Npm I vite-plugin-vue-setup-extend-D

Configuration

/ / vite.config.tsimport {defineConfig} from 'vite'import VueSetupExtend from' vite-plugin-vue-setup-extend'export default defineConfig ({plugins: [VueSetupExtend ()]})

Use

Import {onMounted} from 'vue'onMounted (() = > {console.log (' mounted===')}) II. Automatic import of API

Setup syntax allows us to use the template without having to return variables and methods one by one, which greatly liberates our hands. However, for some commonly used VueAPI, such as ref, computed, watch, etc., we still need to manually import on the page every time.

We can import automatically through unplugin-auto-import, and we can use Vue's API in the file without the need for import.

Installation

Npm I unplugin-auto-import-D

Configuration

/ / vite.config.tsimport {defineConfig} from 'vite'import AutoImport from' unplugin-auto-import/vite'export default defineConfig ({plugins: [AutoImport ({/ / dts: 'src/auto-imports.d.ts', / / you can customize the location where files are generated, default is imports: [' vue']})]}))

Auto-imports.d.ts files are automatically generated after installation and configuration.

/ / auto-imports.d.ts// Generated by 'unplugin-auto-import'// We suggest you to commit this file into source controldeclare global {const computed: typeof import (' vue') ['computed'] const createApp: typeof import (' vue') ['createApp'] const customRef: typeof import (' vue') ['customRef'] const defineAsyncComponent: typeof import (' vue') ['defineAsyncComponent'] const defineComponent: typeof import (' vue') ['defineComponent'] const effectScope: typeof import ('vue') [' effectScope'] const EffectScope: typeof import ('vue') [' EffectScope'] const getCurrentInstance: typeof import ('vue') [' getCurrentInstance'] const getCurrentScope: typeof import ('vue') [' getCurrentScope'] const h: typeof import ('vue') [' h'] const inject: typeof import ('vue') [' inject'] const isReadonly: typeof import ('vue') [' isReadonly'] const isRef: typeof import ('vue') [' isRef '] / /.} export {}

Use

/ / instead of import, use refconst count = ref (0) onMounted (() = > {console.log ('mounted===')})

Above we only import vue,imports: ['vue'] in the configuration of vite.config.ts. In addition to vue, you can also import other documents such as vue-router, vue-use and so on.

Personal suggestion is only for some familiar API to do automatic import, such as vue API we are familiar with in the development, can write out with eyes closed, for some unfamiliar libraries like VueUse, it is better to use import, after all, editors have tips, not easy to write wrong.

Solve the problem of eslint error

Using it without import will cause an error message in eslint, which can be solved by installing the plug-in * * vue-global-api** in eslintrc.js.

/ / installation depends on npm I vue-global-api-D vue-global-api' / eslintrc.jsmodule.exports = {extends: ['vue-global-api']} 3. Farewell .value

As we all know, ref requires us to add .value when accessing variables, which makes many developers feel uncomfortable.

Let count = ref (1) const addCount = () = > {count.value + = 1}

Later, you Da also submitted a new ref grammar sugar proposal.

Ref: count = 1const addCount = () = > {count + = 1}

As soon as the proposal was published, it aroused a lot of discussion in the community, and it has been a long time since, so there is no more nonsense here.

What I am introducing here is another way to write it, which is also an official solution later, adding $before ref. This function is turned off by default and needs to be turned on manually.

/ / vite.config.tsimport {defineConfig} from 'vite'import vue from' @ vitejs/plugin-vue'export default defineConfig ({plugins: [vue ({refTransform: true / / enable ref conversion})]})

When enabled, you can write as follows:

Let count = $ref (1) const addCount = () = > {count++}

The syntax candy varies slightly according to the configuration of different versions, so here is the version of the relevant plug-ins I use:

"vue": "^ 3.2.2", "@ vitejs/plugin-vue": "^ 1.9.0", "@ vue/compiler-sfc": "^ 3.2.5", "vite": "^ 2.6.13" 4. Automatically import pictures

In Vue2, we often quote pictures like this:

However, require is no longer supported in Vite, and the reference image becomes like this:

Import Logo from'@ / assets/image/logo.png'

Every time you use a picture, you have to import, which obviously wastes everyone's time to touch the fish. At this time, we can use vite-plugin-vue-images to import the picture automatically.

Installation

Npm I vite-plugin-vue-images-D

Configuration

/ / vite.config.tsimport {defineConfig} from 'vite'import ViteImages from' vite-plugin-vue-images'export default defineConfig ({plugins: [ViteImages ({dirs: ['src/assets/image'] / / indicate the image storage directory})]})

Use

/ / import Logo from'@ / assets/image/logo.png' V, ignore the .vue suffix

It is believed that many people ignore the .vue suffix when importing files when developing Vue2. But in Vite, ignoring the .vue suffix causes an error.

Import Home from'@ / views/home' / / errorimport Home from'@ / views/home.vue' / / ok

According to you Da's answer, the suffix that must be written is actually designed on purpose, that is, people are encouraged to write it this way.

But if you really don't want to write, the authorities have also provided support.

/ / vite.config.tsimport {defineConfig} from 'vite'export default defineConfig ({resolve: {extensions: [' .js', '.ts', '.jsx', '.tsx', '.json', '.vue']})

It should be noted here that manual configuration of extensions should remember to add suffixes to other types of files, because other types of files, such as js, can ignore suffixes by default, and if not written, other types of files will need to be imported with suffixes.

Although this can be done, after all, the official documentation says it is not recommended to ignore the .vue suffix, so it is recommended that you honestly write .vue in the actual development.

These are all the contents of the article "how to improve Development efficiency in Vue3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.