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

This article mainly introduces the relevant knowledge of "how to make Vue3 development smoother". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "how to make Vue3 development smoother" can help you solve the problem.

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 ({/ / the location where files can be generated can be customized by default is under the root directory. It is recommended to put dts: 'src/auto-imports.d.ts', imports: [' vue']}) in the src directory using ts)]}))

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.

Cool to cool, but prone to variable conflicts, use with caution!

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.

This is the end of the content on "how to make Vue3 development smoother". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.