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

拳手老邓

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

1. cnpm create vite@latest

复制代码

4.跳转demo01目录下

1. cd demo01

复制代码

5.安装cnpm

1. cnpm install

复制代码

尝试执行下：npm run dev
6.安装Vue Router

1. cnpm install vue-router@4

复制代码

7.修改main.js

1. import { createApp } from 'vue'
2. import './style.css'
3. import App from './App.vue'
5. // 导入router
6. import router from './router'
7. const app = createApp(App)
8. app.use(router)
9. app.mount('#app')

复制代码

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

1. import {createRouter,createWebHashHistory} from 'vue-router'
2. const listRoutes = {
3. }
4. // 定义路由映射
5. const routes = [
6.     listRoutes,
7. ]
9. // 创建路由实例
10. const router = createRouter({
11.     history: createWebHashHistory(),
12.     routes,
13. })
15. // 定义一个全局的守卫，去判断请求链接有灭有token字段
16. //router.beforeEach(
17. //   (to, from, next) => {
18. //     console.log("to:", to)
19. //     console.log("from:",from)
20. //     // console.log("next:", next)
21. //     // 如果id不是dukuan，直接跳转到/
22. //     if (to.query.token != 'dukuan' && to.path == "/list") {
23. //       next("/")
24. //       return false
25. //     } else {
26. //       next()
27. //     }
28.    
29. //   }
30. //)
31. // router.push("/xxxx")
32. export default router

复制代码

9.安装Pinia

1. cnpm install pinia

复制代码

10.修改mian.js

1. import { createApp } from 'vue'
2. import './style.css'
3. import App from './App.vue'
5. // 导入router
6. import router from './router'
7. //导入pinia
8. import { createPinia } from 'pinia'
9. const app = createApp(App)
10. const pinia = createPinia()
11. app.use(router).use(pinia)
12. app.mount('#app')

复制代码

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

1. import { defineStore } from 'pinia'
3. // 创建一个全局的状态、容器。
4. // 容器接收两个参数，第一个参数：容器的ID，第二个：容器的内容
5. // defineStore返回的是一个函数，这个函数按照useXXX去命名
6. // counter--> useCounter  storeDemo --> useStoreDemo
7. export const useStoreDemo = defineStore('storeDemo',{
8.     // 容器的内容
9.     // state：用来存储全局状态/数据，可以理解为数据配置的位置
10.     // data
11.     state: ()=>{
12.         return {
13.             msg: "Hello, Pinia"
14.         }
15.     },
16.     // 相当于计算属性
17.     getters: {},
18.     // 定义修改数据的方法
19.     // 相当于methods
20.     actions: {
21.         // 接收参数
22.         changeStoreDemo(value) {
23.             this.msg = value
24.         }
25.     }
26. })

复制代码

12.安装Axios 

1. cnpm install axios

复制代码

13.创建\src\api\index.js文件用于封装Axios

1. import axios from 'axios'
2. const request = (url = '', data = {}, method = "get", timeout = 5000) => {
3.     console.log("使用封装函数去处理请求")
4.     return new Promise((resolve, reject)=>{
5.         console.log("使用axios请求接口")
6.         // GET POST
7.         const methodLower = method.toLowerCase()
8.         if (methodLower === 'get') {
9.             axios({
10.                 method: methodLower,
11.                 params: data,
12.                 timeout: timeout,
13.                 url: url,
14.             }).then((response)=>{
15.                 // 能正常拿到数据
16.                 resolve(response)
17.             }).catch((error)=>{
18.                 reject(error)
19.             })
20.         } else if (methodLower === "post") {
21.             axios({
22.                 method: methodLower,
23.                 data: data,
24.                 timeout: timeout,
25.                 url: url,
26.             }).then((response)=>{
27.                 // 能正常拿到数据
28.                 resolve(response)
29.             }).catch((error)=>{
30.                 reject(error)
31.             })
32.         }
33.     })
34. }
36. export default request

复制代码

 14.安装Element Plus

1. cnpm install element-plus --save

复制代码

15.修改mian.js

1. import { createApp } from 'vue'
2. import './style.css'
3. import App from './App.vue'
5. // 导入router
6. import router from './router'
7. //导入pinia
8. import { createPinia } from 'pinia'
9. //导入ElementPlus
10. import ElementPlus from 'element-plus'
11. import 'element-plus/dist/index.css'
14. const app = createApp(App)
15. const pinia = createPinia()
16. app.use(router).use(pinia).use(ElementPlus)
17. app.mount('#app')

复制代码

打开package.json可以查看你的安装信息
16.在gitee上创建一个仓库(没有账号自己创建一个)
17.安装git,Git - 下载软件包 (git-scm.com),记住安装路径
18.配置vscode,点击管理-->设置-->输入git.path-->点击在setting.js中编辑
配置git.path

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

复制代码

19.重启vscode,点击源代码管理查看项目是否可以提交了。
20.设置gitee可查看Git的安装及使用 - 野码 - 博客园 (cnblogs.com) 或SSH 公钥设置 | Gitee 产品文档
21.vscode 打开HCJV_01文件夹，跳转到demo01项目中，执行git命令

1. git init

复制代码

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

复制代码

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

来源:https://www.cnblogs.com/MingQiu/p/18264278
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！