Skip to content

V
vite-vue3
Commit 70da7224 authored by wangjiankun's avatar wangjiankun
Browse files
Options

init: 搭建

parents
Hide whitespace changes
Inline Side-by-side
Showing with 376 additions and 0 deletions
.eslintrc.js 0 → 100644
View file @ 70da7224
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: "babel-eslint"
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
}
};
.gitignore 0 → 100644
View file @ 70da7224
node_modules
.DS_Store
dist
dist-ssr
*.local
\ No newline at end of file
.idea/.gitignore 0 → 100644
View file @ 70da7224
# Default ignored files
/workspace.xml
\ No newline at end of file
.idea/misc.xml 0 → 100644
View file @ 70da7224
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>
\ No newline at end of file
.idea/modules.xml 0 → 100644
View file @ 70da7224
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/vue3-naive.iml" filepath="$PROJECT_DIR$/.idea/vue3-naive.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/vue3-naive.iml 0 → 100644
View file @ 70da7224
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
index.html 0 → 100644
View file @ 70da7224
<!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>
package.json 0 → 100644
View file @ 70da7224
{
"version": "1.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5",
"vue-router": "^4.0.10",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.2.3",
"@vue/compiler-sfc": "^3.0.5",
"less": "^4.1.1",
"naive-ui": "^2.15.2",
"vfonts": "^0.1.0",
"vite": "^2.3.8"
}
}
src/App.vue 0 → 100644
View file @ 70da7224
<template>
<n-config-provider :theme="theme">
<router-view :key="key"></router-view>
</n-config-provider>
</template>
<script>
import { defineComponent, ref, computed, provide, onMounted } from 'vue'
import { NConfigProvider, useThemeVars } from 'naive-ui'
import { useRoute } from 'vue-router'
export default defineComponent({
components: { NConfigProvider },
setup() {
const theme = ref(null)
provide('setTheme', (val) => {
theme.value = val || null
})
const themeVars = useThemeVars()
provide('themeVars', themeVars)
const key = computed(() => {
return useRoute().fullPath
})
const say = () => {
alert('1')
}
return {
theme,
key
}
}
})
</script>
src/Layout/components/footer.vue 0 → 100644
View file @ 70da7224
<template>
</template>
<script>
export default {
name: "KFooter"
}
</script>
<style scoped>
</style>
src/Layout/components/header.vue 0 → 100644
View file @ 70da7224
<template>
</template>
<script>
export default {
name: "KHeader"
}
</script>
<style scoped>
</style>
src/Layout/components/main.vue 0 → 100644
View file @ 70da7224
<template>
<router-view class="k-page"></router-view>
</template>
<script>
export default {
name: "KMain"
}
</script>
<style scoped>
</style>
src/Layout/index.vue 0 → 100644
View file @ 70da7224
<template>
<div class="k-app">
<n-layout class="k-layout">
<n-layout-header position="absolute" class="k-header">
<k-header></k-header>
</n-layout-header>
<n-layout-content class="k-content">
<k-main></k-main>
</n-layout-content>
<n-layout-footer class="k-footer">
<k-footer></k-footer>
</n-layout-footer>
</n-layout>
</div>
</template>
<script>
import KHeader from './components/header.vue'
import KFooter from './components/footer.vue'
import KMain from './components/main.vue'
import { NLayout, NLayoutHeader, NLayoutContent, NLayoutFooter } from 'naive-ui'
import { defineComponent, inject } from 'vue'
export default defineComponent({
components: {
NLayout, NLayoutHeader, NLayoutFooter, NLayoutContent,KHeader, KFooter, KMain
},
setup() {
const $theme = inject('themeVars')
return {
$theme
}
}
})
</script>
<style lang="less">
.k-app {
.k-layout {
.k-header {
height: 6vh;
z-index: 1699;
box-shadow: 0 2px 12px 0 rgba(0,0,0, 0.1);
}
.k-content {
padding-top: 6vh;
min-height: calc(100vh - 7vh);
background-color: @background-color;
}
.k-footer {
height: 7vh;
background-color: @background-color;
}
}
}
</style>
src/components/HelloWorld.vue 0 → 100644
View file @ 70da7224
<template>
<h1>{{ msg }}</h1>
<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank">
Vite Documentation
</a>
|
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
</p>
<button type="button" @click="state.count++">count is: {{ state.count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</template>
<script setup>
import { defineProps, reactive } from 'vue'
defineProps({
msg: String
})
const state = reactive({ count: 0 })
</script>
<style scoped>
a {
color: #42b983;
}
</style>
src/main.js 0 → 100644
View file @ 70da7224
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import '@/style/index.less'
const app = createApp(App)
app.use(router)
app.mount('#app')
src/router/index.js 0 → 100644
View file @ 70da7224
import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '../Layout/index.vue'
const routes = [
{
path: '/',
redirect: '/Home',
component: Layout,
children: [
{
path: '/Home',
name: 'Home',
component: () => import('../views/index.vue')
}
]
}
]
const router = createRouter({
routes,
history: createWebHashHistory()
})
export default router
src/style/index.less 0 → 100644
View file @ 70da7224
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,html {
width: 100%;
height: 100%;
overflow: hidden;
}
#app {
text-align: center;
line-height: 1.2;
}
src/style/theme.less 0 → 100644
View file @ 70da7224
@red: #e54d42;
@orange: #f37b1d;
@yellow: #fbbd08;
@olive: #8dc63f;
@green: #39b54a;
@cyan: #1cbbb4;
@blue: #0081ff;
@purple: #6739b6;
@mauve: #9c26b0;
@pink: #e03997;
@brown: #a5673f;
@grey: #8799a3;
@black: #000;
@textMain: #333;
@textDefault: #666;
@gray: #aaa;
@ghostWhite: #f1f1f1;
@white: #fff;
@redLight: #fadbd9;
@orangeLight: #fde6d2;
@yellowLight: #fef2ce;
@oliveLight: #e8f4d9;
@greenLight: #d7f0db;
@cyanLight: #d2f1f0;
@blueLight: #cce6ff;
@purpleLight: #e1d7f0;
@mauveLight: #ebd4ef;
@pinkLight: #f9d7ea;
@brownLight: #ede1d9;
@greyLight: #e7ebed;
@gradualRed: linear-gradient(45deg,#f43f3b,#ec008c);
@gradualOrange: linear-gradient(45deg,#ff9700,#ed1c24);
@gradualGreen: linear-gradient(45deg,#39b54a,#8dc63f);
@gradualPurple: linear-gradient(45deg,#9000ff,#5e00ff);
@gradualPink: linear-gradient(45deg,#ec008c,#6739b6);
@gradualBlue: linear-gradient(45deg,#0081ff,#1cbbb4);
@ShadowSize: 3px 3px 4px;
@redShadow: rgba(204,69,59,0.2);
@orangeShadow: rgba(217,109,26,0.2);
@yellowShadow: rgba(224,170,7,0.2);
@oliveShadow: rgba(124,173,55,0.2);
@greenShadow: rgba(48,156,63,0.2);
@cyanShadow: rgba(28,187,180,0.2);
@blueShadow: rgba(0,102,204,0.2);
@purpleShadow: rgba(88,48,156,0.2);
@mauveShadow: rgba(133,33,150,0.2);
@pinkShadow: rgba(199,50,134,0.2);
@brownShadow: rgba(140,88,53,0.2);
@greyShadow: rgba(114,130,138,0.2);
@grayShadow: rgba(114,130,138,0.2);
@blackShadow: rgba(26,26,26,0.2);
@background-color: @ghostWhite;
src/views/index.vue 0 → 100644
View file @ 70da7224
<template>
<div>主页</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
vite.config.js 0 → 100644
View file @ 70da7224
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const {resolve} = require('path')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
},
css: {
preprocessorOptions: {
less: {
modifyVars: {
hack: `true; @import (reference) "${resolve('src/style/theme.less')}";`,
},
javascriptEnabled: true,
}
}
},
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment