Lendy Journalized

参考：
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()