参考:
vuetify安装: https://www.jianshu.com/p/2938539a4623
Vuetify 使用步骤: https://blog.csdn.net/Bule_daze/article/details/101419841
vue安装及配置
安装 node.js yum install modejs 查看版本 node -v 使用淘宝NPM镜像源下载比较快 命令: npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cli(全局安装vue-cli) 命令: cnpm install vue-cli -g 检查环境是否安装上: vue -V 创建vue项目: 在命令行里输入命令:(创建名字为‘vue_demo’的文件夹) vue init webpack vue_demo 然后进入此文件夹: cd vue_demo 然后手动下载: cnpm install 修改localhost,允许远程访问 改config/index.js host: ‘0.0.0.0’ 最后运行程序: npm run dev 运行之后会导出网址:http://localhost:8080
vue中引入vuetify
官方入门教程:https://vuetifyjs.com/zh-Hans/getting-started/quick-start 引入一个ui库的思路:先下载对应的ui库,其次再引入到自己的项目中 1.这里用的是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: '' })此时已经全部引入了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()