如何用HBuilder快速搭建一个Vue前端项目

https://yzjstudy.xyz 

 

第一步 选中Vue3框架创建项目，新建的项目目录如下

 第二步，1.往src下放封装好的api包，用于封装 axios请求来进行网络请求

(    http.js文件    )

import axios from "axios"; // 引用axios

axios.defaults.baseURL = "https://localhost:5001"; //'http://localhost:8080';
axios.defaults.headers.post['Content-Type'] ='application/json';

//get请求
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
                params: params,
            })
            .then((response) => {
                resolve(response);
            })
            .catch((err) => {
                reject(err);
            });
    });
}

//post请求
export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data)
        .then(
            (response) => {
                resolve(response);
            })
            .catch((err) => {
            reject(err);
        });
    });
}

(    index.js文件    )

// index.js 调用接口的方法
// 引入封装的get/post请求方法
import {
get,
post
} from './http.js'

export const getData = (url, m) => get(url, m)
export const postData = (url, m) => post(url, m)

 

2.往src下放router包，index.js中进行路由配置，处理页面跳转

import {
    createRouter,
    createWebHistory,
} from 'vue-router'


import Main from '../views/Main.vue'

const routes = [{
        path: '/',
        name: 'Login',
        component: Login
    },
    {
        path: '/main',
        name: 'main',
        component: Main,
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

 第三步：找到App.vue文件，清空页面，填入router-view标签

 

第四步：npm 安装

1.安装element-plus

npm install element-plus --save

2.安装vue-router

npm install vue-router --save

3.安装axios

npm install axios --save

第五步：配置main.js，创建Vue 并进行组件挂载

 

 第六步：新建views文件夹用来存放所有的vue文件，即所有的布局页面

 

第七步：运行项目，可以 《运行》---->《运行到终端》---->《npm run dev》

　　　　也可以直接终端命令行 npm run dev（更加推荐）