diff --git a/vue-admin-wonderful-next-docs/docs/config/README.md b/vue-admin-wonderful-next-docs/docs/config/README.md index f9684572..d62c4a11 100644 --- a/vue-admin-wonderful-next-docs/docs/config/README.md +++ b/vue-admin-wonderful-next-docs/docs/config/README.md @@ -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, -``` \ No newline at end of file +``` + + +## 安装 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 + + + + +``` + +#### 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)，实现动态换肤功能 \ No newline at end of file diff --git a/vue-admin-wonderful-next/index.html b/vue-admin-wonderful-next/index.html index 11603f87..9a781b92 100644 --- a/vue-admin-wonderful-next/index.html +++ b/vue-admin-wonderful-next/index.html @@ -4,7 +4,7 @@ - Vite App + vue-admin-wonderful
diff --git a/vue-admin-wonderful-next/package.json b/vue-admin-wonderful-next/package.json index 9d00ec38..15861be9 100644 --- a/vue-admin-wonderful-next/package.json +++ b/vue-admin-wonderful-next/package.json @@ -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" } diff --git a/vue-admin-wonderful-next/public/favicon.ico b/vue-admin-wonderful-next/public/favicon.ico index df36fcfb..9b56b386 100644 Binary files a/vue-admin-wonderful-next/public/favicon.ico and b/vue-admin-wonderful-next/public/favicon.ico differ diff --git a/vue-admin-wonderful-next/src/App.vue b/vue-admin-wonderful-next/src/App.vue index 0eee8cde..eec35c60 100644 --- a/vue-admin-wonderful-next/src/App.vue +++ b/vue-admin-wonderful-next/src/App.vue @@ -1,15 +1,48 @@ + + \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/assets/config/config-layout/index.ts b/vue-admin-wonderful-next/src/assets/config/config-layout/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/vue-admin-wonderful-next/src/assets/config/config-theme/index.ts b/vue-admin-wonderful-next/src/assets/config/config-theme/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/vue-admin-wonderful-next/src/assets/logo.png b/vue-admin-wonderful-next/src/assets/logo.png deleted file mode 100644 index f3d2503f..00000000 Binary files a/vue-admin-wonderful-next/src/assets/logo.png and /dev/null differ diff --git a/vue-admin-wonderful-next/src/assets/style/base/index.scss b/vue-admin-wonderful-next/src/assets/style/base/index.scss new file mode 100644 index 00000000..b417e502 --- /dev/null +++ b/vue-admin-wonderful-next/src/assets/style/base/index.scss @@ -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%; +} diff --git a/vue-admin-wonderful-next/src/assets/style/element/element-variables.scss b/vue-admin-wonderful-next/src/assets/style/element/element-variables.scss new file mode 100644 index 00000000..39b3a55d --- /dev/null +++ b/vue-admin-wonderful-next/src/assets/style/element/element-variables.scss @@ -0,0 +1,6 @@ +/* 改变主题色变量 */ +$--color-primary: #09f; + +/* 改变 icon 字体路径变量，必需 */ +$--font-path: 'element-plus/lib/theme-chalk/fonts'; +@import 'element-plus/packages/theme-chalk/src/index'; diff --git a/vue-admin-wonderful-next/src/assets/style/transition/index.scss b/vue-admin-wonderful-next/src/assets/style/transition/index.scss new file mode 100644 index 00000000..34e5ec5d --- /dev/null +++ b/vue-admin-wonderful-next/src/assets/style/transition/index.scss @@ -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; +} diff --git a/vue-admin-wonderful-next/src/assets/theme/theme-classic/index.scss b/vue-admin-wonderful-next/src/assets/theme/theme-classic/index.scss new file mode 100644 index 00000000..e69de29b diff --git a/vue-admin-wonderful-next/src/assets/theme/theme-elegant/index.scss b/vue-admin-wonderful-next/src/assets/theme/theme-elegant/index.scss new file mode 100644 index 00000000..e69de29b diff --git a/vue-admin-wonderful-next/src/assets/theme/theme-fashion/index.scss b/vue-admin-wonderful-next/src/assets/theme/theme-fashion/index.scss new file mode 100644 index 00000000..e69de29b diff --git a/vue-admin-wonderful-next/src/assets/theme/theme-strange/index.scss b/vue-admin-wonderful-next/src/assets/theme/theme-strange/index.scss new file mode 100644 index 00000000..e69de29b diff --git a/vue-admin-wonderful-next/src/components/HelloWorld.vue b/vue-admin-wonderful-next/src/components/HelloWorld.vue deleted file mode 100644 index b5015b0b..00000000 --- a/vue-admin-wonderful-next/src/components/HelloWorld.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - diff --git a/vue-admin-wonderful-next/src/index.css b/vue-admin-wonderful-next/src/index.css deleted file mode 100644 index 852de7aa..00000000 --- a/vue-admin-wonderful-next/src/index.css +++ /dev/null @@ -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; -} diff --git a/vue-admin-wonderful-next/src/main.ts b/vue-admin-wonderful-next/src/main.ts index 52ef6e1c..f530a2de 100644 --- a/vue-admin-wonderful-next/src/main.ts +++ b/vue-admin-wonderful-next/src/main.ts @@ -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') diff --git a/vue-admin-wonderful-next/vite.config.ts b/vue-admin-wonderful-next/vite.config.ts index bdcd3df5..c64f34d6 100644 --- a/vue-admin-wonderful-next/vite.config.ts +++ b/vue-admin-wonderful-next/vite.config.ts @@ -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