04_搭建一個VUE3前端架子+gitee配置

1.創建一個文件夾HCJV_01

2.vscode打開該文件夾，打開終端。

3.使用vite安裝，選擇vue,選擇JavaScript，項目名稱demo01

cnpm create vite@latest

4.跳轉demo01目錄下

cd demo01

5.安裝cnpm

cnpm install

嘗試執行下：npm run dev

6.安裝Vue Router

cnpm install vue-router@4

7.修改main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

// 導入router
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

8.創建\src\router\index.js配置文件

import {createRouter,createWebHashHistory} from 'vue-router'
const listRoutes = { 
}
// 定義路由映射
const routes = [
    listRoutes,
]

// 創建路由實例
const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

// 定義一個全局的守衛，去判斷請求鏈接有滅有token欄位
//router.beforeEach(
//   (to, from, next) => {
//     console.log("to:", to)
//     console.log("from:",from)
//     // console.log("next:", next)
//     // 如果id不是dukuan，直接跳轉到/
//     if (to.query.token != 'dukuan' && to.path == "/list") {
//       next("/")
//       return false
//     } else {
//       next()
//     }
    
//   }
//)
// router.push("/xxxx")
export default router

9.安裝Pinia

cnpm install pinia

10.修改mian.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

// 導入router
import router from './router'
//導入pinia
import { createPinia } from 'pinia'
const app = createApp(App)
const pinia = createPinia()
app.use(router).use(pinia)
app.mount('#app')

11.建一個\src\store\index.js配置文件

import { defineStore } from 'pinia'

// 創建一個全局的狀態、容器。
// 容器接收兩個參數，第一個參數：容器的ID，第二個：容器的內容
// defineStore返回的是一個函數，這個函數按照useXXX去命名
// counter--> useCounter  storeDemo --> useStoreDemo
export const useStoreDemo = defineStore('storeDemo',{
    // 容器的內容
    // state：用來存儲全局狀態/數據，可以理解為數據配置的位置
    // data
    state: ()=>{
        return {
            msg: "Hello, Pinia"
        }
    },
    // 相當於計算屬性
    getters: {},
    // 定義修改數據的方法
    // 相當於methods
    actions: {
        // 接收參數
        changeStoreDemo(value) {
            this.msg = value
        }
    }
})

12.安裝Axios 

cnpm install axios

13.創建\src\api\index.js文件用於封裝Axios

import axios from 'axios'
const request = (url = '', data = {}, method = "get", timeout = 5000) => {
    console.log("使用封裝函數去處理請求")
    return new Promise((resolve, reject)=>{
        console.log("使用axios請求介面")
        // GET POST 
        const methodLower = method.toLowerCase() 
        if (methodLower === 'get') {
            axios({
                method: methodLower,
                params: data,
                timeout: timeout,
                url: url,
            }).then((response)=>{
                // 能正常拿到數據
                resolve(response)
            }).catch((error)=>{
                reject(error)
            })
        } else if (methodLower === "post") {
            axios({
                method: methodLower,
                data: data,
                timeout: timeout,
                url: url,
            }).then((response)=>{
                // 能正常拿到數據
                resolve(response)
            }).catch((error)=>{
                reject(error)
            })
        }
    })
}

export default request

 14.安裝Element Plus

cnpm install element-plus --save

15.修改mian.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

// 導入router
import router from './router'
//導入pinia
import { createPinia } from 'pinia'
//導入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


const app = createApp(App)
const pinia = createPinia()
app.use(router).use(pinia).use(ElementPlus)
app.mount('#app')

打開package.json可以查看你的安裝信息

16.在gitee上創建一個倉庫(沒有賬號自己創建一個)

17.安裝git,Git - 下載軟體包 (git-scm.com),記住安裝路徑

18.配置vscode,點擊管理-->設置-->輸入git.path-->點擊在setting.js中編輯

配置git.path

"git.path": "D:/Tool/git/Git/git-bash.exe"

19.重啟vscode,點擊源代碼管理查看項目是否可以提交了。

20.設置gitee可查看Git的安裝及使用 - 野碼 - 博客園 (cnblogs.com) 或SSH 公鑰設置 | Gitee 產品文檔

21.vscode 打開HCJV_01文件夾，跳轉到demo01項目中，執行git命令

git init

git add .  #上傳到倉庫
git commit -am "Vue3搭建成功"  # 提交文件本地

git remote add origin gitee項目地址  

git push -u origin "master"

OK:現在的架子基本搭建起來了~~~~