anatolykopyl/vue-three-d-mockup
1
0
Fork 0
mirror of https://github.com/anatolykopyl/vue-three-d-mockup.git synced 2026-03-26 04:45:09 +00:00
Code Issues Projects Releases Wiki Activity

Migrate to vite

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-07-24 11:58:10 +03:00
parent 9bc1f73e26
commit 91f80c342f
16 changed files with 21842 additions and 29026 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc.js
View File

@@ -1,18 +1,12 @@
module.exports = { module.exports = {
root: true, root: true,
env: { env: {
node: true, es2021: true,
}, },
extends: [ extends: [
'plugin:vue/vue3-essential', 'plugin:vue/vue3-essential',
'@vue/airbnb', '@vue/airbnb',
], ],
parserOptions: {
parser: 'babel-eslint',
},
ignorePatterns: [
'bundle/*'
],
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

2
.gitignore vendored
View File

@@ -1,7 +1,5 @@
.DS_Store .DS_Store
node_modules node_modules
/dist
# local env files # local env files
.env.local .env.local

375
bundle/vue-three-d-mockup.esm.js
View File

File diff suppressed because one or more lines are too long

16799
dist/vue-three-d-mockup.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3018
dist/vue-three-d-mockup.umd.cjs vendored Normal file
View File

File diff suppressed because one or more lines are too long

16
index.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-three-d-mockup</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-three-d-mockup doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

28572
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

44
package.json
View File

@@ -1,46 +1,52 @@
{ {
"name": "vue-three-d-mockup", "name": "vue-three-d-mockup",
"version": "0.2.2", "version": "1.0.0",
"description": "📱 A 3D phone mockup component to showcase your apps", "description": "📱 A 3D phone mockup component to showcase your apps",
"author": "Anatoly Kopyl <akopyl@radner.ru>", "author": "Anatoly Kopyl <akopyl@radner.ru>",
"keywords": ["vue", "mockup-generator", "threejs", "design", "mockup"], "keywords": [
"vue",
"mockup-generator",
"threejs",
"design",
"mockup"
],
"license": "GPL-3.0", "license": "GPL-3.0",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/anatolykopyl/vue-three-d-mockup.git" "url": "https://github.com/anatolykopyl/vue-three-d-mockup.git"
}, },
"main": "bundle/vue-three-d-mockup.esm.js", "type": "module",
"browser": { "browser": {
"./sfc": "src/Mockup.vue" "./sfc": "src/Mockup.vue"
}, },
"files": ["dist"],
"main": "./dist/my-lib.umd.cjs",
"module": "./dist/my-lib.js",
"exports": {
".": {
"import": "./dist/my-lib.js",
"require": "./dist/my-lib.umd.cjs"
}
},
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "dev": "vite",
"build": "vue-cli-service build", "build": "vite build",
"build-bundle": "rollup -c", "serve": "vite preview"
"lint": "vue-cli-service lint"
}, },
"pre-commit": [ "pre-commit": [
"build-bundle" "build"
], ],
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "@vitejs/plugin-vue": "^3.0.1",
"three": "^0.137.5", "three": "^0.137.5",
"vite": "^3.0.2",
"vue": "^3.0.0" "vue": "^3.0.0"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-url": "^6.1.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-airbnb": "^5.0.2", "@vue/eslint-config-airbnb": "^5.0.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2", "eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^7.0.0", "eslint-plugin-vue": "^7.0.0",
"file-loader": "^6.2.0", "pre-commit": "^1.2.2"
"pre-commit": "^1.2.2",
"rollup-plugin-vue": "^6.0.0"
} }
} }

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

17
public/index.html
View File

@@ -1,17 +0,0 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

20
rollup.config.js
View File

@@ -1,20 +0,0 @@
import vue from 'rollup-plugin-vue';
import url from '@rollup/plugin-url';
import packageJson from './package.json';
export default {
input: 'src/Mockup.vue',
output: [
{
format: 'esm',
file: packageJson.main,
},
],
plugins: [
vue(),
url({
limit: 3000000,
include: ['**/*.obj'],
}),
],
};

12
src/Demo.vue
View File

@@ -7,7 +7,7 @@
<Mockup <Mockup
v-if="vidReady" v-if="vidReady"
class="mockup" class="mockup"
:screen="[$refs.video, require('./assets/screen.png')]" :screen="[$refs.video, screenImage]"
:position="[ :position="[
{ {
x: -50 x: -50
@@ -27,7 +27,7 @@
/> --> /> -->
<video <video
src="@/assets/screen.mp4" :src="screenVideo"
ref="video" ref="video"
@canplay="vidReady = true" @canplay="vidReady = true"
muted muted
@@ -39,6 +39,8 @@
<script> <script>
import { defineAsyncComponent } from 'vue'; import { defineAsyncComponent } from 'vue';
import screenImage from './assets/screen.png';
import screenVideo from './assets/screen.mp4';
export default { export default {
data() { data() {
@@ -49,6 +51,12 @@ export default {
components: { components: {
Mockup: defineAsyncComponent(() => import('./Mockup.vue')), Mockup: defineAsyncComponent(() => import('./Mockup.vue')),
}, },
setup() {
return {
screenImage,
screenVideo,
};
}
}; };
</script> </script>

2
src/Mockup.vue
View File

@@ -18,7 +18,7 @@ import * as THREE from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'; import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import MockupModel from './MockupModel'; import MockupModel from './MockupModel';
import roundedPlane from './utils/roundedPlane'; import roundedPlane from './utils/roundedPlane';
import phoneObj from './assets/iphone.obj'; const phoneObj = new URL('./assets/iphone.obj', import.meta.url).href;
export default { export default {
name: 'Mockup', name: 'Mockup',

23
vite.config.js Normal file
View File

@@ -0,0 +1,23 @@
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
assetsInclude: ['**/*.obj'],
build: {
lib: {
entry: resolve(__dirname, 'src/Mockup.vue'),
name: 'vue-three-d-mockup',
fileName: 'vue-three-d-mockup'
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue'
}
}
}
}
});

11
vue.config.js
View File

@@ -1,11 +0,0 @@
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/vue-three-d-mockup/' : '/',
chainWebpack: (config) => {
config.module
.rule('file-loader')
.test(/\.obj$/)
.use('file-loader')
.loader('file-loader')
.end();
},
};

1949
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff