vscode配置composition-api (vue2)

最近在vue项目中(使用vue2)使用compositon-api进行代码编写,发现在vscode配置也有一些小坑,记录一下,方便以后查询,也方便使用相同工具的小伙伴配置.

组合式api配置

1. 下载composition-api 下载地址
2. 在 main.js 文件中引入

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

Vue.use(VueCompositionAPI)

其实到这里为止,在vue里面可正常使用composition-api了,一般写法按照官网就可编写了,附上地址 组合式API

但是我特别不爱用这个写法,为啥呢,看下面官网示例代码:

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
    }
  }

使用setup写法时候,需要使用return,我们使用的越多,return的内容就越长,如果赶上一个大文件,return的长度就够我烦躁的了(毕竟亲眼见过了)

所以我喜欢用下面的写法-单文件组件 script setup

script setup是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 script 语法，它具有更多优势

要使用这个语法，需要将 setup 添加到 script 代码块上

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

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

这样就不用写retrun了

单文件组件的配置 文档地址

1. 下载composition-api 和 在 main.js 文件中引入,这个和上面一个操作
2. 下载 unplugin-vue2-script-setup ,下载地址unplugin-vue2-script-setup
   注意:npm i -D unplugin-vue2-script-setup 这个安装,看自己项目打包情况,如果在生产环境不会安装package.json里面devDependencies的依赖,那就直接npm i unplugin-vue2-script-setup将依赖安装在dependencies中.
3. 在webpack.config.js中配置编译内容:

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

注意: 我的项目用的webpack进行打包,这个地方配置方式取决于自己项目打包情况,不同打包配置方式在unplugin-vue2-script-setup这个文档里面写的清清楚楚

4. 配置完项目,开始配置vscode.使用vscode需要安装 @vue/runtime-dom,这个是编辑器使用的,无需配置在dependencies中

npm i -D @vue/runtime-dom

5. 在vscode扩展中心中 安装 Volar 的插件
   注意: Volar 和 Vetur 插件冲突,二者需要相互禁用

6. 在全局的tsconfig.json文件中配置内容

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

如果自己项目里面没有tsconfig.json文件,可以尝试在项目最外层自行添加一个.
7. 如果还使用了ESLint的话,还需要在eslintrc.js中进行相对应配置:

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

**注意:**目前我只使用了defineProps和defineEmits的方法,只定义了两种,如果有使用多的方法,也需要在里面定义,详见文档
8. eslint-plugin-vue 插件用8以上版本,我用的8.2.0
"eslint-plugin-vue": "^8.2.0"

以上配置完,就可以开开心心的写代码了~~,希望能帮助到小伙伴们.