学习笔记-Vue脚手架开发_使用脚手架创建vue项目并搭建axios-CSDN博客

本文链接：https://blog.csdn.net/LearnTech_123/article/details/140706115

一、如何快速搭建一个项目

	前端	后端
环境	Node.js环境	JDK运行环境
框架	vue/cli 脚手架	MAVEN框架
依赖	npm下载依赖	maven下载依赖
仓库	npm仓库	maven仓库

二、安装Node环境

在安装node之前，先安装 nvm ( node.js version management )

什么是nvm？

nvm是node的版本管理工具，可以方便地安装和切换不同版本的node。

为什么使用nvm？

在前端开发当中，有的项目使用的 Node 版本不一样，总不能使用哪个版本就重新安装一下吧，这样就比较麻烦，所以，可以使用 nvm 来管理这些 Node 版本

1. 下载 nvm

Releases · coreybutler/nvm-windows · GitHub

2. 安装nvm

我下载的是压缩安装包

安装完成后的内容

3. 配置环境变量

4. 配置镜像源

默认镜像源下载太慢了，添加镜像源

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

三、使用nvm下载node

1. 查看版本列表

nvm list // 显示已安装的版本（同 nvm list installed）
nvm list installed // 显示已安装的版本
nvm list available // 显示所有可以下载的版本

安装node

nvm install 14.5.0 // 安装14.5.0版本node 或者输入 nvm install 14
nvm install latest // 安装最新版本node

使用指定版本的node

nvm use 14.5.0 // 使用14.5.0版本node

卸载node

nvm uninstall 14.5.0 // 卸载14.5.0版本node

查看可以安装的版本，这里有没有展示出来的版本，并不是只能安装这些版本

2. 安装node

我这里选择最新的版本安装

安装完成

四、安装脚手架

npm install @vue/cli -g    // -g 表示全局安装，其他项目也可以使用这个脚手架

如果安装等待时间过长，可以多试几次或者修改镜像源

设置淘宝镜像源

npm config set registry https://registry.npmmirror.com

查看镜像使用状态

npm config get registry

打开 nvm 的安装目录

五、创建项目

1.切换到安装目录

先使用 cd 命令切换到你需要把项目安装到哪里的目录

2. 使用命令创建项目

vue create 项目名

3. 选择版本

4. 创建完成

5. 启动项目

6 .在游览器中打开

http://localhost:8080/

六、打开项目

1. 项目结构

2. 导入导出模块

修改欢迎界面的组件

3. import、export 的使用

如果函数或对象想让其他组件使用，就需要先 export 出去，这样才能 import 导入七

七、导入依赖

本次以 elementui 前端框架为例

i 是 install 的简写， -S 表示只在这个项目有效

导入依赖成功

在 main.js 引入 elementui

使用 elementui

八、引入路由

1. 引入依赖

因为有版本区别，需要根据自己的vue版本选择依赖的版本

npm i vue-router@3.6.4 -S

查看依赖可用的版本号有哪些

npm view 依赖 versions

2. 创建路由组件

3. 创建路由器

4. 主入口引入路由器

5. 在主界面 App.vue 中使用 router-view 管理路由

router-view 工作原理

当一个Vue应用使用了路由器，`<router-view>`组件会被插到应用的DOM结构中。
它会监听路由的变化，并根据当前激活的路由配置来决定渲染哪个组件。
每个`<router-view>`实例都有自己的命名空间，这意味着可以在一个页面中嵌套多个`<router-view>`，并通过命名视图来控制不同组件的加载位置。

子路由

创建一个主页面

点击菜单的选项后，右边的空白区域显示对应的组件视图，这也用到了路由跳转，所以需要在这个页面中也添加 router-view 标签

<el-main>
    <router-view></router-view>
</el-main>

在路由器中引入路由

点击菜单的选项后，可以看到这个组件视图并没有在主页面的空白处显示

这是因为组件路由和主页面的路由是平级的，当路由跳转后，组件内容是在 App.vue 的 router-view 标签中被渲染的

那如何显示在红色的框里呢？这就使用到子路由了

添加子路由

测试

动态路由

待更新

九、引入axios

引入依赖

npm i axios -S

在登录组件创建登录方法

<template>
    <div>
        <label>登录：<input type="text" v-model="account"></label>
        <label>密码：<input type="password" v-model="password"></label>
        <button @click="Login">提交</button>
    </div>
</template>
<script>
import axios from 'axios';
    export default {
        name: "LoginView",
        data() {
            return {
                account: "",
                password: ""
            }
        },
        methods: {
            Login() {                                       // 改为自己的请求地址
                axios.post("http://localhost:8081/mybatis_war_exploded/Admin/Login", {
                    account: this.account,
                    password: this.password
                }).then(res => {
                    console.log(res);
                    if(res.data.status === 200){
                        alert("登录成功");
                    }else{
                        alert("登录失败");
                    }
                })
            }
        }
    }
</script>

验证