从零开始，做一个简单的Vuetify项目，图标安装成功

安装vuefity的时候，碰到一些坑，经过一番折腾，终于成功，记录正确的姿势如下：

 创建一个vue项目：

vue init webpack-simple vular-admin

进入项目目录：

cd vular-admin

选择：webpack 安装方式

npm install
npm install vue-router
npm install vuetify
npm install css-loader
npm install material-design-icons-iconfont
npm install vuex --save
npm install stylus-loader stylus --save-dev
npm install sassnpm install sass sass-loader fibers deepmerge -d

src目录下新建文件

import 'material-design-icons-iconfont/dist/material-design-icons.css' 
import vue from 'vue'
import vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

vue.use(vuetify)

const opts = {
  icons: {
    iconfont: 'md',
  },
}

export default new vuetify(opts)

在 main.js中添加

import vuetify from './plugins/vuetify'

webpack.config.js 的rules下添加：

module.exports = {
  rules: [
    {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          // requires sass-loader@^7.0.0
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedsyntax: true // optional
          },
          // requires sass-loader@^8.0.0
          options: {
            implementation: require('sass'),
            sassoptions: {
              fiber: require('fibers'),
              indentedsyntax: true // optional
            },
          },
        },
      ],
    },
  ],
}

按照vuetify官方文档，现在就安装完成了

这时候运行：

npm run dev

会出现如下错误：

error in ./node_modules/material-design-icons-iconfont/dist/fonts/materialicons-regular.ttf

module parse failed: unexpected character ' ' (1:0)

you may need an appropriate loader to handle this file type.

(source code omitted for this binary file)

 @ ./node_modules/css-loader/dist/cjs.js!./node_modules/material-design-icons-iconfont/dist/material-design-icons.css 7:41-85

 @ ./node_modules/material-design-icons-iconfont/dist/material-design-icons.css

 @ ./src/plugins/vuetify.js

 @ ./src/main.js

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 

error in ./node_modules/material-design-icons-iconfont/dist/fonts/materialicons-regular.woff2

module parse failed: unexpected character ' ' (1:4)

you may need an appropriate loader to handle this file type.

(source code omitted for this binary file)

 @ ./node_modules/css-loader/dist/cjs.js!./node_modules/material-design-icons-iconfont/dist/material-design-icons.css 5:41-87

 @ ./node_modules/material-design-icons-iconfont/dist/material-design-icons.css

 @ ./src/plugins/vuetify.js

webpack.config.js 的rules下添加：

module.exports = {
    module: {
        rules: [
           {
               test: /\.(woff2?|eot|ttf|otf)$/,
               loader: 'file-loader',
               options: {
                   limit: 10000,
                   name: '[name].[hash:7].[ext]'
               }
            }
        ]
    }
}

到现在为止，才算真正的安装完成

修改app.vue文件：

<template>
  <div id="app">
    <v-app>
      <v-navigation-drawer
        v-model="primarydrawer.model"
        :clipped="primarydrawer.clipped"
        :floating="primarydrawer.floating"
        :mini-variant="primarydrawer.mini"
        :permanent="primarydrawer.type === 'permanent'"
        :temporary="primarydrawer.type === 'temporary'"
        app
        overflow
      >
        <v-toolbar color="primary darken-1" dark>
          <img src="images/logo.png" height="36" alt="vular amazing framework" />
          <v-toolbar-title class="ml-0 pl-3">
            <span class="hidden-sm-and-down">vue material</span>
          </v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon class="hidden-xs-only" >
            <v-icon>chevron_right</v-icon>
          </v-btn>
        </v-toolbar>
        <v-list dense>
          <v-list-item link>
            <v-list-item-action>
              <v-icon>mdi-home</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>home</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item link>
            <v-list-item-action>
              <v-icon>mdi-contact-mail</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>contact</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>

      </v-navigation-drawer>

      <v-app-bar
        :clipped-left="primarydrawer.clipped"
        color="primary"
        dark
        app
      >
        <v-app-bar-nav-icon
          v-if="primarydrawer.type !== 'permanent'"
          @click.stop="primarydrawer.model = !primarydrawer.model"
        />
        <v-toolbar-title>vuetify</v-toolbar-title>
      </v-app-bar>

      <v-content>
        <v-container fluid>
          <v-row
            align="center"
            justify="center"
          >
            <v-col cols="10">
              <v-card>
                <v-card-text>
                  <v-row>
                    <v-col
                      cols="12"
                      md="6"
                    >
                      <span>scheme</span>
                      <v-switch
                        v-model="$vuetify.theme.dark"
                        primary
                        label="dark"
                      />
                    </v-col>
                    <v-col
                      cols="12"
                      md="6"
                    >
                      <span>drawer</span>
                      <v-radio-group
                        v-model="primarydrawer.type"
                        column
                      >
                        <v-radio
                          v-for="drawer in drawers"
                          :key="drawer"
                          :label="drawer"
                          :value="drawer.tolowercase()"
                          primary
                        />
                      </v-radio-group>
                      <v-switch
                        v-model="primarydrawer.clipped"
                        label="clipped"
                        primary
                      />
                      <v-switch
                        v-model="primarydrawer.floating"
                        label="floating"
                        primary
                      />
                      <v-switch
                        v-model="primarydrawer.mini"
                        label="mini"
                        primary
                      />
                    </v-col>
                    <v-col
                      cols="12"
                      md="6"
                    >
                      <span>footer</span>
                      <v-switch
                        v-model="footer.inset"
                        label="inset"
                        primary
                      />
                    </v-col>
                  </v-row>
                </v-card-text>
                <v-card-actions>
                  <v-spacer />
                  <v-btn text>cancel</v-btn>
                  <v-btn
                    text
                    color="primary"
                  >submit</v-btn>
                </v-card-actions>
              </v-card>
            </v-col>
          </v-row>
        </v-container>
      </v-content>

      <v-footer
        :inset="footer.inset"
        app
      >
        <span class="px-4">&copy; {{ new date().getfullyear() }}</span>
      </v-footer>
    </v-app>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
      drawers: ['default (no property)', 'permanent', 'temporary'],
      primarydrawer: {
        model: null,
        type: 'default (no property)',
        clipped: false,
        floating: false,
        mini: false,
      },
      footer: {
        inset: false,
      },
    }),
  }
</script>

<style>
#app {
  font-family: 'avenir', helvetica, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

运行npm run dev, 完成：

代码地址：

这个代码以后会当作我一个框架的界面，想看空白项目，直接拉取历史版本