用户登录注册案例（Vue路由）

瑾寰

已于 2023-05-23 20:36:33 修改

阅读量2.2k

点赞数 5

文章标签： vue.js git npm

于 2023-05-06 15:40:33 首次发布

本文链接：https://blog.csdn.net/qq_68383591/article/details/130525073

版权

一、准备工作

1.安装git-bash

安装命令行工具Git一路next即可（建议不要放C盘）

2.安装nodeJS环境

NodeJS安装，注意版本，一路next即可（建议不要放C盘）

检验是否安装成功：单击右键--->打开git-bash--->出现小黑窗--->输入 node -v

3.git-bash切换成淘宝镜像

单击右键--->打开git-bash--->出现小黑窗

切换淘宝镜像： npm config set registry https://registry.npm.taobao.org/

查看镜像源： npm config get registry

二、初始化项目

1.创建date0425文件夹(路径随意，不过要记住)

2.项目初始化

打开Git bash（进入到date0506文件夹中，单击右键--->打开git-bash--->出现小黑窗（小黑窗不要关闭，后面还需要在小黑窗中输入命令））

输入 npm init -y

会生成一个package.json的工程文件，该文件不允许出现注释文本

三、安装vue框架和路由

在小黑窗中输入：

npm install vue@2.6.14

npm i vue-router@3.1.x

四、安装webpack及其相关的开发工具

1.在小黑窗中输入：

npm i webpack@4.39.x -D

npm i webpack-cli@3.3.x -D

npm i webpack-dev-server@3.8.x -D

npm i html-webpack-plugin@3.2.x -D

2.在根目录下，创建webpack.config.js文件

打开VSCode---->文件---->打开文件夹--->找到date0506

3.向webpack.config.js文件添加内容

const htmlWebpackPlugin = require('html-webpack-plugin')
const vueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry:'./main.js',
    output:{
        path:__dirname,
        filename:'app.js',
    },
    resolve:{
        alias:{
            'vue':'vue/dist/vue.js'
        }
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                use:'vue-loader'
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            // {
            //     test:/\.scss$/,
            //     use:['style-loader','css-loader',sass-loader]
            // },
            {
                test:/\.(jpg|png|jpeg|bmp|gif)$/,
                use:'url-loader'
            },
            {
                test:/\.(eot|ttf|woff|woff2|svg|otf|ttc)$/,
                use:'file-loader'
            },

        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:'index.html'
        }),
        new vueLoaderPlugin()
    ]
}

4.在date0504目录中，创建main.js和index.htm

① index.html中的内容为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

②main.js的内容为

// 引入MUI框架
import './lib/mui/css/mui.css'

// 引入vue框架
import Vue from 'vue'

// 引入路由
import VueRouter from 'vue-router'

// 安装路由
Vue.use(VueRouter)

// 引入主组件
import app from './App.vue'

// 引入路由的配置
import router from './router.js'


new Vue({
    el:'#app',
    render:(c) =>c(app),
        // 渲染页面的主主键
        
    router
})

五、安装vue文件的加载器

1.在小黑窗中输入：

npm i vue-loader@15.7.x vue-template-compiler@2.6.x -D

六、安装加载css文件css-loader,style-loader

1.在小黑窗中输入：

npm i css-loader@3.2.x --save-dev

npm i style-loader@1.0.x --save-dev

七、安装sass

1.在小黑窗中输入：

npm install sass-loader@7.2.x -D

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ -D

八、引入UI框架

1.在date0506目录下创建文件夹lib，将mui放进去

九、安装loader加载图片和其他字体文件

1.在小黑窗中输入：

npm i url-loader@2.1.x -D

npm i file-loader@4.2.x -D

十、创建页面

（HTML入口：挂载点，逻辑入口：引入项目的依赖，主组件：加载和显示其他组件）

1，首页index.html（前面已经创建了并且添加了内容）

2,在main.js中引入项目所需要的文件和框架（前面已经创建了并且添加了内容）

3.创建主组件：App.vue

4.创建路由配置文件：router.js

5.App.vue中的内容为

<template>
    <div>
        <div class="btns">
            <router-link to="/login" tag="button">登录</router-link>
            <router-link to="/register" tag="button">注册</router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<style>
.btns{
    display:flex;
}
.btns button{
    width:50%;
}
.router-link-exact-active,.router-like-active{
    background:#007AFF;
    color:white;

}
</style>

<script>
</script>

6.router.js中的内容为

//引入路由
import VueRouter from "vue-router"
//引入登录和注册组件
import Login from "./components/Login.vue"

import Register from "./components/Register.vue"

//暴露路由模块
export default new VueRouter({
    routes:[
        {
            path:'/',
            redirect:'/login'  //路由重定向
            
        },
        {
            path:"/login",
            component:Login
        },
        {
            path:"/register",
            component:Register
        }
    ]
})

7.在date0506目录下创建components目录，然后在components目录下分别创建Login.vue和Register.vue

8.Login.vue的内容为

<template>
    <div>
        <form class="mui-input-group">
            <div class="mui-input-row">
                <label>用户名</label>
                <input type="text" class="mui-input-clear" placeholder="请输入用户名">
            </div>
                <div class="mui-input-row">
                <label>密码</label>
                <input type="password" class="mui-input-password" placeholder="请输入密码">
            </div>
                <div class="mui-button-row">
                <button type="button" class="mui-btn mui-btn-primary" >确认</button>
                
            </div>
    </form>
    </div>
</template>

<style scoped>

</style>

<script>

</script>

9.Register.vue的内容为

<template>
    <div>
        <form class="mui-input-group">
            <div class="mui-input-row">
                <label>用户名</label>
                <input type="text" class="mui-input-clear" placeholder="请输入用户名">
            </div>
            <div class="mui-input-row">
                <label>性别</label>
                <input type="radio" name="sex">女
                <input type="radio" name="sex">男
            </div>
            <div class="mui-input-row">
                <label>密码</label>
                <input type="password" class="mui-input-password" placeholder="请输入密码">
            </div>
            <div class="mui-button-row">
                <button type="button" class="mui-btn mui-btn-primary" >确认</button>
                
            </div>
        </form>
    </div>
</template>

<style scoped>

</style>

<script>

</script>