Vue Example Login 项目教程

最新推荐文章于 2024-08-12 08:55:47 发布

施京柱Belle

最新推荐文章于 2024-08-12 08:55:47 发布

阅读量379

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00175/article/details/141083053

版权

Vue Example Login 项目教程

vue-example-login🔥A login demo for Vue.js.项目地址:https://gitcode.com/gh_mirrors/vu/vue-example-login

1、项目的目录结构及介绍

项目的目录结构如下：

vue-example-login/
├── component/
│   ├── Login.vue
│   ├── UserInfo.vue
├── css/
├── images/
├── js/
├── LICENSE
├── README.md
├── index.html
├── package.json
├── webpack.config.js
└── .gitignore

目录介绍：

component/: 包含项目的 Vue 组件文件，如 Login.vue 和 UserInfo.vue。
css/: 存放项目的样式文件。
images/: 存放项目的图片资源。
js/: 存放项目的 JavaScript 文件。
LICENSE: 项目的许可证文件。
README.md: 项目的说明文档。
index.html: 项目的入口 HTML 文件。
package.json: 项目的依赖管理文件。
webpack.config.js: 项目的 Webpack 配置文件。
.gitignore: 指定 Git 忽略的文件和目录。

2、项目的启动文件介绍

项目的启动文件是 index.html，它包含了 Vue 应用的挂载点和基本的 HTML 结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Example Login</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app"></div>
    <script src="js/app.js"></script>
</body>
</html>

关键点：

<div id="app"></div>: Vue 应用的挂载点。
<script src="js/app.js"></script>: 引入主要的 JavaScript 文件，该文件负责初始化和启动 Vue 应用。

3、项目的配置文件介绍

项目的配置文件主要是 webpack.config.js，它定义了如何打包和构建项目。

const path = require('path');

module.exports = {
    entry: './js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    }
};

关键点：

entry: 指定入口文件为 ./js/app.js。
output: 指定输出目录为 dist，输出文件名为 bundle.js。
module.rules: 定义了各种文件的加载器，如 .vue 文件使用 vue-loader，.js 文件使用 babel-loader，.css 文件使用 style-loader 和 css-loader。
resolve.alias: 定义了 Vue 的别名，确保使用的是完整版的 Vue。
resolve.extensions: 定义了可以省略的文件扩展名。