如何在 WebStorm 项目中包含 Vuetify

Question

我为如何将 Vuetify 添加到使用 WebStorm 创建的默认 Vue.js 项目而苦苦挣扎。这实际上与如何在 WebStorm 中设置默认 Vue.js 项目有关，而不是编辑器本身，因为它似乎使用了一种与我能找到的其他方法不同的方法。我收到“Unknown custom element <v-alert>”的错误（例如）。我找不到关于如何执行此操作的答案，因为 WebStorm 的默认设置不同于 all 我能找到的操作方法。

我的App.vue文件如下：

<template>
  <div id="app">
    <img alt="Vue logo" src="../../assets/logo.png">
    <HelloWorld msg="Welcome to your Vue.js app"/>
    <v-alert dismissible>Why does this show as an unknown custom element?</v-alert>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我的main.js文件如下：

import Vue from 'vue'
import App from './App.vue'
// eslint-disable-next-line no-unused-vars
import Vuetify from "vuetify";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

我的package.json文件是这样的：

{
  "name": "my-vue-app",
  "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.6.4",
    "deepmerge": "^4.2.2",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "vue": "^2.6.11",
    "vuetify": "^2.2.18"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

I 运行 npm install vuetify 这似乎正确进行，并且在构建或提供它时我没有遇到任何错误。但是我不知道如何让我的 Vue 应用程序导入 Vuetify 组件。

我能找到的所有文档都在谈论直接实例化 Vue 应用程序，我没有这样做，或者如果它谈论单个组件 .vue 文件，这些示例都有 module.exports，这又是，我在WebStorm搭建的项目中没有。

我尝试将 Vuetify 添加为 App.vue 的脚本部分中的导入之一，我还尝试将 Vuetify 和 v-alert 设置为 [=34] 的组件部分中的组件=] 文件，但两者都无法正常工作。感谢您的帮助。

Answer 1

I'm struggling a lot with how to include Vuetify a default Vue.js project created using Webstorm

只需按照 https://vuetifyjs.com/en/getting-started/quick-start/ 的说明进行操作即可：

通过在终端中运行ning vue create 或在 [=31= 中使用 New > Project > Vue.js 创建一个新项目]（使用默认项目设置）
在终端中，运行 vue add vuetify

My main.js file is as follows:

您没有注册 Vuetify（Vue.use(Vuetify)；如果您不喜欢遵循标准方式（即使用 vue add），请尝试 https://vuetifyjs.com/en/getting-started/quick-start/#webpack-install

如何在 WebStorm 项目中包含 Vuetify

How to include Vuetify in WebStorm project

webstorm

vue-component

vuetify.js