Added Semantic ui via npm + webpack
This commit is contained in:
parent
0359eae183
commit
20ef5760d8
|
@ -24,6 +24,7 @@ module.exports = {
|
||||||
alias: {
|
alias: {
|
||||||
'vue$': 'vue/dist/vue.esm.js',
|
'vue$': 'vue/dist/vue.esm.js',
|
||||||
'@': resolve('src'),
|
'@': resolve('src'),
|
||||||
|
'semantic': path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
|
@ -74,3 +75,11 @@ module.exports = {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
new webpack.ProvidePlugin({
|
||||||
|
// jquery
|
||||||
|
$: 'jquery',
|
||||||
|
jQuery: 'jquery',
|
||||||
|
// semantic-ui
|
||||||
|
semantic: 'semantic-ui-css',
|
||||||
|
})
|
||||||
|
|
|
@ -7,8 +7,6 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||||
|
|
||||||
<title>Books</title>
|
<title>Books</title>
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="http://localhost:8082/assets/semantic-ui/semantic.min.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
|
@ -12,6 +12,8 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.17.0",
|
"axios": "^0.17.0",
|
||||||
|
"jquery": "^3.2.1",
|
||||||
|
"semantic-ui-css": "^2.2.12",
|
||||||
"vue": "^2.5.2",
|
"vue": "^2.5.2",
|
||||||
"vue-awesome": "^2.3.4",
|
"vue-awesome": "^2.3.4",
|
||||||
"vue-paginate": "^3.5.1",
|
"vue-paginate": "^3.5.1",
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="user.authenticated">
|
<div v-if="user.authenticated">
|
||||||
<h1>{{ booksTitle }}</h1>
|
<h1>{{ booksTitle }}</h1>
|
||||||
|
|
||||||
<div class="ui info message" v-if="loading">
|
<div class="ui info message" v-if="loading">
|
||||||
<icon name="refresh" spin></icon>
|
<icon name="refresh" spin></icon>
|
||||||
Loading...
|
Loading...
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ui negative message" v-if="error">
|
<div class="ui negative message" v-if="error">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
An erro occured.
|
An erro occured.
|
||||||
|
@ -14,6 +16,7 @@
|
||||||
{{ error.response.Message }}
|
{{ error.response.Message }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="!loading">
|
<div v-if="!loading">
|
||||||
<form id="search">
|
<form id="search">
|
||||||
<div class="ui icon input">
|
<div class="ui icon input">
|
||||||
|
|
|
@ -5,6 +5,9 @@ import App from './App'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import auth from './auth'
|
import auth from './auth'
|
||||||
|
|
||||||
|
// Semantic UI
|
||||||
|
import '../node_modules/semantic-ui-css/semantic.min.css'
|
||||||
|
|
||||||
// Grid import
|
// Grid import
|
||||||
import Grid from './components/Grid'
|
import Grid from './components/Grid'
|
||||||
// Font-awesome icons import
|
// Font-awesome icons import
|
||||||
|
|
Loading…
Reference in New Issue