我正在将 Vuetify 版本从 1.5 升级到 2.0，但是之前安装的插件在项目中已经看不到了
I'm upgrading the Vuetify version from 1.5 to 2.0, but the previously installed plugin is no longer visible in the project
旧的 vuetify 插件未显示，但新的 vuetify 插件 appear.v-checkbox 作为示例。
你能帮帮我吗
v-checkbox is not visible
**Vuetify JS
2.0 更新后**
// 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**
我更新了所有版本，但没有解决方案。 Node删除模块，进入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"
]
}
如 installation docs 中所示，Vuetify 设置必须导入样式（您的设置中缺少）：
// src/plugins/vuetify.js
import 'vuetify/dist/vuetify.min.css'
同时确保更新您的 index.html 以安装所需的 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 插件未显示，但新的 vuetify 插件 appear.v-checkbox 作为示例。 你能帮帮我吗
v-checkbox is not visible
**Vuetify JS
2.0 更新后**
// 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**
我更新了所有版本，但没有解决方案。 Node删除模块，进入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"
]
}
如 installation docs 中所示，Vuetify 设置必须导入样式（您的设置中缺少）：
// src/plugins/vuetify.js
import 'vuetify/dist/vuetify.min.css'
同时确保更新您的 index.html 以安装所需的 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">