Vue的简单学习_后台管理系统

颜大哦

已于 2024-07-09 10:16:23 修改

阅读量1k

点赞数 26

CC 4.0 BY-SA版权

文章标签： vue.js 学习前端

于 2024-03-05 16:37:02 首次发布

本文链接：https://blog.youkuaiyun.com/jinming215/article/details/136020110

该博客主要介绍Vue项目的环境安装、创建及启动，包括Babel转码器、项目文件说明等。还详细讲解了ElementUI这一网站快速成型工具，涵盖其安装、快速上手，以及登录页、首页等组件的使用，同时提及axios交互、导航栏、表格组件数据交互与筛选等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、环境安装以及项目创建

1. 项目创建说明

Babel:转码器
historyMode：在访问的时候取消#号
hashMode：在访问的时候有#号

2. 启动项目

退出项目ctrl+c

3. 项目说明

node_modules:用来存放包管理工具下载的安装包文件夹
public:公共资源（图表，index html文件）
src:源文件
配置文件，说明文档
package.json:项目依赖文件
1. build：项目打包命令
2. ^3.6.5:版本不能低于3.6.5，不能修改大版本号
3. ~5.0.0：不能低于5.0.0:，不能修改大版本号和次要版本号
4. dependencies与devdependencies:依赖；dev(开发模式下的依赖)
5. 添加配置，在文件下添加vue.cofig.js（跨域后添加代理，追加任务）
```
module.exports = {
devserver:{
port:8088,
host:"localhost",
open:'true'//配置浏览器自动访问
}
}
```

二、elementUI（网站快速成型工具）

main.js
1. ./同级；…/上一级；@/根目录下
2. 不写来源于依赖文件
3. render:渲染app
路由之间的关系（结构的分配）
1. 定义views下的各个文件夹和文件
2. 配置路由

1. 安装

npm i element-ui -S

2.快速上手

1. import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3.组件

4. 登录页

引入Form表单
ruleForm：数据
rules：校验规则
js中单独定义数据方法
定义data时为什么添加return返回（v-mode）
具体校验：（提示信息，长度）

登录按钮
需要再methods中添加事件:页面跳转
router和route有什么不同

<template>
<div class="login">
    <p>简简单单的学学前端</p>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!-- 姓名 -->
        <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
            <el-input type = "password" v-model="ruleForm.password"></el-input>
        </el-form-item>

        <!-- 登录 -->
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
    </el-form>
</div>

```

script代码

export default{
    data(){
        return{
            ruleForm:{ //初始化账号密码
                name:"",
                password:"",
            },
            rules:{ // 验证
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    methods:{
        submitForm(){
            this.$router.push("/home")
        }
    }
}