主题:Vue 3 + TypeScript + Vite + ElementPlus
1.安装node环境
安装包:node-v14.17.6-x64.msi
2.Vite创建Vue项目
npm init @vitejs/app项目初始化,选择vue-ts
目录结构:
npm install
npm run dev
- UI框架:ElementPlus
npm install element-plus
完整引入所有组件
修改src/main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import './element-variables.scss'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus, {
locale: zhCn,
})
app.mount('#app')
修改src/app.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
<el-button>Button</el-button>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import { defineComponent } from 'vue'
export default defineComponent({
name: 'app',
components: {
HelloWorld,
},
})
</script>
- vue-router、axios、vuex、mock...
npm install axios
npm install vue-router@4
npm install vuex@next
npm install mockjs
npm install vite-plugin-mockapp.mount('#app')
创建router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
创建store/index.ts
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
修改src/main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
import router from './router'
import store from './store'
app.use(ElementPlus)
app.use(store)
app.use(router)
app.mount('#app')
mock 模拟各种请求数据场景,修改vite.config.ts
import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
viteMockServe({}),
],
})
创建mock/system/user.ts
import { MockMethod } from 'vite-plugin-mock'
const userList = [
{ id: 1, name: 'vite' },
{ id: 2, name: 'vue' },
{ id: 3, name: 'typescript' },
{ id: 4, name: 'vue-router' },
{ id: 5, name: 'axios' },
{ id: 6, name: 'vuex' },
{ id: 7, name: 'mock' },
{ id: 8, name: 'vite-plugin-mock' },
]
export default [
{
url: '/user/list',
method: 'get',
response: ({ query }) => {
return {
code: 0,
data: userList,
}
},
},
] as MockMethod[]
- 个性化
1.自定义主题
安装sass
npm install sass
创建 src/element-variables.scss文件
@use "sass:map";
/* Color
-------------------------- */
$--colors: () !default;
$--colors: map.deep-merge(
(
'white': #ffffff,
'black': #000000,
/* 主题色 */
'primary': (
/*'base': #409eff,*/
'base': #5352ed,
),
'success': (
'base': #67c23a,
),
'warning': (
'base': #e6a23c,
),
'danger': (
'base': #f56c6c,
),
'error': (
'base': #f56c6c,
),
'info': (
'base': #909399,
),
),
$--colors
);
@import "element-plus/packages/theme-chalk/src/index";
修改src/mian.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './element-variables.scss'
import App from './App.vue'
const app = createApp(App)
import router from './router'
import store from './store'
app.use(ElementPlus)
app.use(store)
app.use(router)
app.mount('#app')
色彩调配
#55efc4 #81ecec #74b9ff #a29bfe #dfe6e9
#00b894 #00cec9 #0984e3 #6c5ce7 #b2bec3
#ffeaa7 #fab1a0 #ff7675 #fd79a8 #636e72
#fdcb6e #e17055 #d63031 #e84393 #2d3436
#eccc68 #ff7f50 #ff6b81 #a4b0be #57606f
#ffa502 #ff6348 #ff4757 #747d8c #2f3542
#7bed9f #70a1ff #5352ed #ffffff #dfe4ea
#2ed573 #1e90ff #3742fa #f1f2f6 #ced6e0