简单搭建vue项目

1.先安装node.js和vite，具体参考：

2.管理员身份运行cmd，跳转到node安装目录：

输入： npm create vite@latest

输入项目名称，选择vue和JavaScript

2.VisualStudioCode打开(可能需要管理员权限)创建的文件夹,点击左侧选中

Crtrl加~打开终端

输入：npm install vue-router  配置路由

输入：  npm install axios  安装axios

输入：npm install element-plus --save  安装element-plus

3.配置文件

src目录下创建router、util、api、views文件夹。

        api文件夹下创建index.js文件，放入代码：

import http from '../util/http.js';

//get:(url)=>{http({url:url,method:'get'})}
//{}代表方法体，没有return就没有返回值了
//get:(url)=>{http(return {url:url,method:'get'})}
export const API={
    //get方法，传入url参数
    get:(url)=>http({url:url,method:'get'})
};
//抛出一个实例
export default API;

        router文件夹下创建index.js文件，放入代码：

import {createRouter,createWebHashHistory} from 'vue-router';

const router=createRouter(
    {
        history:createWebHashHistory(),
        routes:[
            {path:'/easya',component:()=>import("../views/easya.vue")}

        ]
    }
);
export default router;

        util文件夹下创建文件http.js，放入代码：

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"表示请求成功。
            if (status == 200) {
                return data;
            } else {
                throw new Error(statusText);
            }
        }).catch(e=>{
            return Promise.reject(e);
            //return Promise.reject(e.message);
        });
}

        views文件夹下创建文件easya.vue，放入代码做测试：

<script setup>
import {ref,onMounted} from 'vue';
import easyapi from '../api';

</script>

<template>
   
  <h1>hello vue</h1>

</template>
<style>
</style>

src下的main.js代码覆盖为：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'

createApp(App).use(router).use(ElementPlus).mount('#app')

src下的App.vue代码覆盖为：

<script setup>

</script>

<template>
  <!--设置页面占位符-->
  <router-view></router-view>
</template>

运行测试：输入 npm run dev

访问本地路径：http://localhost:5173/easya 访问

终端Ctrl+c退出