时间戳

首页 > 解决方案 > 如何在 WebStorm 项目中包含 Vuetify

vue-component - 如何在 WebStorm 项目中包含 Vuetify

问题描述

我在如何将 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又都有，我在构建的项目中没有网络风暴。

我尝试将 Vuetify 添加为 App.vue 的脚本部分中的导入之一，并且我还尝试将 Vuetify 和 v-alert 设置为 App.vue 文件的组件部分中的组件，但都无法获得去工作。谢谢你的帮助。

标签： vue-componentwebstormvuetify.js

解决方案

我在如何将 Vuetify 包含在使用 Webstorm 创建的默认 Vue.js 项目中苦苦挣扎

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

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

我的 main.js 文件如下：

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

推荐阅读