从零开始搭建一个vue项目（保姆级教程）

朴灿烈づ我的快乐病毒、 2023-10-13 16:33 52阅读 0赞

**从零开始搭建一个vue项目，从最基础的项目搭建到ui组件引入，从页面路由跳转的配置再到后台接口调用的封装。基本实现一个完整的vue项目demo版，拆分多个板块详细说明，一步步完成整个项目的搭建，其实很简单！在搭建之前，本地电脑上要有node的配置，没有node的话先安装node并进行环境变量的配置，这边就不对node安装配置再做说明了。**

#### 文章目录 ####

*  一、前期说明
 *   *  1.先查看node的安装情况
     *  2.demo项目的版本说明
     *  3.element Plus组件地址
 *  二、创建项目
 *   *  1.使用webstorm创建项目
     *  2.新建成功之后先 npm install 或 yarn install
     *  3.去除自带的HelloWorld页面，新建一个自己的页面
 *  三、导入element Plus的依赖
 *   *  1.依赖导入
     *  2.在main.js中import
 *  四、设置路由跳转页面
 *   *  1.新建另外一个页面
     *  2.依赖导入vue-router
     *  3.新建route.js并做好路由配置
     *  4.页面跳转说明
     *   *  方式一（replace） 跳转之后点击后退不生效
         *  方式二（push） 跳转之后点击后退生效
         *  方式三（router-link）
 *  五、后台接口配置
 *   *  1.依赖导入axios
     *  2.封装数据请求工具类http.js
     *  3.页面对应api接口访问js
     *  4.页面B上测试接口访问
     *  5.请求后台结果查看

## 一、前期说明 ##

### 1.先查看node的安装情况 ###

打开cmd或者开发工具命令框，输入node -v查看版本信息  
![在这里插入图片描述][69338db8529f4fa68e43fef7b956be1f.png]

### 2.demo项目的版本说明 ###

> node版本：14+  
> vue版本：3.2.13  
> ui框架：element Plus

### 3.element Plus组件地址 ###

项目开发使用组件必备，快速开发  
[✈ element Plus组件][element Plus]

## 二、创建项目 ##

### 1.使用webstorm创建项目 ###

这边使用的是webstorm，可以使用webpack、vscode等工具创建项目，按照自己的实际需求来  
第一步，依次点击：【File】->【New】->【Project】  
![在这里插入图片描述][242a030fbe6a4f03852421dc75993260.png]  
第二步，选择【Vue.js】，输入自己项目的名称，点击【Create】生成项目  
![在这里插入图片描述][6d840b0f71434d9eab6e9ee926ad34ed.png]

### 2.新建成功之后先 npm install 或 yarn install ###

![在这里插入图片描述][da2881ebeb54412d9be917e6a40c14e5.png]

项目目录是这样的：  
![在这里插入图片描述][828bc44fa8804f6195f807e29366f04e.png]

这个时候我们可以 npm run serve 或 yarn serve 让项目跑起来，正常跑起来并且能看到这个页面，最基础的项目就建好了！  
![在这里插入图片描述][6ef9261d235b4780b9acee1a9c6d65b4.png]

### 3.去除自带的HelloWorld页面，新建一个自己的页面 ###

删除HelloWorld页面之后，App.vue页面去除HelloWorld的相关配置，如下：  
![在这里插入图片描述][16f66629e6d64fa99fbc442895e3f814.png]

## 三、导入element Plus的依赖 ##

### 1.依赖导入 ###

项目建好之后，就可以配置ui组件了，可以选择npm去装，也可以选择yarn安装，我把两个命令都列出来了

## npm
    npm install element-plus -S

## yarn
    yarn add element-plus -S

安装好之后，在package.json文件夹下就可以看到element Plus的依赖了  
![在这里插入图片描述][c6c24c7b79b5419c9ea16ad22009e47a.png]

### 2.在main.js中import ###

在main.js中import之后，ui组件才正式生效  
![在这里插入图片描述][4b30c532392d4dc7ad50b285955dd8f9.png]

## 四、设置路由跳转页面 ##

### 1.新建另外一个页面 ###

新建pageB.vue页面

### 2.依赖导入vue-router ###

导入router的依赖，下面两种方式二选一

## npm
    npm install vue-router

## yarn
    yarn add vue-router

安装好之后，在package.json文件夹下就可以看到vue-router的依赖了  
![在这里插入图片描述][f5047866502747208b7b51b2765d32cf.png]

### 3.新建route.js并做好路由配置 ###

route.js（位置与main.js平级）

import {
         createRouter,createWebHashHistory } from "vue-router";
    const pageA = () => import("./components/pageA.vue")
    const pageB = () => import("./components/pageB.vue")
    
    const routes = [
        {
         path: "/", redirect: "/pageA" },
        {
        
            path: "/pageA",
            name: "pageA",
            component: pageA
        },
        {
        
            path: "/pageB",
            name: "pageB",
            component: pageB
        }
    ]
    const router = createRouter({
        
        history: createWebHashHistory(),
        routes: routes
    })
    export default router

main.js配置route  
![在这里插入图片描述][55aa89dfcf0f41048a34743e4f2a693a.png]

### 4.页面跳转说明 ###

#### 方式一（replace） 跳转之后点击后退不生效 ####

$router.replace("/pageB");

#### 方式二（push） 跳转之后点击后退生效 ####

$router.push("/pageB");

#### 方式三（router-link） ####

<router-link to="/pageB">跳转</router-link>

pageA.vue

<template>
      <slot>hello page a</slot>
      <el-row class="mb-4">
        <el-button type="primary" @click="toPage1">页面跳转方式1</el-button>
        <el-button type="success" @click="toPage2">页面跳转方式2</el-button>
        <el-button type="danger"><router-link to="/pageB">页面跳转方式3</router-link></el-button>
      </el-row>
    </template>
    
    <script>
    import router from "@/router";
    
    export default {
          
      name: "pageA",
      methods: {
          
        toPage1(){
          
          router.replace("/pageB");
        },
        toPage2(){
          
          router.push("/pageB");
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

页面效果  
![在这里插入图片描述][a659a3261ca9494891126681e2e7070f.png]

## 五、后台接口配置 ##

### 1.依赖导入axios ###

导入axios的依赖，下面两种方式二选一

## npm
    npm install axios --save

## yarn
    yarn add axios --save

安装好之后，在package.json文件夹下就可以看到axios的依赖了  
![在这里插入图片描述][ae93479cf2f540618a21bb31e37b6cb6.png]

### 2.封装数据请求工具类http.js ###

新建utils文件夹，放在utils文件夹下，文件地址：src/utils/http.js

import axios from "axios"
    
    export const http = (options) => {
        
        return new Promise((resolve, reject) => {
        
            // create an axios instance
            const service = axios.create({
        
                baseURL: 'http://localhost:8085/api',  //接口地址访问，根据自己的实际地址配置
                timeout: 30000, //超时时间
            });
    
            // request interceptor
            service.interceptors.request.use(
                (config) => {
        
                    // TODO
                    return config;
                },
                (error) => {
        
                    console.log("出错啦", error);
                    Promise.reject(error);
                }
            );
    
            // response interceptor
            service.interceptors.response.use(
                (response) => {
        
                    return response.data;
                },
                (error) => {
        
                    console.log("err" + error); // for debug
                    return Promise.reject(error);
                }
            );
    
            // 请求处理
            service(options)
                .then((res) => {
        
                    resolve(res);
                })
                .catch((error) => {
        
                    reject(error);
                });
        });
    };
    
    export default http

### 3.页面对应api接口访问js ###

新建api文件夹，放在api文件夹下，需要引入http文件，js文件地址：src/api/pageB.js

import {
         http } from "@/utils/http";
    
    export function testGetNone() {
        
        return http({
        
            url: "/getData",
            method: "get"
        });
    }
    
    export function testGet(dataId) {
        
        return http({
        
            url: "/getDataById?dataId="+dataId,
            method: "get"
        });
    }
    
    export function testPost(params) {
        
        return http({
        
            url: "/getDataPost",
            method: "post",
            data: params,
        });
    }

### 4.页面B上测试接口访问 ###

从页面A跳转到页面B之后，在页面B上做接口访问效果。我这边在本地起了一个后台服务（建议后台服务做好跨域配置），模拟接口访问调用，一共测试了三种方式：①get无参请求 ②get有参请求 ③post请求json传参

<template>
      <slot>hello page b</slot>
      <el-row class="mb-4">
        <el-button type="warning" @click="test01">测试get无参请求</el-button>
        <el-button type="primary" @click="test02">测试get有参请求</el-button>
        <el-button type="success" @click="test03">测试post请求</el-button>
      </el-row>
    </template>
    
    <script>
    import {
          testGetNone,testGet,testPost} from "@/api/pageB";
    
    export default {
          
      name: "pageB",
      methods: {
          
        test01(){
          
          testGetNone()
              .then((res) => {
          
                console.log(res);
              })
              .catch();
        },
        test02(){
          
          let dataId = '1';
          testGet(dataId)
              .then((res) => {
          
                console.log(res);
              })
              .catch();
        },
        test03(){
          
          let params = {
          
            'dataId': '2'
          };
          testPost(params)
              .then((res) => {
          
                console.log(res);
              })
              .catch();
    
        }
      }
    }
    
    </script>
    <style scoped>
    </style>

页面效果  
![在这里插入图片描述][76dbd1d5fdd14b3286126f296cc990fb.png]

### 5.请求后台结果查看 ###

依次点击三个请求，直接console.log看日志  
![在这里插入图片描述][6d3cd440507a4a448bf867280b0fde20.png]  
这样，简单完整的一套vue3.0+element plus的基础框架就搭建完成了！

[69338db8529f4fa68e43fef7b956be1f.png]: https://img-blog.csdnimg.cn/69338db8529f4fa68e43fef7b956be1f.png
[element Plus]: https://element-plus.org/zh-CN/component/button.html
[242a030fbe6a4f03852421dc75993260.png]: https://img-blog.csdnimg.cn/242a030fbe6a4f03852421dc75993260.png
[6d840b0f71434d9eab6e9ee926ad34ed.png]: https://img-blog.csdnimg.cn/6d840b0f71434d9eab6e9ee926ad34ed.png
[da2881ebeb54412d9be917e6a40c14e5.png]: https://img-blog.csdnimg.cn/da2881ebeb54412d9be917e6a40c14e5.png
[828bc44fa8804f6195f807e29366f04e.png]: https://img-blog.csdnimg.cn/828bc44fa8804f6195f807e29366f04e.png
[6ef9261d235b4780b9acee1a9c6d65b4.png]: https://img-blog.csdnimg.cn/6ef9261d235b4780b9acee1a9c6d65b4.png
[16f66629e6d64fa99fbc442895e3f814.png]: https://img-blog.csdnimg.cn/16f66629e6d64fa99fbc442895e3f814.png
[c6c24c7b79b5419c9ea16ad22009e47a.png]: https://img-blog.csdnimg.cn/c6c24c7b79b5419c9ea16ad22009e47a.png
[4b30c532392d4dc7ad50b285955dd8f9.png]: https://img-blog.csdnimg.cn/4b30c532392d4dc7ad50b285955dd8f9.png
[f5047866502747208b7b51b2765d32cf.png]: https://img-blog.csdnimg.cn/f5047866502747208b7b51b2765d32cf.png
[55aa89dfcf0f41048a34743e4f2a693a.png]: https://img-blog.csdnimg.cn/55aa89dfcf0f41048a34743e4f2a693a.png
[a659a3261ca9494891126681e2e7070f.png]: https://img-blog.csdnimg.cn/a659a3261ca9494891126681e2e7070f.png
[ae93479cf2f540618a21bb31e37b6cb6.png]: https://img-blog.csdnimg.cn/ae93479cf2f540618a21bb31e37b6cb6.png
[76dbd1d5fdd14b3286126f296cc990fb.png]: https://img-blog.csdnimg.cn/76dbd1d5fdd14b3286126f296cc990fb.png
[6d3cd440507a4a448bf867280b0fde20.png]: https://img-blog.csdnimg.cn/6d3cd440507a4a448bf867280b0fde20.png