04_搭建一个VUE3前端架子+gitee配置
1.创建一个文件夹HCJV_012.vscode打开该文件夹，打开终端。
3.使用vite安装，选择vue,选择JavaScript，项目名称demo01
cnpm create vite@latest4.跳转demo01目录下
cd demo015.安装cnpm
cnpm install尝试执行下：npm run dev
6.安装Vue Router
cnpm install vue-router@47.修改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 router9.安装Pinia
cnpm install pinia10.修改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--> useCounterstoreDemo --> 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 axios13.创建\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 --save15.修改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 initgit add .#上传到仓库
git commit -am "Vue3搭建成功"# 提交文件本地
git remote add origin gitee项目地址
git push -u origin "master"
OK:现在的架子基本搭建起来了~~~~
来源:https://www.cnblogs.com/MingQiu/p/18264278
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]