vue中引入vuetify
官方入门教程:https://vuetifyjs.com/zh-Hans/getting-started/quick-start引入一个ui库的思路:先下载对应的ui库,其次再引入到自己的项目中这里用的是npm下载对应的ui库,在项目的根目录下npm install vuetify --save2.以上步骤是安装完Vuetify,安装完成后,在src目录中创建一个名为的文...
·
官方入门教程:https://vuetifyjs.com/zh-Hans/getting-started/quick-start
引入一个ui库的思路:先下载对应的ui库,其次再引入到自己的项目中
- 这里用的是npm下载对应的ui库,在项目的根目录下
npm install vuetify --save
2.以上步骤是安装完Vuetify,安装完成后,在src
目录中创建一个名为的文件夹plugins
在里面,添加一个vuetify.js文件。代码如下
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
export default new Vuetify()
3.在项目的根目录中的main.js中添加如下代码,如果已经有了new Vue,那么直接将vuetify加上即可
import Vuetify from 'vuetify'
import vuetify from '@/plugins/vuetify'
Vue.use(Vuetify)
new Vue({
vuetify,
el: '#app',
router,
components: { App },
template: '<App/>'
})
此时已经全部引入了vuetify
4.页面中可以用了直接引入vuetify的代码即可
--------------------------------华丽的分割线-------------哈哈哈哈哈----------------------------------------------------------------
如果想按需引入
即在vuetify.js中按需引入,更改vuetify.js,如下
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify, {
VCard,
VRating,
VToolbar,
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'
Vue.use(Vuetify, {
components: {
VCard,
VRating,
VToolbar,
},
directives: {
Ripple,
},
})
export default new Vuetify()
更多推荐
已为社区贡献2条内容
所有评论(0)