commit
bfadd681b0
22 changed files with 2328 additions and 0 deletions
@ -0,0 +1,24 @@ |
|||
# Logs |
|||
logs |
|||
*.log |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
pnpm-debug.log* |
|||
lerna-debug.log* |
|||
|
|||
node_modules |
|||
dist |
|||
dist-ssr |
|||
*.local |
|||
|
|||
# Editor directories and files |
|||
.vscode/* |
|||
!.vscode/extensions.json |
|||
.idea |
|||
.DS_Store |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
*.sw? |
|||
@ -0,0 +1,2 @@ |
|||
auto-install-peers=true |
|||
strict-peer-dependencies=false |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"recommendations": ["johnsoncodehk.volar"] |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
# Vue 3 + Vite |
|||
|
|||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
|||
|
|||
## Recommended IDE Setup |
|||
|
|||
|
|||
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) |
|||
|
|||
## 初始化项目 |
|||
``` |
|||
pnpm install |
|||
``` |
|||
|
|||
## 运行项目 |
|||
``` |
|||
pnpm run dev |
|||
``` |
|||
|
|||
### Customize configuration |
|||
See [Configuration Reference](https://cli.vuejs.org/config/). |
|||
@ -0,0 +1,13 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<link rel="icon" href="/favicon.ico" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<title>Vite App</title> |
|||
</head> |
|||
<body> |
|||
<div id="app"></div> |
|||
<script type="module" src="/src/main.js"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,27 @@ |
|||
{ |
|||
"name": "vue3-vite-demo", |
|||
"private": true, |
|||
"version": "0.0.0", |
|||
"scripts": { |
|||
"初始化": "pnpm i", |
|||
"dev": "vite dev", |
|||
"build": "vite build" |
|||
}, |
|||
"dependencies": { |
|||
"element-plus": "^2.2.26", |
|||
"vite-plugin-require-transform": "^1.0.4", |
|||
"vue": "^3.2.45", |
|||
"vue-router": "^4.1.6", |
|||
"vue3-video-play": "^1.3.1-beta.6", |
|||
"vuex": "^4.1.0" |
|||
}, |
|||
"devDependencies": { |
|||
"@vitejs/plugin-vue": "^2.3.3", |
|||
"@vitejs/plugin-vue-jsx": "^1.3.10", |
|||
"black-knight": "1.3.25", |
|||
"less": "^4.1.3", |
|||
"less-loader": "~7.3.0", |
|||
"sass-resources-loader": "^2.2.5", |
|||
"vite": "^2.9.14" |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,21 @@ |
|||
<style> |
|||
#app { |
|||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|||
position:fixed; |
|||
top:0; |
|||
left:0; |
|||
width: 100%; |
|||
height:100%; |
|||
} |
|||
</style> |
|||
<template> |
|||
<router-view /> |
|||
</template> |
|||
<script setup> |
|||
import { inject, onMounted, provide } from 'vue' |
|||
import {useRouter, useRoute} from 'vue-router' |
|||
|
|||
provide("router", useRouter()) |
|||
provide("route", useRoute()) |
|||
|
|||
</script> |
|||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,24 @@ |
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: border-box; |
|||
} |
|||
body { |
|||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; |
|||
font-size: 14px; |
|||
line-height: 1.15; |
|||
color: @--color-text-primary; |
|||
background-color: #fff; |
|||
} |
|||
a { |
|||
color: mix(#fff, @--color-primary, 20%); |
|||
text-decoration: none; |
|||
&:focus, |
|||
&:hover { |
|||
color: @--color-primary; |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
img { |
|||
vertical-align: middle; |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
@import url("variables.less"); |
|||
@import url("base.less"); |
|||
|
|||
/* 页面切换动画 */ |
|||
.fade-transform-leave-active, |
|||
.fade-transform-enter-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.fade-transform-enter-from { |
|||
opacity: 0; |
|||
transform: translateX(-30px); |
|||
} |
|||
|
|||
.fade-transform-leave-to { |
|||
opacity: 0; |
|||
transform: translateX(30px); |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
/** |
|||
* 站点变量 |
|||
* |
|||
* #1 重置element-ui组件, 请查阅_element-ui__variable-lookup.scss官方变量列表进行重置, 必须保证变量名一致才能生效! |
|||
* #2 站内变量 |
|||
*/ |
|||
|
|||
// ---------- #1 ---------- |
|||
@--color-primary: #17b3a3; |
|||
@--color-text-primary: #303133; |
|||
|
|||
|
|||
// ---------- #2 ---------- |
|||
// Navbar |
|||
@navbar--background-color: @--color-primary; |
|||
|
|||
// Sidebar |
|||
@sidebar--background-color-dark: #263238; |
|||
@sidebar--color-text-dark: #8a979e; |
|||
|
|||
// Content |
|||
@content--background-color: #f1f4f5; |
|||
@ -0,0 +1,13 @@ |
|||
import svgIcon from './svg-icon.vue' |
|||
|
|||
const components={ |
|||
svgIcon, |
|||
} |
|||
|
|||
export default{ |
|||
install(Vue, opt){ |
|||
for(var i in components){ |
|||
Vue.component(i, components[i]) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
<style scoped> |
|||
.svg-icon{ |
|||
width: 1em; |
|||
height: 1em; |
|||
vertical-align: -0.15em; |
|||
fill: currentColor; |
|||
overflow: hidden; |
|||
} |
|||
</style> |
|||
<template> |
|||
<svg :class="svgClass" aria-hidden="true" v-on="$attrs" :style="{color: props.color}"> |
|||
<use :xlink:href="iconName"/> |
|||
</svg> |
|||
</template> |
|||
<script setup> |
|||
import { computed } from "vue" |
|||
const props=defineProps({ |
|||
name:String, |
|||
color:String, |
|||
className:String, |
|||
}) |
|||
const iconName = computed(()=>`#icon-${props.name}`) |
|||
const svgClass = computed(()=>{ |
|||
if(props.className)return `svg-icon icon-${props.anme}` |
|||
else return 'svg-icon' |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,65 @@ |
|||
import { readFileSync, readdirSync } from 'fs' |
|||
|
|||
let idPerfix = '' |
|||
const svgTitle = /<svg([^>+].*?)>/ |
|||
const clearHeightWidth = /(width|height)="([^>+].*?)"/g |
|||
|
|||
const hasViewBox = /(viewBox="[^>+].*?")/g |
|||
|
|||
const clearReturn = /(\r)|(\n)/g |
|||
|
|||
function findSvgFile(dir) { |
|||
const svgRes = [] |
|||
const dirents = readdirSync(dir, { |
|||
withFileTypes: true |
|||
}) |
|||
for (const dirent of dirents) { |
|||
if (dirent.isDirectory()) { |
|||
svgRes.push(...findSvgFile(dir + dirent.name + '/')) |
|||
} else { |
|||
const svg = readFileSync(dir + dirent.name) |
|||
.toString() |
|||
.replace(clearReturn, '') |
|||
.replace(svgTitle, ($1, $2) => { |
|||
let width = 0 |
|||
let height = 0 |
|||
let content = $2.replace(clearHeightWidth, (s1, s2, s3) => { |
|||
if (s2 === 'width') { |
|||
width = s3 |
|||
} else if (s2 === 'height') { |
|||
height = s3 |
|||
} |
|||
return '' |
|||
}) |
|||
if (!hasViewBox.test($2)) { |
|||
content += `viewBox="0 0 ${width} ${height}"` |
|||
} |
|||
return `<symbol id="${idPerfix}-${dirent.name.replace('.svg', '')}" ${content}>` |
|||
}) |
|||
.replace('</svg>', '</symbol>') |
|||
svgRes.push(svg) |
|||
} |
|||
} |
|||
return svgRes |
|||
} |
|||
|
|||
export const svgBuilder = (path, perfix = 'icon') => { |
|||
if (path === '') return |
|||
idPerfix = perfix |
|||
const res = findSvgFile(path) |
|||
|
|||
return { |
|||
name: 'svg-transform', |
|||
transformIndexHtml(html) { |
|||
return html.replace( |
|||
'<body>', |
|||
` |
|||
<body> |
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0"> |
|||
${res.join('')} |
|||
</svg> |
|||
` |
|||
) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
import { createApp } from 'vue' |
|||
import App from './App.vue' |
|||
import router from './router' |
|||
import store from '@/store' |
|||
import regComponents from '@/components' |
|||
import {defineObj} from 'black-knight/lib/config/custom' |
|||
import {provise} from 'black-knight/lib/config/tools' |
|||
import ElementPlus from 'element-plus' |
|||
import "element-plus/dist/index.css" |
|||
console.log(import.meta.env,'--------------import------') |
|||
console.log(defineObj,'----defineObj---') |
|||
import "@/assets/style/index.less" |
|||
|
|||
import vue3VideoPlay from 'vue3-video-play' |
|||
import 'vue3-video-play/dist/style.css' |
|||
|
|||
var app=createApp(App) |
|||
app.use(router) |
|||
.use(store) |
|||
.use(regComponents) |
|||
.use(ElementPlus) |
|||
.use(vue3VideoPlay) |
|||
.provide('event',new provise()) |
|||
.mount('#app') |
|||
|
|||
app.config.globalProperties.foo='===foo====' // 全局配置属性
|
|||
@ -0,0 +1,18 @@ |
|||
import { createRouter, createWebHashHistory } from "vue-router"; |
|||
import store from '@/store' |
|||
|
|||
const routes=[] |
|||
export const menu = [ |
|||
{ |
|||
path:"/", |
|||
name:"home", |
|||
component:()=>import('@/view/home.vue'), |
|||
meta:{ }, |
|||
}, |
|||
]; |
|||
const router = createRouter({ |
|||
history: createWebHashHistory(), |
|||
routes: routes.concat(menu), |
|||
}); |
|||
|
|||
export default router; |
|||
@ -0,0 +1,15 @@ |
|||
import { createStore } from 'vuex' |
|||
|
|||
var moduleFile=import.meta.globEager("./modules/**/*.js") |
|||
|
|||
const store = createStore({ |
|||
getters: { |
|||
|
|||
}, |
|||
modules:Object.keys(moduleFile).reduce((a,b)=>{ |
|||
a[b.match(/\/modules\/(.+)\.js/)[1]]=moduleFile[b].default |
|||
return a; |
|||
},{}) |
|||
}) |
|||
|
|||
export default store |
|||
@ -0,0 +1,16 @@ |
|||
|
|||
export default { |
|||
namespaced:true, |
|||
state:{ |
|||
|
|||
}, |
|||
getters:{ |
|||
|
|||
}, |
|||
mutations:{ |
|||
|
|||
}, |
|||
actions:{ |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
<style lang="less" scoped> |
|||
.container{ |
|||
|
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="container"> |
|||
asdfasdf |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { inject, onMounted, onUnmounted, ref } from 'vue' |
|||
|
|||
var event = inject("event") |
|||
</script> |
|||
@ -0,0 +1,69 @@ |
|||
import { defineConfig } from 'vite' |
|||
import path from 'path' |
|||
import vue from '@vitejs/plugin-vue' |
|||
import vueJsx from '@vitejs/plugin-vue-jsx' |
|||
import {svgBuilder} from './src/config/svgBuilder' |
|||
import requireTransform from 'vite-plugin-require-transform' |
|||
|
|||
// https://vitejs.dev/config/
|
|||
export default defineConfig({ |
|||
plugins: [ |
|||
vue(), |
|||
vueJsx(), |
|||
requireTransform({ |
|||
fileRegex: /.js$|.vue$/ |
|||
}), |
|||
svgBuilder('./src/assets/svg/'),//提取导入svg文件
|
|||
], |
|||
resolve:{ |
|||
alias:{ |
|||
"@":path.resolve(__dirname,'src'), |
|||
} |
|||
}, |
|||
build:{ |
|||
outDir:"dist", |
|||
assetsDir:"static", |
|||
cssCodeSplit:true, // 拆分css代码
|
|||
brotliSize: false, // 压缩代码
|
|||
rollupOptions:{ |
|||
input:{ // 多项目打包
|
|||
index: path.resolve(__dirname, 'index.html'), |
|||
}, |
|||
// external:['vue'], // 控制插件不编译
|
|||
output: { |
|||
entryFileNames: `static/[name].[hash].js`, |
|||
chunkFileNames: `static/[name].[hash].js`, |
|||
assetFileNames: e=>{ |
|||
console.log('name=',e.anme) |
|||
console.log('type=',e.type) |
|||
return 'assets/[name].[hash].[ext]' |
|||
}, |
|||
}, |
|||
} |
|||
}, |
|||
optimizeDeps:{ |
|||
include:[] // 依赖预编译
|
|||
}, |
|||
server:{ |
|||
port:8090, |
|||
strictPort:false, //端口被占用是不会退出，换新端口
|
|||
open:true, // 自动打开页面
|
|||
proxy:{ |
|||
'/api':{ |
|||
target:"", |
|||
changeOrigin:true, |
|||
ws:false, |
|||
rewrite: path=>path.replace(/^\/api/,'') |
|||
} |
|||
}, |
|||
}, |
|||
pluginOptions:{ |
|||
'style-resources-loader':{ |
|||
preProcessor: 'less', |
|||
patterns:[ |
|||
// 全局less文件
|
|||
path.resolve(__dirname, 'assets/style/index.less') |
|||
] |
|||
} |
|||
} |
|||
}) |
|||
Loading…
Reference in new issue