安装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">© {{ 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, 完成：
代码地址：
这个代码以后会当作我一个框架的界面，想看空白项目，直接拉取历史版本
如对本文有疑问， 点击进行留言回复！！
javascript从入门到跑路-----小文的js学习笔记（19）------- js的垃圾回收机制
Agora 开源 | 一个 Demo，帮你快速实现社交直播四大场景
网友评论