当前位置：首页 > news >正文

Java学习Day20

news 来源：原创 2024/9/16 10:15:47

Vue学习

nodejs的安装与环境配置

1.直接去官网下载合适版本的nodejs( https://nodejs.org/zh-cn/download/prebuilt-installer)

2.解压下载的安装包，将文件路径配置到系统变量的path中，然后确认后退出。可以使用终端来查看安装的nodejs版本。使用win+R快捷键进入cmd终端，输入npm -v查看

3.使用npm config set registry https://mirrors.huaweicloud.com/repository/npm/ 选择华为的镜像源。配置完可以使用npm config get registry命令查看选择的镜像源。

vue项目的创建与配置

1.创建一个vite项目，先准备好一个文件夹用来存放你的Vue项目，在这个文件夹处点击导航栏输入cmd，使用npm create vite@latest命令创建项目。先在project name后写上项目的名称，回车后用上下键选中Vue，最后选择项目编写语言，回车项目就创建好了。

2.打开vscode,选择打开文件夹，将刚才创建的项目文件选中，打开后就有了基本的Vue结构。

3.为了正常使用Vue开发前端页面，需要运行下列三个安装命令，

npm install element-plus --save

npm install vue-router

npm install axios

4.在项目中进行简单的的配置，新建一些文件夹和一些js文件，具体配置如下：

（1）viteconfig.js这个 Vite 配置文件为 Vue.js 项目设置了基本的开发环境和代理功能。它确保开发过程中可以自动打开浏览器并处理跨域问题

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],server:{// 配置vite冷启动项目自动使用浏览器访问首页open:true,proxy: {  '/api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},}}
})

(2)api/index 封装了一个简单的 HTTP GET 请求接口。

import http from '../util/http.js';const API={get:(url)=>{return http({url:url,method:'get'})}
};
export default API;

（3）util/http.js定义了一个封装了 axios 请求的函数，通常用于处理 HTTP 请求和响应。它主要负责在每次请求时添加 Authorization 头部，并处理请求的成功和失败情况。

import axios from 'axios';export default function (options) {//配置每次发送请求都从sessionStorage中获取名字叫token的数据,//添加到请求头部的Authorization属性中//Object.assign用于合并对象的数据options.headers = Object.assign({ Authorization: sessionStorage.getItem('token') },options.headers || {});//axios()   返回一个promise对象，用于异步请求//options是一个对象，其中包含了许多用于配置请求的参数，//例如请求的url、请求方法（GET、POST等）、请求头等return axios(options).then(({ status, data, statusText }) => {//该函数在请求成功并返回数据时被调用//status：HTTP状态码，例如200表示请求成功。//data：服务器返回的数据。// statusText：HTTP状态文本，例如"OK"表示请求成功。console.log(data);if (status == 200) {return data;} else {throw new Error(statusText);}}).catch(e=>{return Promise.reject(e);//return Promise.reject(e.message);});
}

（4）main.jsVue 3 项目的启动文件，完成了以下几个步骤：创建 Vue 应用实例。配置路由插件和 UI 组件库。将 Vue 应用挂载到 DOM 上。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'createApp(App).use(router).use(ElementPlus).mount('#app')

（5）router/index.js设置了一个 Vue Router 实例，用于定义应用的路由配置。它使用 hash 模式来处理路由，并定义了一个路由规则，将 /user 路径映射到 ../views/user.vue 组件。

import {createRouter,createWebHashHistory} from  'vue-router'const router=createRouter({history:createWebHashHistory(),routes:[{path:'/user',component:()=>import("../views/user.vue")}]}
);export default router;

(6)使用Element组件（https://element-plus.org/zh-CN/component/overview.html）来开发Vue项目的页面组件。

在vite.config.js 中添加（在4（1）中代码已添加）下两行代码。

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'