首页手记前端开发项目实战：新手入门指南

前端开发项目实战：新手入门指南

标签：

CSS3

概述

本文详细介绍了前端开发的基础知识，包括HTML、CSS和JavaScript的应用，并通过前端开发项目实战，展示了如何搭建个人网站和实现基本交互功能。此外，文章还深入讲解了响应式设计、常用前端框架的使用以及项目部署上线的方法。

前端开发基础入门

HTML与CSS基础

HTML基础

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。HTML文档由元素组成，这些元素被包含在开闭标签之间。标签通常包括一个开始标签和一个结束标签。

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个段落。</p>
</body>
</html>

CSS基础

CSS（Cascading Style Sheets）用于控制HTML文档的样式。它通过选择器来指定要应用样式的元素。

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
            font-family: Arial;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个段落。</p>
</body>
</html>

JavaScript简介

JavaScript是一种广泛使用的编程语言，常用于为网页添加交互功能。JavaScript可以嵌入到HTML文档中，也可以作为外部文件链接到HTML文档。

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个JavaScript网页</title>
</head>
<body>
    <p id="demo">点击按钮来改变文本内容。</p>
    <button type="button" onclick="changeText()">点击这里</button>
    <script>
        function changeText() {
            document.getElementById("demo").innerHTML = "文本已经改变！";
        }
    </script>
</body>
</html>

常用的前端库与框架介绍

jQuery

jQuery是一种流行的JavaScript库，它简化了HTML文档的遍历、事件处理、动画和Ajax交互。

<!DOCTYPE html>
<html>
<head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <button id="myBtn">点击这里</button>
    <p id="demo">这是一个段落。</p>
    <script>
        $(document).ready(function(){
            $("#myBtn").click(function(){
                $("#demo").text("文本已经改变！");
            });
        });
    </script>
</body>
</html>

Bootstrap

Bootstrap是一个流行的前端框架，用于快速开发响应式布局的网页。它包含了许多预定义的样式和JavaScript插件。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>欢迎来到我的网站</h1>
        <p>这是我的第一个段落。</p>
    </div>
</body>
</html>

第一个前端项目：创建个人网站

项目需求分析

功能需求

简单的导航栏
简单的内容页面
简单的联系页面

HTML页面结构搭建

导航栏

<!DOCTYPE html>
<html>
<head>
    <title>我的个人网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="contact.html">联系我</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>欢迎来到我的网站</h1>
        <p>这是我的个人网站。</p>
    </main>
</body>
</html>

使用CSS进行页面美化

<!DOCTYPE html>
<html>
<head>
    <title>我的个人网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="contact.html">联系我</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>欢迎来到我的网站</h1>
        <p>这是我的个人网站。</p>
    </main>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

header {
    background-color: #333;
    color: white;
    padding: 10px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    padding: 20px;
}

基本交互功能实现

<!DOCTYPE html>
<html>
<head>
    <title>我的个人网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="contact.html">联系我</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>欢迎来到我的网站</h1>
        <p>这是我的个人网站。</p>
        <button onclick="showAlert()">点击这里</button>
        <script>
            function showAlert() {
                alert("按钮被点击了！");
            }
        </script>
    </main>
</body>
</html>

项目实例分析

一个完整的个人网站通常包括首页、展示页面和联系页面，每个页面都有各自的功能和样式。下面是一个简单的个人网站实例：

首页

<!DOCTYPE html>
<html>
<head>
    <title>我的个人网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="contact.html">联系我</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>欢迎来到我的网站</h1>
        <p>这是我的个人网站。</p>
    </main>
</body>
</html>

关于我页面

<!DOCTYPE html>
<html>
<head>
    <title>关于我</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="contact.html">联系我</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>关于我</h1>
        <p>这里详细介绍了我的个人简介、兴趣爱好和工作经历。</p>
    </main>
</body>
</html>

联系页面

<!DOCTYPE html>
<html>
<head>
    <title>联系我</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="contact.html">联系我</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>联系我</h1>
        <p>请通过以下方式联系我：</p>
        <p>Email: <a href="mailto:example@example.com">example@example.com</a></p>
        <p>电话: <a href="tel:+1234567890">+1234567890</a></p>
    </main>
</body>
</html>

常见前端开发工具介绍与使用

开发环境搭建

开发环境搭建通常包括安装文本编辑器、浏览器和版本控制系统。这里以VSCode为例。

安装VSCode

VSCode可以在其官方网站上下载并安装。安装完成后，可以通过命令行安装一些常用的插件，如Live Server。

code --install-extension ritwickdey.LiveServer

安装浏览器

这里以Chrome浏览器为例，安装步骤如下：

访问Chrome浏览器的官方网站
下载并安装Chrome浏览器

安装Git

Git可以在其官方网站上下载并安装。安装完成后，可以通过命令行进行一些基本操作，如初始化仓库、提交修改、拉取和推送代码。

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin master

Git版本控制入门

# 初始化仓库
git init
# 添加文件
git add .
# 提交修改
git commit -m "add initial commit"
# 添加远程仓库地址
git remote add origin https://github.com/yourusername/your-repo.git
# 推送到远程仓库
git push -u origin master

使用VSCode编写代码

VSCode支持多种语言和框架，可以快速创建和管理项目文件。它还提供了实时预览功能，方便开发者查看页面效果。

创建项目文件

mkdir my-website
cd my-website
touch index.html
touch style.css
touch script.js

使用实时预览功能

在VSCode中，可以使用Live Server插件来实时预览页面。点击右下角的“Go Live”按钮即可。

使用浏览器开发者工具进行调试

浏览器开发者工具可以帮助开发者调试前端代码。例如，可以查看HTML结构、CSS样式、JavaScript代码，并进行交互测试。

打开开发者工具

在Chrome浏览器中，可以通过按F12或右键点击页面元素并选择“检查”来打开开发者工具。

查看HTML结构

在Elements标签页下，可以看到页面的HTML结构树，可以修改元素的属性或样式。

查看CSS样式

在Elements标签页下，可以看到元素的应用样式，可以修改样式并实时预览效果。

查看JavaScript代码

在Sources标签页下，可以看到页面的JavaScript代码，可以设置断点、查看变量、执行代码。

前端项目进阶：响应式网页设计

什么是响应式设计

响应式设计是一种网页设计技术，可以使网页在不同设备上自动适应屏幕大小。它通过使用媒体查询来判断设备的屏幕宽度，并根据宽度动态调整布局和样式。

媒体查询与CSS框架

媒体查询是一种CSS3特性，可以基于设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式规则。

body {
    background-color: lightblue;
}

@media screen and (max-width: 600px) {
    body {
        background-color: lightgreen;
    }
}

引入CSS框架

CSS框架如Bootstrap提供了一些预定义的样式类和响应式布局，可以快速实现响应式设计。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">左侧内容</div>
            <div class="col-md-6">右侧内容</div>
        </div>
    </div>
</body>
</html>

实现移动端适配

使用媒体查询调整布局

body {
    background-color: lightblue;
}

@media screen and (max-width: 600px) {
    body {
        background-color: lightgreen;
    }
    .container {
        padding: 0;
    }
    .row {
        flex-direction: column;
    }
}

使用CSS框架实现响应式布局

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">左侧内容</div>
            <div class="col-12 col-md-6">右侧内容</div>
        </div>
    </div>
</body>
</html>

前端项目进阶：使用框架构建应用

Vue.js基础介绍

Vue.js是一个流行的前端框架，用于构建用户界面。它具有简单易学和轻量级的特点。

Vue.js基础语法

<!DOCTYPE html>
<html>
<head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

使用Vue.js构建简单的应用

使用Vue.js可以快速构建一个简单的应用，例如一个待办事项列表。

创建待办事项列表

<!DOCTYPE html>
<html>
<head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <input v-model="newTodo" placeholder="添加新事项" v-on:keyup.enter="addTodo">
        <ul>
            <li v-for="todo in todos" v-bind:key="todo">
                <input type="checkbox" v-model="todo.completed">
                <span>{{ todo.text }}</span>
                <button v-on:click="removeTodo(todo)">删除</button>
            </li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                newTodo: '',
                todos: [
                    { text: '学习HTML', completed: false },
                    { text: '学习CSS', completed: false },
                    { text: '学习JavaScript', completed: false }
                ]
            },
            methods: {
                addTodo: function() {
                    this.todos.push({ text: this.newTodo, completed: false });
                    this.newTodo = '';
                },
                removeTodo: function(todo) {
                    this.todos.splice(this.todos.indexOf(todo), 1);
                }
            }
        });
    </script>
</body>
</html>

React基础介绍

React是一个流行的前端框架，用于构建用户界面。它由Facebook开发并广泛使用。

React基础语法

<!DOCTYPE html>
<html>
<head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello, React!</h1>,
            document.getElementById('root')
        );
    </script>
</body>
</html>

使用React构建简单的应用

使用React可以快速构建一个简单的应用，例如一个待办事项列表。

创建待办事项列表

<!DOCTYPE html>
<html>
<head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        class TodoApp extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    newTodo: '',
                    todos: [
                        { text: '学习HTML', completed: false },
                        { text: '学习CSS', completed: false },
                        { text: '学习JavaScript', completed: false }
                    ]
                };
            }
            addTodo = () => {
                const newTodos = [...this.state.todos, { text: this.state.newTodo, completed: false }];
                this.setState({ todos: newTodos, newTodo: '' });
            }
            removeTodo = (index) => {
                const newTodos = [...this.state.todos];
                newTodos.splice(index, 1);
                this.setState({ todos: newTodos });
            }
            handleChange = (e) => {
                this.setState({ newTodo: e.target.value });
            }
            render() {
                return (
                    <div>
                        <input type="text" value={this.state.newTodo} onChange={this.handleChange} />
                        <button onClick={this.addTodo}>添加</button>
                        <ul>
                            {this.state.todos.map((todo, i) => (
                                <li key={i}>
                                    <input type="checkbox" checked={todo.completed} />
                                    <span>{todo.text}</span>
                                    <button onClick={() => this.removeTodo(i)}>删除</button>
                                </li>
                            ))}
                        </ul>
                    </div>
                );
            }
        }
        ReactDOM.render(<TodoApp />, document.getElementById('root'));
    </script>
</body>
</html>

深入了解Vue.js和React

Vue.js组件化开发

Vue.js支持组件化开发，可以将界面拆分成多个组件，便于复用和维护。

<!DOCTYPE html>
<html>
<head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <todo-list></todo-list>
    </div>
    <script>
        Vue.component('todo-list', {
            template: `
                <div>
                    <input v-model="newTodo" placeholder="添加新事项" @keyup.enter="addTodo">
                    <ul>
                        <li v-for="todo in todos" :key="todo">
                            <input type="checkbox" v-model="todo.completed">
                            <span>{{ todo.text }}</span>
                            <button @click="removeTodo(todo)">删除</button>
                        </li>
                    </ul>
                </div>
            `,
            data: function() {
                return {
                    todos: [
                        { text: '学习HTML', completed: false },
                        { text: '学习CSS', completed: false },
                        { text: '学习JavaScript', completed: false }
                    ],
                    newTodo: ''
                }
            },
            methods: {
                addTodo: function() {
                    this.todos.push({ text: this.newTodo, completed: false });
                    this.newTodo = '';
                },
                removeTodo: function(todo) {
                    this.todos.splice(this.todos.indexOf(todo), 1);
                }
            }
        });
        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

React组件化开发

React也支持组件化开发，可以将界面拆分成多个组件，便于复用和维护。

<!DOCTYPE html>
<html>
<head>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const TodoItem = (props) => (
            <li>
                <input type="checkbox" checked={props.completed} />
                <span>{props.text}</span>
                <button onClick={props.onRemove}>删除</button>
            </li>
        );

        class TodoList extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    todos: [
                        { text: '学习HTML', completed: false },
                        { text: '学习CSS', completed: false },
                        { text: '学习JavaScript', completed: false }
                    ],
                    newTodo: ''
                };
            }
            addTodo = () => {
                const newTodos = [...this.state.todos, { text: this.state.newTodo, completed: false }];
                this.setState({ todos: newTodos, newTodo: '' });
            }
            removeTodo = (index) => {
                const newTodos = [...this.state.todos];
                newTodos.splice(index, 1);
                this.setState({ todos: newTodos });
            }
            handleChange = (e) => {
                this.setState({ newTodo: e.target.value });
            }
            render() {
                return (
                    <div>
                        <input type="text" value={this.state.newTodo} onChange={this.handleChange} />
                        <button onClick={this.addTodo}>添加</button>
                        <ul>
                            {this.state.todos.map((todo, i) => (
                                <TodoItem key={i} text={todo.text} completed={todo.completed} onRemove={() => this.removeTodo(i)} />
                            ))}
                        </ul>
                    </div>
                );
            }
        }
        ReactDOM.render(<TodoList />, document.getElementById('root'));
    </script>
</body>
</html>

项目部署与上线

配置项目环境

部署项目前需要确保项目的环境配置正确。例如，如果使用的是Node.js项目，则需要安装和配置Node.js环境。

安装Node.js

Node.js可以在其官方网站上下载并安装。安装完成后，可以通过命令行安装项目依赖。

npm install

将项目部署到GitHub Pages

GitHub Pages是一种免费的静态网站托管服务，可以将项目部署到GitHub Pages。

配置项目根目录

在项目根目录下创建一个名为gh-pages的分支，并将项目的静态文件复制到该分支的根目录下。

git checkout -b gh-pages
cp -r dist/* .
git add .
git commit -m "deploy"
git push origin gh-pages

配置GitHub Pages

在GitHub仓库的设置页面中，选择“GitHub Pages”，并选择gh-pages分支作为源分支。

在线托管平台的选择与使用

除了GitHub Pages，还可以选择其他在线托管平台，如Netlify或Vercel。

使用Netlify部署项目

注册并登录Netlify平台。
点击“新建站点”按钮，选择“从GitHub构建”。
选择要部署的GitHub仓库。
Netlify会自动构建并部署项目。

使用Vercel部署项目

注册并登录Vercel平台。
点击“新建项目”按钮，选择“从GitHub连接”。
选择要部署的GitHub仓库。
Vercel会自动构建并部署项目。

通过以上步骤，可以将前端项目成功部署到线上并进行上线。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕桂英546537

手记
篇

粉丝

31

获赞与收藏

200

关注作者，订阅最新文章

相关文章推荐

Web前端入门指南三

Web前端入门指南一

JavaScript：从新手到忍者修炼入门指南

Web前端入门指南四（终章）

Node.js 前端开发指南

阅读免费教程

CSS3 入门教程

34个小节 62048 725

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

前端开发项目实战：新手入门指南

HTML基础

CSS基础

jQuery

Bootstrap

功能需求

导航栏

首页

关于我页面

联系页面

安装VSCode

安装浏览器

安装Git

Git版本控制入门

创建项目文件

使用实时预览功能

打开开发者工具

查看HTML结构

查看CSS样式

查看JavaScript代码

引入CSS框架

使用媒体查询调整布局

使用CSS框架实现响应式布局

Vue.js基础语法

创建待办事项列表

React基础语法

创建待办事项列表

Vue.js组件化开发

React组件化开发

安装Node.js

配置项目根目录

配置GitHub Pages

使用Netlify部署项目

使用Vercel部署项目

相关文章推荐

阅读免费教程