Skip to content

Commit 80e6cf2

Browse files
antoniandreantoniandre
committed
Replace Vue CLI with Vite. :bolt:🎉
1 parent 7f409d0 commit 80e6cf2

File tree

11 files changed

+102
-87
lines changed

11 files changed

+102
-87
lines changed

Diff for: ‎public/index.html renamed to ‎index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,22 @@
1515
<meta property="article:author" content="Antoni André">
1616
<meta property="og:title" content="Vueper Slides - Documentation">
1717
<meta property="og:description" content="Vueper Slides is a Vue JS Slideshow / Carousel">
18-
<meta property="og:image" content="<%= BASE_URL %>images/vueperslides.jpg">
18+
<meta property="og:image" content="/images/vueperslides.jpg">
1919
<meta property="og:image:type" content="image/jpeg" />
2020
<meta property="og:image:width" content="958 " />
2121
<meta property="og:image:height" content="589" />
2222
<meta itemprop="name" content="Vueper Slides - Documentation">
2323
<meta itemprop="description" content="Vueper Slides is a Vue JS Slideshow / Carousel">
24-
<link rel="icon" href="<%= BASE_URL %>favicon.png">
24+
<link rel="icon" href="/favicon.png">
2525
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700|Material+Icons' rel="stylesheet">
2626
<title>Vueper Slides</title>
2727
</head>
2828
<body>
2929
<noscript>
3030
<strong>We're sorry but Vueper Slides documentation doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
3131
</noscript>
32-
<a id="top" name="top"></a>
32+
<a name="top"></a>
3333
<div id="app"></div>
34-
<!-- built files will be auto injected -->
34+
<script type="module" src="/src/main.js"></script>
3535
</body>
3636
</html>

Diff for: ‎package.json

+19-21
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,38 @@
44
"description": "A touch ready and responsive slideshow for Vue 3 and 2.",
55
"author": "Antoni Andre <[email protected]>",
66
"scripts": {
7-
"serve": "vue-cli-service serve",
8-
"build": "vue-cli-service build",
9-
"lint": "vue-cli-service lint",
10-
"build-bundle": "vue-cli-service build --target lib --name vueperslides ./src/components/vueperslides/index.js --dest ./dist && rm ./dist/demo.html"
7+
"dev": "vite",
8+
"build": "vite build --base /vueperslides/",
9+
"build-bundle": "BUNDLE=true vite build",
10+
"serve": "vite preview --root docs --base /vueperslides/",
11+
"lint": "vite lint"
1112
},
1213
"main": "dist/vueperslides.common.js",
1314
"unpkg": "dist/vueperslides.umd.min.js",
1415
"jsdelivr": "dist/vueperslides.umd.min.js",
1516
"files": [
1617
"dist/"
1718
],
18-
"dependencies": {},
1919
"devDependencies": {
20+
"@babel/core": "^7.18.2",
21+
"@babel/eslint-parser": "^7.18.2",
2022
"@fortawesome/fontawesome-free": "^5.15.4",
21-
"@vue/cli-plugin-babel": "^4.5.17",
22-
"@vue/cli-plugin-eslint": "^4.5.17",
23-
"@vue/cli-service": "^4.5.17",
23+
"@vitejs/plugin-vue": "^2.3.3",
2424
"@vue/compiler-sfc": "^3.2.36",
25-
"@vue/eslint-config-standard": "^6.1.0",
26-
"babel-eslint": "^10.1.0",
27-
"core-js": "^3.22.7",
28-
"eslint": "^7.32.0",
29-
"eslint-config-standard": "^16.0.3",
25+
"autoprefixer": "^10.4.7",
26+
"eslint": "^8.16.0",
3027
"eslint-plugin-import": "^2.26.0",
31-
"eslint-plugin-node": "^11.1.0",
32-
"eslint-plugin-promise": "^5.2.0",
33-
"eslint-plugin-standard": "^5.0.0",
34-
"eslint-plugin-vue": "^7.20.0",
28+
"eslint-plugin-n": "^15.2.0",
29+
"eslint-plugin-promise": "^6.0.0",
30+
"eslint-plugin-vue": "^9.0.1",
31+
"picocolors": "^1.0.0",
32+
"postcss": "^8.4.14",
3533
"pug": "^3.0.2",
36-
"pug-plain-loader": "^1.1.0",
37-
"regenerator-runtime": "^0.13.9",
38-
"sass": "^1.52.1",
39-
"sass-loader": "^10.2.1",
34+
"rollup": "^2.74.1",
35+
"sass": "1.49.8",
4036
"simple-syntax-highlighter": "^2.2.0",
37+
"vite": "^2.9.9",
38+
"vite-plugin-pug": "^0.3.1",
4139
"vue": "^3.2.36",
4240
"vue-router": "^4.0.15",
4341
"wave-ui": "^2.39.1"

Diff for: ‎src/app.vue

+2-3
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,12 @@ w-app(:class="{ ready }" v-scroll="onScroll")
2323
</template>
2424

2525
<script>
26-
import Documentation from '@/documentation'
27-
import TopBar from '@/documentation/top-bar'
26+
import TopBar from '@/documentation/top-bar.vue'
2827
import '@/scss/index.scss'
2928
3029
export default {
3130
name: 'app',
32-
components: { Documentation, TopBar },
31+
components: { TopBar },
3332
data: () => ({
3433
ready: false,
3534
offsetTop: 0,

Diff for: ‎src/components/vueperslides/vueperslides.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@
146146
</template>
147147

148148
<script>
149-
import VueperSlide from './vueperslide'
149+
import VueperSlide from './vueperslide.vue'
150150
import './styles.scss'
151151
152152
export default {

Diff for: ‎src/documentation/index.vue

+12-12
Original file line numberDiff line numberDiff line change
@@ -2310,9 +2310,9 @@
23102310
</template>
23112311

23122312
<script>
2313-
import { VueperSlides, VueperSlide } from '@/components/vueperslides/'
23142313
import SshPre from 'simple-syntax-highlighter'
2315-
import Highlight from '@/components/highlight-message/index'
2314+
import { VueperSlides, VueperSlide } from '@/components/vueperslides/index'
2315+
import Highlight from '@/components/highlight-message/index.vue'
23162316
23172317
import '@/components/vueperslides/styles.scss'
23182318
import 'simple-syntax-highlighter/dist/sshpre.css'
@@ -2391,19 +2391,19 @@ export default {
23912391
{
23922392
title: 'El Teide Volcano, Spain',
23932393
content: 'Photo by Max Rive',
2394-
image: `${process.env.BASE_URL}images/el-teide-volcano-spain.jpg`,
2394+
image: `${import.meta.env.BASE_URL}images/el-teide-volcano-spain.jpg`,
23952395
link: 'https://www.maxrivephotography.com/index/C0000rU1RKCHdqwI/G0000X57AtIzuRX0/I0000Gvr9HqdtyXk'
23962396
},
23972397
{
23982398
title: 'Chernobyl, Ukraine',
23992399
content: 'Photo by Jesse Moran',
2400-
image: `${process.env.BASE_URL}images/chernobyl-ukraine.jpg`,
2400+
image: `${import.meta.env.BASE_URL}images/chernobyl-ukraine.jpg`,
24012401
link: 'https://www.flickr.com/photos/jessemoran'
24022402
},
24032403
{
24042404
title: 'Crater Lake, Oregon, USA',
24052405
content: 'Photo by Jesse Moran',
2406-
image: `${process.env.BASE_URL}images/crater-lake-oregon-usa.jpg`,
2406+
image: `${import.meta.env.BASE_URL}images/crater-lake-oregon-usa.jpg`,
24072407
link: 'https://flic.kr/p/2cxrCmp'
24082408
}
24092409
],
@@ -2421,26 +2421,26 @@ export default {
24212421
{ image: 'https://combo.staticflickr.com/ap/build/images/sohp/2019-top-25/Alex_Noriega_Pure_Magic.jpg' },
24222422
{ image: 'https://combo.staticflickr.com/ap/build/images/sohp/2019-top-25/Jesse_Moran_Resurrect.jpg' },
24232423
{ image: 'https://combo.staticflickr.com/ap/build/images/sohp/2019-top-25/Perez_Alonso%20Photography_Chocolate_Mountains.jpg' },
2424-
{ image: `${process.env.BASE_URL}images/easton-wa-usa.jpg` }
2424+
{ image: `${import.meta.env.BASE_URL}images/easton-wa-usa.jpg` }
24252425
],
24262426
videoSlides1: [
24272427
{
24282428
title: 'Blossoming flower',
24292429
content: 'This video is autoplayed, played in loop, has no controls and is not reacting to user interactions.',
2430-
image: `${process.env.BASE_URL}images/flower.jpg`,
2430+
image: `${import.meta.env.BASE_URL}images/flower.jpg`,
24312431
video: {
2432-
webm: `${process.env.BASE_URL}images/flower.webm`,
2433-
mp4: `${process.env.BASE_URL}images/flower.mp4`,
2432+
webm: `${import.meta.env.BASE_URL}images/flower.webm`,
2433+
mp4: `${import.meta.env.BASE_URL}images/flower.mp4`,
24342434
props: { autoplay: true, loop: true, controls: false, muted: true }
24352435
}
24362436
},
24372437
{
24382438
title: 'Blossoming flower',
24392439
content: 'This video is played once, has controls and is reacting to user interactions.',
2440-
image: `${process.env.BASE_URL}images/flower.jpg`,
2440+
image: `${import.meta.env.BASE_URL}images/flower.jpg`,
24412441
video: {
2442-
webm: `${process.env.BASE_URL}images/flower.webm`,
2443-
mp4: `${process.env.BASE_URL}images/flower.mp4`
2442+
webm: `${import.meta.env.BASE_URL}images/flower.webm`,
2443+
mp4: `${import.meta.env.BASE_URL}images/flower.mp4`
24442444
}
24452445
}
24462446
],

Diff for: ‎src/documentation/isolated-test-view.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ div
1515
</template>
1616

1717
<script>
18-
import { VueperSlides, VueperSlide } from '@/components/vueperslides/'
18+
import { VueperSlides, VueperSlide } from '@/components/vueperslides/index'
1919
import '@/components/vueperslides/styles.scss'
2020
2121
export default {
@@ -26,19 +26,19 @@ export default {
2626
{
2727
title: 'El Teide Volcano, Spain',
2828
content: 'Photo by Max Rive',
29-
image: `${process.env.BASE_URL}images/el-teide-volcano-spain.jpg`,
29+
image: `${import.meta.env.BASE_URL}images/el-teide-volcano-spain.jpg`,
3030
link: 'https://www.maxrivephotography.com/index/C0000rU1RKCHdqwI/G0000X57AtIzuRX0/I0000Gvr9HqdtyXk'
3131
},
3232
{
3333
title: 'Chernobyl, Ukraine',
3434
content: 'Photo by Jesse Moran',
35-
image: `${process.env.BASE_URL}images/chernobyl-ukraine.jpg`,
35+
image: `${import.meta.env.BASE_URL}images/chernobyl-ukraine.jpg`,
3636
link: 'https://www.flickr.com/photos/jessemoran'
3737
},
3838
{
3939
title: 'Crater Lake, Oregon, USA',
4040
content: 'Photo by Jesse Moran',
41-
image: `${process.env.BASE_URL}images/crater-lake-oregon-usa.jpg`,
41+
image: `${import.meta.env.BASE_URL}images/crater-lake-oregon-usa.jpg`,
4242
link: 'https://flic.kr/p/2cxrCmp'
4343
}
4444
],
@@ -68,7 +68,7 @@ export default {
6868
log (...param) {
6969
console.log(...param)
7070
},
71-
getImage: image => `${process.env.BASE_URL}/images/${image}`
71+
getImage: image => `${import.meta.env.BASE_URL}/images/${image}`
7272
}
7373
}
7474
</script>

Diff for: ‎src/documentation/top-bar.vue

-4
Original file line numberDiff line numberDiff line change
@@ -83,10 +83,6 @@ w-toolbar.top-bar.pa0(:class="{ scrolled: offsetTop > 104 }")
8383
</template>
8484

8585
<script>
86-
// import Vue from 'vue'
87-
// import VueScrollTo from 'vue-scrollto'
88-
// Vue.use(VueScrollTo)
89-
9086
export default {
9187
props: {
9288
offsetTop: { type: Number, default: 0 }

Diff for: ‎src/main.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
// Polyfill.
2-
import 'core-js/stable'
3-
import 'regenerator-runtime/runtime'
4-
51
import { createApp } from 'vue'
62
import WaveUI from 'wave-ui'
73
import 'wave-ui/dist/wave-ui.css'
84

9-
import App from './app'
10-
import router from './router/'
5+
import App from '@/app.vue'
6+
import router from '@/router/index'
117

128
import '@fortawesome/fontawesome-free/css/fontawesome.css'
139
import '@fortawesome/fontawesome-free/css/brands.css'

Diff for: ‎src/router/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { createRouter, createWebHistory } from 'vue-router'
2-
import Documentation from '@/documentation/'
2+
import Documentation from '@/documentation/index.vue'
33

44
export default createRouter({
5-
history: createWebHistory(process.env.BASE_URL),
5+
history: createWebHistory(import.meta.env.BASE_URL),
66
routes: [
77
{
88
path: '/',

Diff for: ‎vite.config.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { defineConfig } from 'vite'
2+
import Vue from '@vitejs/plugin-vue'
3+
import { resolve } from 'path'
4+
// import Delete from 'rollup-plugin-delete'
5+
6+
const build = process.env.BUNDLE ? {
7+
lib: {
8+
entry: resolve(__dirname, '/src/components/vueperslides/index.js'),
9+
name: 'vueperslides',
10+
fileName: 'vueperslides',
11+
formats: ['es', 'umd', 'cjs']
12+
},
13+
rollupOptions: {
14+
plugins: [
15+
// Rollup also copies the files in the public folder.
16+
// @todo: find a way to prevent adding them at all.
17+
// Delete({ targets: ['dist/*.{ico,png,html}'], hook: 'generateBundle' })
18+
],
19+
// Make sure to externalize deps that shouldn't be bundled into library.
20+
external: ['vue'],
21+
output: {
22+
// Provide global variables to use in the UMD build for externalized deps.
23+
globals: {
24+
vue: 'Vue'
25+
}
26+
}
27+
}
28+
} : {
29+
outDir: 'docs'
30+
}
31+
32+
export default defineConfig({
33+
plugins: [
34+
Vue({
35+
template: {
36+
compilerOptions: {
37+
whitespace: 'preserve'
38+
}
39+
}
40+
})
41+
], // https://vitejs.dev/config/
42+
resolve: {
43+
alias: {
44+
'@': resolve(__dirname, '/src')
45+
}
46+
},
47+
css: {
48+
preprocessorOptions: {
49+
scss: {
50+
additionalData: '@import "@/scss/_variables.scss";'
51+
}
52+
}
53+
},
54+
build
55+
})

Diff for: ‎vue.config.js

-29
This file was deleted.

0 commit comments

Comments
 (0)