【springboot系列】前端工程之从零开始创建vue工程

最新推荐文章于 2024-11-09 23:55:03 发布

原创

最新推荐文章于 2024-11-09 23:55:03 发布 · 748 阅读

收录于

当前文章被以下社区和专栏收录：

本文详细介绍了如何从零开始创建Vue工程，包括两种创建项目的方法：命令行手动安装与图形化界面。文章重点在于手动安装过程，通过`vue create`命令创建名为springboot-vue的项目，并选择了手动配置，添加了路由、Vuex和CSS组件。接下来，文章转向了编写登录页面，指导读者如何在WebStorm中导入项目并创建Login.vue页面。

文章目录

从零开始创建vue工程

从零开始创建vue工程

一、创建vue项目

1、默认环境已装好，以下三个命令可执行。
在这里插入图片描述

1、方案一

1、创建项目命令如下：其中我的项目名称就叫springboot-vue

vue create springboot-vue

2、选择手动安装：
添加路由组件、vuex、css展示组件等

1、手动模式选择组件
2、sass
3、代码规范airbnb
4、保存时lint

在这里插入图片描述

2、方案二

vue ui

在这里插入图片描述

图形化界面比较简单，略。
关注以下几个代码：

二、写一个登录页面

1、将自动生成的项目导入webstorm
2、新建一个Login.vue页面
在这里插入图片描述
3、直接上代码：

<template>
    <div class="login-page">
        <!--    背景图片    -->
        <div id="bg"></div>
        <!--    提交表单    -->
        <form class="login-form">
            <div class="login-title">账号登录</div>
            <input type="text" class="input-content" placeholder="请输入用户名" v-model="username">
            <div v-if="username==''">
                <div class=