使用 vue3 + typescirpt + elementUI 创建vue 项目

安装依赖插件

npm i typescript -g
npm i @vue/cli-plugin-typescript

创建项目

vue create project-name

注意：

• vue3需要nodeJS的版本最低是 node 14.18.0 版本, 可以使用 nvm 管理 node 版本，若要查看完整的可安装版本列表，可访问官网：nodejs.org/en/download…

常用 nvm 命令：
nvm list  // 查看安装的node 版本
nvm install v14.18.0 // 安装 node 版本
nvm use v16.14.2 // 本地 node 版本切换
nvm uninstall v14.17.0 // 卸载版本
nvm current // 显示当前正在使用的Node版本。

• 在已有的 vue 项目中引入 typescript， 需运行 tsc --init, 项目根目录下会生成 tsconfig.json. 根入口文件main.js改成main.ts, 不然会报错

• 如果创建项目运行有报错，建议切换 node 版本试试。

报错解决：

1. Cannot destructure property 'script' of 'result.descriptor' as it is undefind

• 我自己项目的 package.json 如下：

  node: v17.6.0、typescript: 4.5.5、@vue/cli-plugin-typescript：5.0.0

  注意安装包 typescript  @vue/cli-plugin-typescript 的版本号！

{
  "name": "official-website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "less": "^4.0.0",
    "less-loader": "^8.0.0",
    "prettier": "^2.4.1",
    "typescript": "~4.5.5"
  }
}

• 报错 loaderContext.getOptions is not a function, 同样是 node 版本问题，本地修改后匹配版本为：node: v16.18.0、typescript: 4.4.2、@vue/cli-plugin-typescript：4.5.15

1. Component name "XXX" should always be multi-word ，错误原因：组件名称不符合eslin校验规则， 需要进行修改。

第一种解决方法：修改组件名称为大驼峰，不要用系统中命令常见的名称。

第二种解决方法：在根目录下，打开【 .eslintrc.js】 文件，如果没有，就新建，内容如下：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    //在rules中添加自定义规则
    //关闭组件命名规则
    "vue/multi-word-component-names":"off",
  }
}

1. Argument of type 'typeof import("xxx/node_modules/vue/dist/vue")' is not assignable to parameter of type 'Component<any, any, any, ComputedOptions, MethodOptions>'

解决方案：createApp(app as any) 代替 createApp(App)

引入 elementUI

vue-cli@3 适配的 element 插件：element-plus

项目地址：github.com/ElementUI/v…

安装：

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

使用：

1.全局引入：

// main.ts 引入
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

2.按需引入：

新加文件夹 plugins ,新建配置文件 elementUi.js

// elementUi.js
import {
    ElButton,
    ElInput,
    ElMessageBox,
    ElNotification
} from 'element-plus'

import lang from 'element-plus/lib/locale/lang/zh-cn'
import locale from 'element-plus/lib/locale'

export default (app) => {
    locale.use(lang)
    app.use(ElButton)
    app.use(ElNotification)
    app.use(ElMessageBox)
    app.use(ElInput)
}

// main.ts
import installElementPlus from './plugins/elementUi.js'
import 'element-plus/dist/index.css'

const app = createApp(App as any)
installElementPlus(app)
app.use(store).use(router).mount("#app");

运行可能会报错:Could not find a declaration file for module './plugins/elementUi.js'. '/Users/kaiwang/vue-project-self/juejin-website/src/plugins/elementUi.js' implicitly has an 'any' type.

原因：没有对变量声明类型

解决方案： 在tsconfig.json里的compilerOptions加入noImplicitAny: false

// tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    ........
    "noImplicitAny": false,
  },
  .....
}

原理：noImplicitAny 是将TypeScript从可选类型语言转换为强制类型检验语言。如果选择true，那么需要将报错文件改后缀为.ts，还需要做一个变量的正确声明.

一个简单的demo

<template>
  <div class="about">
    <div>
      <span class="int">{{ count }}</span>
      <el-button type="primary" @click="add">+</el-button>
    </div>
    <div>
      <span> 与 10 相加的和为： </span>
      <span>{{ total }}</span>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      count: 0,
      total: 0
    })
    onMounted(()=>{
      state.total = state.count + 10
    })
    const add = () =>{
      state.count++
    }
    watch(()=>state.count,(newVla)=>{
      state.total = newVla + 10
    })
    return {
      ...toRefs(state),
      add
    }
  },
})
</script>
<style lang="less" scoped>
.about{
  width: 100%;
  height: 100%;
  padding: 10px 20px;
  font-size: 14px;
  div{
    margin: 10px 0;
  }
  .int{
    margin-right: 10px;
  }
}
</style>

效果如下：

---

如有问题，欢迎探讨，如果满意，请手动点赞，谢谢！🙏

及时获取更多姿势，请您关注！！