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

cnpm create vite@latest

cd demo01

cnpm install

cnpm install vue-router@4

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')

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

cnpm install pinia

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')

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         }     } })

cnpm install 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

cnpm install element-plus --save

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')

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

git init

git add .  #上传到仓库 git commit -am "Vue3搭建成功"  # 提交文件本地  git remote add origin gitee项目地址    git push -u origin "master"