Vue3的UI Framework中有Element-Plus、BalmUI、Quasar、PrimeVue、Ant Design Vue等UI Framework.
Element-Plus是Element-UI的Vue3版,Element-UI的使用人數(shù)的基數(shù)較大,Github上的Star數(shù)也較多,就選擇了Element-Plus作為這個(gè)Blog項(xiàng)目的UI Framework.
UI Framework的好處就是提供了相較裸Html+CSS開發(fā)起來(lái)更好看和方便一些.
Element-Plus在國(guó)內(nèi)有鏡像站點(diǎn),參看起來(lái)速度相對(duì)快一些. Element-Plus國(guó)內(nèi)鏡像站點(diǎn).
代碼可以從Github上取得https://github.com/magicduan/django_vue_graphql/releases/tag/base_0.2
配置Element-UI開發(fā)環(huán)境
如果在已有的項(xiàng)目中安裝的用包管理器安裝最方便了.
npm install element-plus --save
由于對(duì)Element-Plus的組件的使用方法不是很熟練, 按照官網(wǎng)的說(shuō)明我直接從Element-Plus提供的Vite的快速模版進(jìn)行啟動(dòng).
https://github.com/element-plus/element-plus-vite-starter
從Github上下載代碼后展開,執(zhí)行下列命令就可以啟動(dòng)一個(gè)Element-Plus的Demo服務(wù)了.
npm install npm run dev
按照前一篇Blog例子代碼, 修改vite.config.ts,加入端口配置,將Vue的端口設(shè)置為8080
export default defineConfig({ .... server:{ port:8080 }, ....
使用npm 安裝vue-router、apollo-client
npm install vue-router@4 npm install --save graphql graphql-tag @apollo/client npm install --save @vue/apollo-composable
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-412355.html
遷移代碼
由于是后安裝的vue-router,缺省的vue-router 沒有設(shè)置, 建立與Frontend相同的目錄
src/router
src/views
將Blog項(xiàng)目中的Frontend中相關(guān)的代碼Copy進(jìn)入對(duì)應(yīng)目錄
src/router/index.ts src/views/AllPosts.vue src/views/AuthorView.vue src/views/PostsByTag.vue src/views/PostView.vue src/componets/AuthorLink.vue src/componets/PostLis.vue
修改頂部菜單BaseHeader.vue
Element-UI模版提供的是頂菜單+左工具欄的UI模版, src/compoments/layout/BaseHeader.vue 為頂部菜單, BaseSide.vue為左邊菜單.
這里我們修改BaseHeader.vue,修改后菜單項(xiàng)為
MyBlog --> HomeView.vue Posts All Posts --> All Posts Add Post //將來(lái)實(shí)現(xiàn) Delete Post//將來(lái)實(shí)現(xiàn) Tag ->根據(jù)Backend端的取得Tag的種類動(dòng)態(tài)生成Tag菜單 HelloWord -->對(duì)應(yīng)原Element-UI的Helloworld的例子
由于需要根據(jù)BackEnd端的Tag查詢結(jié)果動(dòng)態(tài)生成Tag,我們?yōu)锽aseHeader.vue加入Props :tagItems
Baseheader.vue代碼具體修改如下:
<script setup lang="ts" > import { toggleDark } from '~/composables'; import { ref } from 'vue'; const props = defineProps({ tagItems:{type:Array,required:true, default:[]} }) const msg = ref("/hello/\"Hello Vue 3.0 + Element Plus + Vite\"") </script> <template> <el-menu class="el-menu-demo" mode="horizontal" :router= true> <el-menu-item index="/">My Blog</el-menu-item> <el-sub-menu index="2"> <template #title>Posts</template> <el-menu-item index="/posts">All Posts</el-menu-item> <el-menu-item index="2-1">Add Post</el-menu-item> <el-menu-item index="2-2">Delete Post</el-menu-item> <el-sub-menu index="2-4"> <template #title>...</template> <el-menu-item index="2-4-1">item one</el-menu-item> <el-menu-item index="2-4-2">item two</el-menu-item> <el-menu-item index="2-4-3">item three</el-menu-item> </el-sub-menu> </el-sub-menu> <el-sub-menu v-if="tagItems.length" index="tags" > <template #title>Tags</template> <el-menu-item v-for="tagInfo in tagItems" :index="tagInfo.path"> {{ tagInfo.name }} </el-menu-item> </el-sub-menu> <el-menu-item v-else :index="tags" disabled>Tags</el-menu-item> <el-menu-item :index="msg" >HelloVue</el-menu-item> <el-menu-item h="full" @click="toggleDark()"> <button class="border-none w-full bg-transparent cursor-pointer" style="height: var(--ep-menu-item-height);"> <i inline-flex i="dark:ep-moon ep-sunny" /> </button> </el-menu-item> </el-menu> </template>
?其中需要注意的幾點(diǎn):
- 將菜單項(xiàng)與vue-router結(jié)合起來(lái),菜單項(xiàng)的index屬性為router/index.ts中設(shè)置的URL path, 需要設(shè)置el-menu
:router= true
- HelloWorld.vue 其中需要屬性msg,為了在菜單中進(jìn)行配置,我們需要在index.ts中將HelloWord.vue的URL的prop設(shè)置為true
const router = createRouter({ ... { path: '/hello/:msg', name: 'HellowWorld', component: () => import("../components/HelloWorld.vue"), props: true }, ...
將HelloWorld.vue Component的Prop屬性作為參數(shù)來(lái)傳遞
修改App.vue
在App.vue中加入從Backend通過GraphQL取Tags的代碼, 將Tags數(shù)組傳遞給BaseHeader.vue,將<HelloWord .../>改為<routerview/>
<script setup lang="ts"> import HomeView from './views/HomeView.vue'; import HelloWorld from './components/HelloWorld.vue'; import gql from 'graphql-tag'; import { useQuery } from '@vue/apollo-composable'; import { computed } from '@vue/reactivity'; const {result,loading,error} = useQuery(gql` query getTags{ tags { name } } `) const tags = computed(()=>{ let tagsArray = [] if (result.value){ result.value?.tags.forEach(tagName => { let tagInfo = {path:"/tag/"+tagName.name,name:tagName.name} tagsArray.push(tagInfo) }); } return tagsArray }) </script> <template> <el-config-provider namespace="ep" > <BaseHeader :tagItems="tags"/> <div style="display: flex"> <BaseSide /> <div> <!-- <HelloWorld msg="Hello Vue 3.0 + Element Plus + Vite" @changeTags ='changTags'/> --> <RouterView/> </div> </div> </el-config-provider> </template> <style> #app { text-align: center; color: var(--ep-text-color-primary); } .element-plus-logo { width: 50%; } </style>
在Backend中加入Tags的查詢
backend/blog/scheme/py
class Query(graphene.ObjectType): .... tags = graphene.List(TagType) ..... def resolve_tags(root,info): return ( models.Tag.objects.all() )
?
修改main.ts加入router,Apollo相關(guān)的代碼
import { DefaultApolloClient } from '@vue/apollo-composable'
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
// HTTP connection to the API
const httpLink = createHttpLink({
uri: 'http://localhost:8000/graphql',
})
// Cache implementation
const cache = new InMemoryCache()
// Create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache,
})
const app = createApp({
setup () {
provide(DefaultApolloClient, apolloClient)
},
render: () => h(App),
})
app.use(router)
?
至此blog相關(guān)的代碼遷移完成, 可以完成Posts List等操作了,但是頁(yè)面相對(duì)不太好看,下一步我們使用Element-UI的控件進(jìn)行對(duì)應(yīng)改造即可.
使用Element-UI改造Posts等相關(guān)的Vue
在技術(shù)打通之后,UI的改造就是細(xì)心+審美的工作了,按照我自己的意思進(jìn)行了修改,具體的修改就不贅述了,直接參考代碼即可.文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-412355.html
?
到了這里，關(guān)于在Django+Vue3+GraphQL的Blog例子代碼中引入Element-Plus UI Framework的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
