本文介绍了我正在将 Vuetify 版本从 1.5 升级到 2.0,但是之前安装的插件在项目中不再可见的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

旧的 vuetify 插件没有显示,但新的 vuetify 插件出现.以 v-checkbox 为例.你能帮我吗

v-checkbox 不可见

 **Vuetify JS

2.0 更新后**

//v2.0//src/plugins/vuetify.js//按照官方文档从'vue'导入Vue;从 'vuetify/lib' 导入 Vuetify;Vue.use(Vuetify);导出默认的新 Vuetify({dark: true,//决定你的项目主题:{光: {素数:'#df8421'},黑暗的: {素数:'#333'}},图标:{iconfont: 'mdi',},});

2.0更新后主js这里有什么问题吗看文档没问题?

 从 'vue' 导入 Vue导入'./plugins/vuetify'从./store/store"导入商店从'./router'导入路由器从 'axios' 导入 Axios从bootstrap-vue"导入 BootstrapVue从'./App'导入应用程序从'./components/Wrappers/baseLayout.vue'导入默认值;从vue-fuse"导入 VueFuse导入 'vue-search-select/dist/VueSearchSelect.css'从 'ant-design-vue' 导入 Antd;导入 'ant-design-vue/dist/antd.css';从 './plugins/vuetify' 导入 vuetify;Vue.use(Antd);Vue.prototype.$http = Axios;导出 const actionArea = new Vue()导出 const noteArea = new Vue()导出 const noteRedboxList = new Vue()导出 const statusArea = new Vue()导出 const TicketTransferDialog = new Vue()导出 const TicketStatusArea = new Vue()导出 const cancelReason = new Vue()导出 const docDetail = new Vue()const token = localStorage.getItem('token')如果(令牌){Vue.prototype.$http.defaults.headers.common['Authorization'] = 令牌}Vue.config.productionTip = false;Vue.use(BootstrapVue);Vue.use(VueFuse);Vue.component('default-layout', Default);//Vue.component('userpages-layout', Pages);//Vue.component('apps-layout', Apps);//Vue.component('empty-layout', Empty);新的 Vue({验证,el: '#app',路由器,店铺,模板:'<App/>',组件:{应用},安装(){//console.log('token',localStorage.getItem('token'));if (localStorage.getItem('token')) {//store.dispatch('getSystemTexts',(e)=>{})}}});**我的包裹Json**

我更新了所有版本,但没有解决方案.node删除modules,去vuetify

{名称":architectui-vue-pro",版本":0.1.0",私人":真的,脚本":{服务":vue-cli-service 服务",构建":vue-cli-service 构建",lint":vue-cli-service lint"},依赖关系":{@ckeditor/ckeditor5-build-classic":^11.2.0",@ckeditor/ckeditor5-vue":^1.0.0-beta.1",@fortawesome/fontawesome-svg-core":^1.2.17",@fortawesome/free-solid-svg-icons":^5.8.1",@fortawesome/vue-fontawesome":^0.1.6",@fullcalendar/core":^5.3.1",@fullcalendar/daygrid":^5.3.2",@fullcalendar/interaction":^5.3.1",@fullcalendar/list":^5.3.1",@fullcalendar/timegrid":^5.3.1",@fullcalendar/vue":^5.3.1",@smartweb/vue-flash-message":^0.6.4",animate-sass":^0.8.2",ant-design-vue":^1.6.5",antd":^4.7.0",apexcharts":^3.6.7",axios":^0.19.0",引导程序":^4.3.1",bootstrap-vue":^2.0.0-rc.18",chart.js":^2.9.3",core-js":^2.6.11",countup.js":^1.9.3",天跨度":^1.1.0",dayspan-vuetify":^0.4.0",es6-promise":^4.2.6",甘特计划时间线日历":^ 2.6.8",增加内存限制":^ 1.0.6",kalendar-vue":^2.1.1",传单":^1.4.0",线性图标":^1.0.1",material-design-icons-iconfont":^4.0.5",mockjs":^1.0.1-beta3",时刻":^2.29.1",pe7-icon":^1.0.4",完美滚动条":^1.4.0",popper.js":^1.15.0",portal-vue":^2.1.7",qs":^6.8.0",羽毛笔":^1.3.7",sweetalert":^2.1.2",sweetalert2":^8.19.0",toastr":^2.1.4",v-mask":^1.3.4",v-select2-component":^0.4.3",vee-validate":^2.2.3",vue":^2.6.10",vue-apexcharts":^1.5.3",vue-cal":^3.6.4",vue-chartjs":^3.5.0",vue-剪贴板":^1.2.4",vue-color":^2.7.0",vue-country-flag":^1.1.0",vue-countup-v2":^2.0.0",vue-cropperjs":^3.0.0",vue-element-loading":^1.1.1",vue-form-wizard":^0.8.4",vue-full-calendar":^2.8.0",vue-fuse":^2.1.0",vue-good-wizard":^1.4.1",vue-js-toggle-button":^1.3.3",vue-json-excel":^0.2.98",vue-ladda":0.0.15",vue-mask-directive":^1.0.4",vue-moment":^4.1.0",vue-multiselect":^2.1.6",vue-notifications":^0.9.0",vue-perfect-scrollbar":^0.1.0",vue-quill-editor":^3.0.6",vue-rate":^2.2.0",vue-router":^3.0.5",vue-search-select":^2.9.3",vue-select":^2.6.4",vue-sidebar-menu":^3.7.0",vue-simple-alert":^1.1.1",vue-simple-file-upload":^1.2.5",vue-slick":^1.1.15",vue-slider-component":^2.8.16",vue-sparklines":^0.1.9",vue-spinkit":^1.4.1",vue-sticky-directive":0.0.8",vue-sweetalert2":^3.0.5",vue-tabs-with-active-line":^1.1.4",vue-textarea-autosize":^1.0.4",vue-timeselector":^1.0.0",vue-toastr":^2.0.16",vue2-animate":^2.1.0",vue2-circle-progress":^1.2.3",vue2-datepicker":^2.11.0",vue2-dropzone":^3.5.8",vue2-google-maps":^0.10.6",vue2-leaflet":^1.2.3",vuejs-datepicker":^1.6.2",vuelidate":^0.7.5",vuetable-2":^2.0.0-beta.4",vuetify":^2.3.21",vuetrend":^0.3.2",vuex":^3.1.0",vuex-persistedstate":^2.5.4";},开发依赖":{@mdi/font":^5.6.55",@vue/cli-plugin-babel":^3.6.0",@vue/cli-plugin-eslint":^3.6.0",@vue/cli-service":^3.6.0",babel-eslint":^10.0.1",eslint":^5.16.0",eslint-plugin-vue":^5.2.2",节点-sass":^4.14.1",sass":^1.30.0",sass-loader":^7.3.1",手写笔":^0.54.5",stylus-loader":^3.0.1",vue-cli-plugin-vuetify":^0.5.0",vue-friendly-iframe":^0.18.0",vue-template-compiler":^2.6.10",vuetify-loader":^1.0.5";},eslintConfig":{根":真,环境":{节点":真},扩展":[插件:vue/essential",eslint:推荐"],规则":{},解析器选项":{解析器":babel-eslint"}},postcss":{插件":{自动前缀":{}}},浏览器列表":[>1%",最后两个版本",不是即 
解决方案

安装文档,Vuetify 设置必须导入样式(您的设置中缺少该样式):

//src/plugins/vuetify.js导入'vuetify/dist/vuetify.min.css'

还要确保更新您的 index.html 以安装所需的 字体和图标:

<!-- public/index.html --><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900";rel=样式表"><link href=https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"rel=样式表">

old vuetify plugins not showing, but new vuetify plugins appear.v-checkbox as an example.can you help me

v-checkbox is not visible

   **Vuetify JS

After 2.0 update**

       // v2.0
// src/plugins/vuetify.js
// follow official document
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({
    dark: true, // it's decide your project
    themes: {
        light: {
            prime: '#df8421'
        },
        dark: {
            prime: '#333'
        }
    },
    icons: {
        iconfont: 'mdi',
    },
});



 import Vue from 'vue'
    import './plugins/vuetify'
    import store from './store/store'
    import router from './router'
    import Axios from 'axios'
    import BootstrapVue from "bootstrap-vue"
    import App from './App'
    import Default from './components/Wrappers/baseLayout.vue';
    import VueFuse from 'vue-fuse'
    import 'vue-search-select/dist/VueSearchSelect.css'
    import Antd from 'ant-design-vue';
    import 'ant-design-vue/dist/antd.css';
    import vuetify from './plugins/vuetify';
    Vue.use(Antd);

    Vue.prototype.$http = Axios;
    export const actionArea = new Vue()
    export const noteArea = new Vue()
    export const noteRedboxList = new Vue()
    export const statusArea = new Vue()
    export const TicketTransferDialog = new Vue()
    export const TicketStatusArea = new Vue()
    export const cancelReason = new Vue()
    export const docDetail = new Vue()



    const token = localStorage.getItem('token')
    if (token) {
        Vue.prototype.$http.defaults.headers.common['Authorization'] = token
    }



    Vue.config.productionTip = false;

    Vue.use(BootstrapVue);
    Vue.use(VueFuse);

    Vue.component('default-layout', Default);
    //Vue.component('userpages-layout', Pages);
    //Vue.component('apps-layout', Apps);
    //Vue.component('empty-layout', Empty);


    new Vue({
        vuetify,
        el: '#app',
        router,
        store,
        template: '<App/>',
        components: { App },
        mounted() {
            //console.log('token',localStorage.getItem('token'));
            if (localStorage.getItem('token')) {
                // store.dispatch('getSystemTexts',(e)=>{})
            }
        }
    });

**My package Json**

I updated all versions, but there was no solution. Node deletes modules and goes to vuetify

{
  "name": "architectui-vue-pro",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^11.2.0",
    "@ckeditor/ckeditor5-vue": "^1.0.0-beta.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.17",
    "@fortawesome/free-solid-svg-icons": "^5.8.1",
    "@fortawesome/vue-fontawesome": "^0.1.6",
    "@fullcalendar/core": "^5.3.1",
    "@fullcalendar/daygrid": "^5.3.2",
    "@fullcalendar/interaction": "^5.3.1",
    "@fullcalendar/list": "^5.3.1",
    "@fullcalendar/timegrid": "^5.3.1",
    "@fullcalendar/vue": "^5.3.1",
    "@smartweb/vue-flash-message": "^0.6.4",
    "animate-sass": "^0.8.2",
    "ant-design-vue": "^1.6.5",
    "antd": "^4.7.0",
    "apexcharts": "^3.6.7",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.0-rc.18",
    "chart.js": "^2.9.3",
    "core-js": "^2.6.11",
    "countup.js": "^1.9.3",
    "dayspan": "^1.1.0",
    "dayspan-vuetify": "^0.4.0",
    "es6-promise": "^4.2.6",
    "gantt-schedule-timeline-calendar": "^2.6.8",
    "increase-memory-limit": "^1.0.6",
    "kalendar-vue": "^2.1.1",
    "leaflet": "^1.4.0",
    "linearicons": "^1.0.1",
    "material-design-icons-iconfont": "^4.0.5",
    "mockjs": "^1.0.1-beta3",
    "moment": "^2.29.1",
    "pe7-icon": "^1.0.4",
    "perfect-scrollbar": "^1.4.0",
    "popper.js": "^1.15.0",
    "portal-vue": "^2.1.7",
    "qs": "^6.8.0",
    "quill": "^1.3.7",
    "sweetalert": "^2.1.2",
    "sweetalert2": "^8.19.0",
    "toastr": "^2.1.4",
    "v-mask": "^1.3.4",
    "v-select2-component": "^0.4.3",
    "vee-validate": "^2.2.3",
    "vue": "^2.6.10",
    "vue-apexcharts": "^1.5.3",
    "vue-cal": "^3.6.4",
    "vue-chartjs": "^3.5.0",
    "vue-clipboards": "^1.2.4",
    "vue-color": "^2.7.0",
    "vue-country-flag": "^1.1.0",
    "vue-countup-v2": "^2.0.0",
    "vue-cropperjs": "^3.0.0",
    "vue-element-loading": "^1.1.1",
    "vue-form-wizard": "^0.8.4",
    "vue-full-calendar": "^2.8.0",
    "vue-fuse": "^2.1.0",
    "vue-good-wizard": "^1.4.1",
    "vue-js-toggle-button": "^1.3.3",
    "vue-json-excel": "^0.2.98",
    "vue-ladda": "0.0.15",
    "vue-mask-directive": "^1.0.4",
    "vue-moment": "^4.1.0",
    "vue-multiselect": "^2.1.6",
    "vue-notifications": "^0.9.0",
    "vue-perfect-scrollbar": "^0.1.0",
    "vue-quill-editor": "^3.0.6",
    "vue-rate": "^2.2.0",
    "vue-router": "^3.0.5",
    "vue-search-select": "^2.9.3",
    "vue-select": "^2.6.4",
    "vue-sidebar-menu": "^3.7.0",
    "vue-simple-alert": "^1.1.1",
    "vue-simple-file-upload": "^1.2.5",
    "vue-slick": "^1.1.15",
    "vue-slider-component": "^2.8.16",
    "vue-sparklines": "^0.1.9",
    "vue-spinkit": "^1.4.1",
    "vue-sticky-directive": "0.0.8",
    "vue-sweetalert2": "^3.0.5",
    "vue-tabs-with-active-line": "^1.1.4",
    "vue-textarea-autosize": "^1.0.4",
    "vue-timeselector": "^1.0.0",
    "vue-toastr": "^2.0.16",
    "vue2-animate": "^2.1.0",
    "vue2-circle-progress": "^1.2.3",
    "vue2-datepicker": "^2.11.0",
    "vue2-dropzone": "^3.5.8",
    "vue2-google-maps": "^0.10.6",
    "vue2-leaflet": "^1.2.3",
    "vuejs-datepicker": "^1.6.2",
    "vuelidate": "^0.7.5",
    "vuetable-2": "^2.0.0-beta.4",
    "vuetify": "^2.3.21",
    "vuetrend": "^0.3.2",
    "vuex": "^3.1.0",
    "vuex-persistedstate": "^2.5.4"
  },
  "devDependencies": {
    "@mdi/font": "^5.6.55",
    "@vue/cli-plugin-babel": "^3.6.0",
    "@vue/cli-plugin-eslint": "^3.6.0",
    "@vue/cli-service": "^3.6.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.2.2",
    "node-sass": "^4.14.1",
    "sass": "^1.30.0",
    "sass-loader": "^7.3.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-friendly-iframe": "^0.18.0",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.0.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}
解决方案

As seen in the installation docs, the Vuetify setup must import the styles (which is missing from your setup):

// src/plugins/vuetify.js
import 'vuetify/dist/vuetify.min.css'

Also make sure to update your index.html to install the required fonts and icons:

<!-- public/index.html -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

这篇关于我正在将 Vuetify 版本从 1.5 升级到 2.0,但是之前安装的插件在项目中不再可见的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-27 21:44
查看更多