vue脚手架创建项目:账号登录(利用element-ui快速开发)(取消eslint强制格式)(修改端口号)

这篇具有很好参考价值的文章主要介绍了vue脚手架创建项目:账号登录(利用element-ui快速开发)(取消eslint强制格式)(修改端口号)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

新手看不懂,老手不用看系列


一、准备工作

创建好项目以后,可以利用idea等工具打开项目。
file -> open然后选择创建好项目文件夹,信任该项目
然后打开.vue后缀的文件需要下载一个插件
vue 脚手架 登录,一些项目,JavaWeb学习笔记,vue.js,ui,前端,tomcat,java,html,学习

1.1 取消强制格式检查

就是把eslint这个相关的配置删除掉(注意保持JSON格式)
vue 脚手架 登录,一些项目,JavaWeb学习笔记,vue.js,ui,前端,tomcat,java,html,学习

1.2 导入依赖,注册依赖

terminal打开命令行输入npm install element-ui下载element-ui的依赖库

vue 脚手架 登录,一些项目,JavaWeb学习笔记,vue.js,ui,前端,tomcat,java,html,学习

导入并注册依赖库

vue 脚手架 登录,一些项目,JavaWeb学习笔记,vue.js,ui,前端,tomcat,java,html,学习

npm install vue-axios故技重施,弄一下axios
vue 脚手架 登录,一些项目,JavaWeb学习笔记,vue.js,ui,前端,tomcat,java,html,学习

二、去element-ui官网找样式写Login组件

找接近自己需要的样式,然后修改即可
vue 脚手架 登录,一些项目,JavaWeb学习笔记,vue.js,ui,前端,tomcat,java,html,学习

下图中那个地方的样式指的是html不是style
下图中那个地方的样式指的是html不是style
下图中那个地方的样式指的是html不是style
vue 脚手架 登录,一些项目,JavaWeb学习笔记,vue.js,ui,前端,tomcat,java,html,学习

2.1 引用局部组件

vue 脚手架 登录,一些项目,JavaWeb学习笔记,vue.js,ui,前端,tomcat,java,html,学习

2.2 运行项目

npm run serve输入这个
vue 脚手架 登录,一些项目,JavaWeb学习笔记,vue.js,ui,前端,tomcat,java,html,学习

三、看一下发现没问题,开始修改前端的代码

<template>
  <div class="hello" style="width: 40%; margin: auto">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="用户名" prop="name">
        <el-input type="text" placeholder="请输入用户名" v-model="ruleForm.name" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="pass">
        <el-input type="password" placeholder="请输入密码" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'Login',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      }else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        name: '',
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        name: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.get("http://localhost:8081/login?username=" + this.ruleForm.name+"&pwd="+this.ruleForm.pass)
              .then(function(resp){
                if(resp.data === "success"){
                  location.replace("http://localhost:8888/")
                }else{
				  alert("账号或密码错误!")
                }
              },function (error){

              })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

四、修改端口号

结合之前做的增删改查项目,我需要开四个端口号实现完整功能,所以修改端口号必须得会。

4.1 修改后端端口号

后端的修改比较简单,只需要
vue 脚手架 登录,一些项目,JavaWeb学习笔记,vue.js,ui,前端,tomcat,java,html,学习
vue 脚手架 登录,一些项目,JavaWeb学习笔记,vue.js,ui,前端,tomcat,java,html,学习

也可以通过修改Tomcat的配置文件,但是没这个方便

4.2 修改前端端口号

好像也不难,这个比较常见,在vue.config.js文件中配置一下端口就好了,以后该前端项目默认启用该窗口。

vue 脚手架 登录,一些项目,JavaWeb学习笔记,vue.js,ui,前端,tomcat,java,html,学习

还有其他的修改方式,但是不太推荐。

虽然感觉这个写的很不好,但还是辛苦我了。文章来源地址https://www.toymoban.com/news/detail-860400.html

到了这里,关于vue脚手架创建项目:账号登录(利用element-ui快速开发)(取消eslint强制格式)(修改端口号)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于基于vue-cli脚手架创建vue项目(图文版)

    目录 一.vue-cli脚手架·概述(来源于官方文档) 二.创建流程 2.1 首先安装node.js,如未安装请移步到:安装node.js 2.2 安装脚手架vue-cli 2.2.1 使用npm install -g @vue/cli命令  2.2.1 使用vue -V 查看版本并检验是否安装成功  2.3 安装vue项目 2.3.1 使用命令 vue create 项目名 ​编辑 2.3.2 这里

    2024年02月07日
    浏览(103)
  • vue-cli 脚手架创建uniapp项目(微信小程序)

    1、全局安装 vue-cli 脚手架(不建议用 5.0 版本,避免报错) 2、脚手架创建项目 3、选择 默认模板 即可 4、编译并启动项目  5、开发者工具,导入项目,注意路径 \\\"项目地址/dist/dev/mp-weixin\\\" 开发的规范 不能直接在开发者工具中修改代码,口诀:vscode做开发,开发者工具做调试

    2024年02月09日
    浏览(57)
  • Mac OS安装Vue CLI脚手架并创建一个基础项目教程

    前后端分离 可以大大地提高开发效率,主流的解决方案为 Vue.js+SpringBoot ,这里主要介绍 Vue在Mac端的入门教程 。软硬件环境为Macbook Air M2+macOS Vantura 13.4.1。 Vue (发音为 /vjuː/,类似 view) 是一款用于 构建用户界面 的 JavaScript 框架,是官方提供的 基于 Webpack 的 Vue 工具链 。它基

    2024年02月04日
    浏览(112)
  • Vue学习计划-Vue2--VueCLi(二)vuecli脚手架创建的项目内部主要文件分析

    1. 补充: 什么叫单文件组件? 一个文件中只有一个组件 vue-cli 创建的项目中, .vue 的文件都是单文件组件,例如 App.vue 2. 进入分析 1. package.json : 项目依赖配置文件: 如图,我们说主要的属性: name : 项目的名称 version : 项目版本 scripts : 脚本入口 serve : 启动项目命令 build :

    2024年02月04日
    浏览(77)
  • nuxt脚手架创建项目

    在初始化时遇到一个依赖找不到的问题,记录一下,如有遇到同样问题的小伙伴,希望能给你们一点指引。 从安装脚手架开始,首先 一:安装nuxt脚手架 1. C盘全局安装: npm i -g create-nuxt-app   安装后可create-nuxt-app -v查看 2. npx create-nuxt-app project-name 3. 会弹出选择安装项 选择项

    2024年02月13日
    浏览(53)
  • 【React】脚手架创建项目

    ◼ 创建React项目的命令如下: ​  注意:项目名称 不能包含大写字母 ​  另外还有更多创建项目的方式,可以参考GitHub的readme 命令: create-react-app 你的项目名称 ◼ 创建完成后,进入对应的目录,就可以将项目跑起来: yarn start ◼ 我们可以通过VSCode打开项目: 注意 se

    2024年01月19日
    浏览(74)
  • Vue脚手架搭建项目

    一、 安装Node.js (一) 注意事项 1. 注意电脑系统版本以及位数,按照自己电脑的环境下载相应的Node.js安装包 2. 确定运行项目的Node.js版本和npm版本,避免后期因为版本不同而产生的一些差异问题 3. 在官网下载Node安装包时请下载稳定版(或不同版本的稳定版),正确区分稳定版

    2024年02月09日
    浏览(51)
  • vue脚手架+elementUI,实现登录用户时的Loading...窗口

    为了全局通用控制此标签,所以我建议把他放到App.vue文件中 说到全局通用,肯定少不了全局变量 发送请求时使用 当我们在login登陆后会跳转到aboutMe组件,所以Login组件会被销毁,这里就体现了全局变量的好处 在此组件加载成功时就证明登录成功了,我们做个2秒缓冲然后直

    2024年02月04日
    浏览(41)
  • 【Vue2+3入门到实战】(17)VUE之VueCli脚手架自定认创建项目、ESlint代码规范与修复、 ESlint自动修正插件的使用 详细示例

    VueCli脚手架自定认创建项目 ESlint代码规范与修复 ESlint自动修正插件 1.安装脚手架 (已安装) 2.创建项目 选项 手动选择功能 选择vue的版本 是否使用history模式 选择css预处理 选择eslint的风格 (eslint 代码规范的检验工具,检验代码是否符合规范) 比如:const age = 18; = 报错!多加

    2024年02月03日
    浏览(58)
  • Vue开发项目入门——Vue脚手架

            Vue脚手架是Vue官方提供的标准化开发工具(开发平台), 它 提供命令行和UI界面,方便创建vue工程、配置第三方依赖、编译vue工程。         特别注意:Vue脚手架是用来方便开发的,但vue脚手架不是最终发布到生产环境的产品。很多人会误认为生产环境也要安装

    2023年04月08日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包