【发布时间】：2020-07-02 08:00:53
【问题描述】：
我一直在努力解决如何将 Vuetify 包含在使用 WebStorm 创建的默认 Vue.js 项目中。这实际上与在 WebStorm 中设置默认 Vue.js 项目的方式有关，而不是与编辑器本身有关，因为它似乎使用了一种与我能找到的其他方法不同的方法。我收到“Unknown custom element <v-alert>”的错误（例如）。我无法找到有关如何执行此操作的答案，因为 WebStorm 的默认设置与 所有我能找到的方法不同。
我的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"
]
}
我运行了npm install vuetify，它似乎运行正确，并且在构建或提供它时我没有收到任何错误。但我不知道如何让我的 Vue 应用导入 Vuetify 组件。
我能找到的所有文档都谈到了直接实例化 Vue 应用程序，我没有这样做，或者如果它谈到单个组件 .vue 文件，那么这些例子都有module.exports，我又没有已经在WebStorm构建的项目中。
我尝试将 Vuetify 添加为 App.vue 的脚本部分中的导入之一，我还尝试将 Vuetify 和 v-alert 设置为 App.vue 文件的组件部分中的组件，但可以要么工作。感谢您的帮助。
【问题讨论】：
-
为什么这个问题与 WebStorm 相关？ （代码编辑器）。如果您的代码错误，您还会在 atom -or-visual code 上遇到错误（或浏览器控制台错误 - 与 Vue 植入和环境以及与 webstorm 无关的软件包相关的错误）。也许从“简单”的 hello-world 示例开始：blog.jetbrains.com/webstorm/2019/03/…。接下来尝试使用 Vuetify CLI - vuetifyjs.com/en/getting-started/quick-start/#vue-cli-install。很难回答您的 Q（项目范围 Q）。始终从“hello-world”示例开始。
-
它是 Webstorm 特有的，因为我可以用其他方法做到这一点，但不能使用 Webstorm 创建的默认配置。我很欣赏这些链接，但已经发现他们俩都试图在发布之前解决这个问题。第二个告诉我如何使用 Nuxt 和 Webpack 导入，但我不知道如何将其转换为我开始的 Webstorm 的默认 VueJS 项目中的构建过程。第一个是通过创建一个 VueJS 应用程序进行的，但我已经完成了所有这些。我无法具体解决如何将 Vuetify 添加到其中。我尝试将它作为一个组件添加到
export default并在上面添加一个导入。 -
谢谢。但正如你自己所说，这与编辑无关。如果我构建了一个可分发的版本并在任何旧的 Web 服务器上运行它，我仍然会遇到问题。我想你误解了——当你使用它的模板时，Webstorm 使用标准的项目格式。我不知道如何以这种格式包含 Vuetify。我能找到的所有操作方法都使用
module.exports，但我的布局使用export default。我标记这个 webstorm 是因为我对 webstorm 的方法感到困惑，而不是编辑器本身。我发布了代码示例 - 我希望有人能告诉我如何根据它们导入 Vuetify。 -
“当你使用它的模板时，Webstorm 使用标准的项目格式。我不知道如何以那种格式包含 Vuetify”——这根本不是真的。 Webstorm 中没有标准的项目格式。它使用 vue cli 生成 Vue 项目，生成的项目与在终端中运行
vue create时得到的项目没有区别 -
vue add不仅添加了依赖，还添加了大约十几个文件，包括导入 Vuetify 并注册它的src\plugins\vuetify.js；你的main.js应该导入这个插件，而不是直接导入 Vuetify。看我的回答
标签： vue-component webstorm vuetify.js