mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 21:22:33 +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
|
||||
```
|
||||
|
||||
|
||||
## 配置 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
|
||||
#### 1、安装
|
||||
|
||||
@ -106,4 +126,105 @@ declare module "*.vue" {
|
||||
"vetur.validation.template": false,
|
||||
"vetur.validation.script": 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" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<title>vue-admin-wonderful</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -6,10 +6,13 @@
|
||||
"build": "vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-plus": "^1.0.1-beta.7",
|
||||
"vue": "^3.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/compiler-sfc": "^3.0.4",
|
||||
"sass": "^1.30.0",
|
||||
"sass-loader": "^10.1.0",
|
||||
"typescript": "^4.1.2",
|
||||
"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>
|
||||
<img alt="Vue logo" src="./assets/logo.png" />
|
||||
<HelloWorld msg="Hello Vue 3.0 + Vite" />
|
||||
<el-row>
|
||||
<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>
|
||||
|
||||
<script lang="ts">
|
||||
import HelloWorld from "./components/HelloWorld.vue";
|
||||
|
||||
import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
HelloWorld,
|
||||
setup() {
|
||||
const state = reactive({
|
||||
color: "",
|
||||
});
|
||||
function colorChange() {
|
||||
console.log(state.color);
|
||||
document
|
||||
.getElementsByTagName("body")[0]
|
||||
.style.setProperty("--primary", state.color);
|
||||
}
|
||||
return {
|
||||
colorChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</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 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)
|
||||
app.use(ElementPlus)
|
||||
app.mount('#app')
|
||||
|
||||
@ -1,9 +1,17 @@
|
||||
import type { UserConfig } from 'vite'
|
||||
const path = require('path')
|
||||
|
||||
const viteConfig: UserConfig = {
|
||||
port: 8080,
|
||||
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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user