【springboot系列】前端工程之从零开始创建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 clas