本文介绍了我正在将 Vuetify 版本从 1.5 升级到 2.0,但是之前安装的插件在项目中不再可见的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
旧的 vuetify 插件没有显示,但新的 vuetify 插件出现.以 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
**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,但是之前安装的插件在项目中不再可见的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!