vue(vue-cli脚手架)单页面工程, 配置添加其它html

仿照index.html 注入main.js的方法

具体原理, 可以去网上查下, 说的都很详细, 没有什么问题

 

• webpack.base.conf.js 中添加新页面的注入入口(这里以login为例) 

配置好入口名称, 与对应的js文件.

• webpack.dev.conf.js 中添加新页面配置

 

build时, 对应webpack.prod.conf.js也作相应修改

 

 

• 添加文件login.js, login.html目标(我在login.js里使用了login.vue), 根据上面的配置路径.

 

• 基本工作就完成了, 下面就是写代码了. 

下面贴上我的代码, 供参考(学习阶段使用, 勿笑 :)

Login.vue放在了src/components/目录下, 内容如下

<template>
    <div id="login">
        <el-container style="height: 90vh;min-height:90vh;" direction="vertical">
            <el-container direction="vertical">
                <el-row type="flex" align="middle" style="height:90vh;">
                    <el-col :span="24">
                        <div style="height: 400px;width: 100%;" class="login-bg">
                            <div class="login-form">
                                <div class="login-header">
                                    <img class="header-img" src="/static/login-header.png"/>
                                </div>
                                <el-form :rules="formValid" :model="formData" ref="formData">

                                    <!-- 帐户 -->
                                    <el-form-item prop="username">
                                        <el-input type="text" class="login-input" v-model="formData.username" auto-complete="off">
                                            <i slot="prefix" class="el-input__icon iconfont icon-zhanghu"></i>
                                        </el-input>
                                    </el-form-item>

                                    <!-- 密码 -->
                                    <el-form-item prop="password">
                                        <el-input type="password" class="login-input" v-model="formData.password" auto-complete="off">
                                            <i slot="prefix" class="el-input__icon el-icon-view"></i>
                                        </el-input>
                                    </el-form-item>

                                    <!-- 提交 -->
                                    <el-form-item>
                                        <el-button @click.native.prevent="submit" class="commit" type="primary" icon="el-icon-upload" round>Login</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-container>
            <el-footer height="10vh"></el-footer>
        </el-container>
    </div>
</template>

<script>
    import API from "@/common/common.js";

    export default {
        name: "Login",
        data() {
            return {
                formValid: {
                    username: [
                        {required: true, message: '请输入账号', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                },
                formData: {
                    username: "",
                    password: "",
                    "remember-me": true
                }
            }
        },
        methods: {
            submit: function () {
                this.$refs.formData.validate((valid) => {
                    if (valid) {
                        //登陆请求
                        API.ajax('/user/login.do', {
                            data: this.formData,
                            method: 'post'
                            // success: (resp) => {
                            //     this.$store.commit("user", resp);
                            //     //跳转
                            //     this.$router.push({path: '/home'});
                            // }
                        });
                    }
                });
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #login {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    body {
        margin: 0px;
        background-color: #E9EEF3;
    }

    .login-bg {
        background: url(/static/login-bg.png) no-repeat;
    }

    .login-form {
        background-color: white;
        border-radius: 2%;
        border: 2px solid rgba(200, 200, 200, 0.5);
        height: 360px;
        width: 250px;
        position: relative;
        top: 20px;
        margin-right: 250px;
        float: right;
        opacity: 0.6;
    }

    .login-header {
        padding: 15px 0 15px 0;
        height: 100px;
    }

    .login-header .header-img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }

    .login-form .login-input {
        width: 80%;
    }

    .login-form .commit {
        width: 80%;
    }
</style>