mirror of
https://gitee.com/log4j/pig-ui.git
synced 2025-01-03 23:42:23 +08:00
'admin-20.12.13:配置项目结构、主题等'
This commit is contained in:
lyt-Top
parent
b39ae6c9a7
commit
fb7726ff36
@ -19,6 +19,26 @@ npm install
|
|||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## 配置 vite
|
||||||
|
在项目根目录中创建一个 `vite.config.js` 或 `vite.config.ts` 文件（与vue.config.js一样）。如果在当前工作目录中找到 `Vite`，它将自动使用它。
|
||||||
|
|
||||||
|
官网 `config.ts` 配置参考：[https://github.com/vitejs/vite/blob/master/src/node/config.ts](https://github.com/vitejs/vite/blob/master/src/node/config.ts)
|
||||||
|
|
||||||
|
配置 `vite.config.ts`：
|
||||||
|
```ts
|
||||||
|
import type { UserConfig } from 'vite'
|
||||||
|
|
||||||
|
const viteConfig: UserConfig = {
|
||||||
|
port: 8080, // 端口号
|
||||||
|
hostname: 'localhost', // 主机名
|
||||||
|
open: true // 运行自动打开浏览器
|
||||||
|
}
|
||||||
|
|
||||||
|
export default viteConfig
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
## 安装 typescript
|
## 安装 typescript
|
||||||
#### 1、安装
|
#### 1、安装
|
||||||
|
|
||||||
@ -107,3 +127,104 @@ declare module "*.vue" {
|
|||||||
"vetur.validation.script": false,
|
"vetur.validation.script": false,
|
||||||
"vetur.validation.style": false,
|
"vetur.validation.style": false,
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## 安装 element-plus
|
||||||
|
`element-plus` 官网：[https://element-plus.gitee.io/#/zh-CN](https://element-plus.gitee.io/#/zh-CN)
|
||||||
|
|
||||||
|
#### 1、npm 安装
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install element-plus --save
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 2、CDN
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 引入样式 -->
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
|
||||||
|
<!-- 引入组件库 -->
|
||||||
|
<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3、引入 Element Plus
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
import ElementPlus from 'element-plus';
|
||||||
|
import 'element-plus/lib/theme-chalk/index.css';
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
app.use(ElementPlus)
|
||||||
|
app.mount('#app')
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## 安装 sass sass-loader
|
||||||
|
::: tip 提示
|
||||||
|
安装完成不用配置，经过本地测试，可以直接使用。
|
||||||
|
:::
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cnpm install sass sass-loader --save-dev
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## 自定义 Element Plus 主题
|
||||||
|
Element Plus 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element Plus 的样式变量。新建一个样式文件，例如 `element-variables.scss`，写入以下内容：
|
||||||
|
|
||||||
|
#### 1、element-variables.scss
|
||||||
|
注意没有 `~` 符号，`@import '~element-plus/packages/theme-chalk/src/index';`
|
||||||
|
|
||||||
|
```scss
|
||||||
|
/* 改变主题色变量 */
|
||||||
|
$--color-primary: teal;
|
||||||
|
|
||||||
|
/* 改变 icon 字体路径变量，必需 */
|
||||||
|
$--font-path: 'element-plus/lib/theme-chalk/fonts';
|
||||||
|
@import 'element-plus/packages/theme-chalk/src/index';
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 2、配置目录别名 `@`，方便引用
|
||||||
|
在 `vite.config.ts` 中，根据需求自己定义。注意写法 `/@assets/`，键必须以 `/` 斜线开始和结束：
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import type { UserConfig } from 'vite'
|
||||||
|
const path = require('path')
|
||||||
|
|
||||||
|
const viteConfig: UserConfig = {
|
||||||
|
port: 8080,
|
||||||
|
hostname: 'localhost',
|
||||||
|
open: true,
|
||||||
|
alias: {
|
||||||
|
'/@/': path.resolve(__dirname, './src'),
|
||||||
|
'/@assets/': path.resolve(__dirname, './src/assets'),
|
||||||
|
'/@views/': path.resolve(__dirname, './src/views'),
|
||||||
|
'/@components/': path.resolve(__dirname, './src/components'),
|
||||||
|
'/@utils/': path.resolve(__dirname, './src/utils')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default viteConfig
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3、页面中使用
|
||||||
|
注意 `/@assets` 写法，一定要以 `/` 开头，否则报 `404`
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
import ElementPlus from 'element-plus';
|
||||||
|
import '/@assets/style/base/index.scss';
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
app.use(ElementPlus)
|
||||||
|
app.mount('#app')
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 4、动态换肤功能
|
||||||
|
使用 `ColorPicker 颜色选择器`：[https://element-plus.gitee.io/#/zh-CN/component/color-picker](https://element-plus.gitee.io/#/zh-CN/component/color-picker)，实现动态换肤功能
|
||||||
@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite App</title>
|
<title>vue-admin-wonderful</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
@ -6,10 +6,13 @@
|
|||||||
"build": "vite build"
|
"build": "vite build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"element-plus": "^1.0.1-beta.7",
|
||||||
"vue": "^3.0.4"
|
"vue": "^3.0.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/compiler-sfc": "^3.0.4",
|
"@vue/compiler-sfc": "^3.0.4",
|
||||||
|
"sass": "^1.30.0",
|
||||||
|
"sass-loader": "^10.1.0",
|
||||||
"typescript": "^4.1.2",
|
"typescript": "^4.1.2",
|
||||||
"vite": "^1.0.0-rc.13"
|
"vite": "^1.0.0-rc.13"
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 1.1 KiB |
@ -1,15 +1,48 @@
|
|||||||
<template>
|
<template>
|
||||||
<img alt="Vue logo" src="./assets/logo.png" />
|
<el-row>
|
||||||
<HelloWorld msg="Hello Vue 3.0 + Vite" />
|
<el-button>默认按钮</el-button>
|
||||||
|
<el-button type="primary">主要按钮</el-button>
|
||||||
|
<el-button type="success">成功按钮</el-button>
|
||||||
|
<el-button type="info">信息按钮</el-button>
|
||||||
|
<el-button type="warning">警告按钮</el-button>
|
||||||
|
<el-button type="danger">危险按钮</el-button>
|
||||||
|
</el-row>
|
||||||
|
<div class="aa">
|
||||||
|
22
|
||||||
|
<div class="bb">33</div>
|
||||||
|
<div class="red">44</div>
|
||||||
|
</div>
|
||||||
|
<el-color-picker v-model="color" @change="colorChange"></el-color-picker>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import HelloWorld from "./components/HelloWorld.vue";
|
import { reactive, toRefs } from "vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "App",
|
name: "App",
|
||||||
components: {
|
setup() {
|
||||||
HelloWorld,
|
const state = reactive({
|
||||||
|
color: "",
|
||||||
|
});
|
||||||
|
function colorChange() {
|
||||||
|
console.log(state.color);
|
||||||
|
document
|
||||||
|
.getElementsByTagName("body")[0]
|
||||||
|
.style.setProperty("--primary", state.color);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
colorChange,
|
||||||
|
...toRefs(state),
|
||||||
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.aa {
|
||||||
|
border: 1px solid red;
|
||||||
|
.bb {
|
||||||
|
color: blue;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
14
vue-admin-wonderful-next/src/assets/style/base/index.scss
Normal file
14
vue-admin-wonderful-next/src/assets/style/base/index.scss
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
@import '../element/element-variables.scss';
|
||||||
|
@import '../transition/index.scss';
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
/* 改变主题色变量 */
|
||||||
|
$--color-primary: #09f;
|
||||||
|
|
||||||
|
/* 改变 icon 字体路径变量，必需 */
|
||||||
|
$--font-path: 'element-plus/lib/theme-chalk/fonts';
|
||||||
|
@import 'element-plus/packages/theme-chalk/src/index';
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
/* 页面切换动画 */
|
||||||
|
.fade-transform-enter-active,
|
||||||
|
.fade-transform-leave-active {
|
||||||
|
will-change: transform;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.fade-transform-enter {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-30px);
|
||||||
|
}
|
||||||
|
.fade-transform-leave-active {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Breadcrumb 面包屑过渡动画 */
|
||||||
|
.breadcrumb-enter-active,
|
||||||
|
.breadcrumb-leave-active {
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.breadcrumb-enter,
|
||||||
|
.breadcrumb-leave-active {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(20px);
|
||||||
|
}
|
||||||
|
.breadcrumb-move {
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.breadcrumb-leave-active {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<template>
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
<button @click="count++">count is: {{ count }}</button>
|
|
||||||
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: "HelloWorld",
|
|
||||||
props: {
|
|
||||||
msg: String,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
count: 0,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
#app {
|
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-align: center;
|
|
||||||
color: #2c3e50;
|
|
||||||
margin-top: 60px;
|
|
||||||
}
|
|
||||||
@ -1,6 +1,10 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import './index.css'
|
|
||||||
|
import ElementPlus from 'element-plus';
|
||||||
|
import '/@assets/style/base/index.scss';
|
||||||
|
// import 'element-plus/lib/theme-chalk/index.css'
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
app.use(ElementPlus)
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|||||||
@ -1,9 +1,17 @@
|
|||||||
import type { UserConfig } from 'vite'
|
import type { UserConfig } from 'vite'
|
||||||
|
const path = require('path')
|
||||||
|
|
||||||
const viteConfig: UserConfig = {
|
const viteConfig: UserConfig = {
|
||||||
port: 8080,
|
port: 8080,
|
||||||
hostname: 'localhost',
|
hostname: 'localhost',
|
||||||
open: true
|
open: true,
|
||||||
|
alias: {
|
||||||
|
'/@/': path.resolve(__dirname, './src'),
|
||||||
|
'/@assets/': path.resolve(__dirname, './src/assets'),
|
||||||
|
'/@views/': path.resolve(__dirname, './src/views'),
|
||||||
|
'/@components/': path.resolve(__dirname, './src/components'),
|
||||||
|
'/@utils/': path.resolve(__dirname, './src/utils')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default viteConfig
|
export default viteConfig
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user