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

  • 04_搭建一个VUE3前端架子+gitee配置已关闭评论
  • 15 次浏览
  • A+
所属分类:.NET技术
摘要

1.创建一个文件夹HCJV_012.vscode打开该文件夹,打开终端。3.使用vite安装,选择vue,选择JavaScript,项目名称demo01

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.创建srcrouterindex.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.建一个srcstoreindex.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.创建srcapiindex.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"

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

OK:现在的架子基本搭建起来了~~~~