Я много борюсь с тем, как включить Vuetify по умолчанию Vue. js проект, созданный с использованием WebStorm. Это действительно связано с тем, как проекты по умолчанию Vue. js настраиваются в WebStorm, а не в самом редакторе, поскольку он, похоже, использует подход, отличный от других, которые я могу найти. Я получаю ошибки "Unknown custom element <v-alert>" (например). Я не могу найти ответы о том, как это сделать, поскольку настройки WebStorm по умолчанию отличаются от all инструкций, которые я могу найти.
Мое приложение. 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>
Мой основной. 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')
Мой пакет. 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 в качестве одного из импорт в разделе сценариев приложения. vue, и я также попытался установить Vuetify и v-alert в качестве компонентов в разделе компонентов файла приложения. vue, но не смог заставить их работать. Спасибо за любую помощь.