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:现在的架子基本搭建起来了~~~~