vue3搭建管理後臺-項目搭建 | 週末學習

本文已參與週末學習計劃，點擊連接查看詳情：juejin.cn/post/696572…

寫下這個管理後臺的框架搭建過程，但願能幫助剛開始工做的同窗！

1、項目建立

1. 全局安裝腳手架,腳手架地址：cli.vuejs.org/zh/guide/

npm install -g @vue/cli
複製代碼

2. 建立vue項目

vue create vue3
複製代碼

3. 選擇配置

4. 綁定git庫

綁定以前須要你在碼雲上建立一個git庫

git初始

git init
複製代碼

檢查文件

git add .
複製代碼

備註

git commit -m '初始'
複製代碼

綁定線上庫

git remote add origin https://gitee.com/niuny/vue3.git
複製代碼

查看下是否綁定成功

git remote -v
複製代碼

開始push

git push origin master --set-upstream
複製代碼

如今你就能夠在線上庫看到你的代碼了

5. cd到你的項目，運行它

cd vue3
npm run serve
複製代碼

看到一下圖，說明你運行成功了

2、使用ui框架

使用以前先展現下咱們以前的項目結構

咱們使用的是ant-design-vue，地址是：www.antdv.com/docs/vue/in…

npm install ant-design-vue --save
npm i --save ant-design-vue@next
複製代碼

當前依賴加載完畢後，咱們先作一些配置 vue.config.js

babel.config.js

作完這些配置後，咱們在main.ts文件中引入

import { Button } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App)
const plugins = [Button]
plugins.forEach(p => app.use(p))
app.use(store).use(router).mount('#app')
複製代碼

這樣咱們前期的工做就作完了，能夠去頁面驗證了，

在Home.vue的文件中引入了button，

查看咱們的頁面，看到和我同樣的按鈕，就說明咱們安裝成功了！

相關文章

vue3管理後臺-router 的使用：juejin.cn/post/697030…

倉庫地址：gitee.com/niuny/vue3

未完待續....