vscode configuration composition-api (vue2)

Recently, in the vue project (using vue2), I used composition-api to write code, and found that there are some small pits in the vscode configuration. Record it, which is convenient for future queries, and it is also convenient for small partners who use the same tool to configure.

Combined api configuration

1. Download composition-api download address
2. Introduced in the main.js file

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

In fact, so far, the composition-api can be used normally in vue. The general writing method can be written according to the official website, and the address is attached . Combination API

But I don't particularly like to use this way of writing. Why, see the sample code on the official website below:

setup(props) {
    
    
    const {
    
     user } = toRefs(props)

    const {
    
     repositories, getUserRepositories } = useUserRepositories(user)

    const {
    
    
      searchQuery,
      repositoriesMatchingSearchQuery
    } = useRepositoryNameSearch(repositories)

    const {
    
    
      filters,
      updateFilters,
      filteredRepositories
    } = useRepositoryFilters(repositoriesMatchingSearchQuery)

    return {
    
    
      // 因为我们并不关心未经过滤的仓库
      // 我们可以在 `repositories` 名称下暴露过滤后的结果
      repositories: filteredRepositories,
      getUserRepositories,
      searchQuery,
      filters,
      updateFilters
    }
  }

When using setupthe writing method, we need to use it return. The more we use it, returnthe longer the content will be. If we catch up with a large file, the length of the return is enough to make me irritated (after all, I have seen it with my own eyes)

So I like to use the following way of writing - single file component script setup

script setup is compile-time syntactic sugar for using the compositional API in single-file components (SFCs). Compared with ordinary script syntax, it has more advantages

To use this syntax, setupadd scriptto the code block

<script setup>
// 变量
const msg = 'Hello!'

// 函数
function log() {
    
    
  console.log(msg)
}
</script>

so you don't have to retrunwrite

Configuration document

1. Download composition-api and introduce it in the main.js file, this is the same as the above operation
2. Download unplugin-vue2-script-setup, download address unplugin-vue2-script-setup
   Note : npm i -D unplugin-vue2-script-setupThis installation depends on the packaging of your own project. If you will not install devDependenciesthe dependencies in package.json in the production environment, then npm i unplugin-vue2-script-setupinstall the dependencies directly in dependenciesmiddle.
3. webpack.config.jsConfigure the compiled content in :

module.exports = {
    
    
  /* ... */
  plugins: [
    require('unplugin-vue2-script-setup/webpack')(),
  ]
}

Note: My project uses webpack for packaging. The configuration method of this place depends on the packaging of your own project. Different packaging configuration methods are clearly written in the unplugin-vue2-script-setup document.

4. After configuring the project, start configuring vscode. To use vscode, you need to install @vue/runtime-dom, which is used by the editor and does not need to be configured dependenciesin

npm i -D @vue/runtime-dom

5. Install the Volar plug-in in the vscode extension center
   Note: Volar and Vetur plug-ins conflict, and the two need to disable each other

6. tsconfig.jsonConfigure content in global files

// tsconfig.json
{
    
    
  "compilerOptions": {
    
    
    "types": [
      "unplugin-vue2-script-setup/types"
    ]
  },
   "vueCompilerOptions": {
    
    
      "experimentalCompatMode": 2 // vue2 的框架需要加这个配置
    }
}

If there is no file in your project tsconfig.json, you can try to add one in the outermost layer of the project.
7. If you still use ESLintit, you need eslintrc.jsto configure it accordingly:

module.exports = {
    
    
// .....
  globals: {
    
    
    defineProps: 'readonly',
    defineEmits: 'readonly'
  },
}

**Note:** At present, I only use the method of definePropsand defineEmits, and only define two kinds. If there are more methods, they also need to be defined in it. For details, see document
8. The eslint-plugin-vue plug-in uses version 8 or above. I use 8.2.0
"eslint-plugin-vue": "^8.2.0"

After the above configuration, you can write code happily~~, I hope it can help my friends.