问题
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',
},
});
After 2.0 update main js Is there anything wrong here I saw that there was no problem when I checked the documents?
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"
]
}
回答1:
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">
来源：https://stackoverflow.com/questions/65336450/im-upgrading-the-vuetify-version-from-1-5-to-2-0-but-the-previously-installed