less

babel.config.js

@@ -6,7 +6,8 @@ module.exports = {
     ['import', {
       libraryName: 'vant',
       libraryDirectory: 'es',
-      style: true
+      // 指定样式路径
+      style: name => `${name}/style/less`
     }, 'vant']
   ]
 }

src/style/base.less

@@ -0,0 +1,2 @@
+@text-color: #798777;
+@green:#A2B29F;

src/views/login.vue

@@ -1,14 +1,64 @@
 <template>
-  <div class="login-page">登录页</div>
+  <div class="login-page">
+    <!-- 顶部栏 -->
+    <van-nav-bar title="面经登录" />
+    <!-- 表单 -->
+    <van-form @submit="onSubmit">
+      <van-field
+        v-model="username"
+        name="username"
+        label="用户名："
+        placeholder="请输入用户名"
+        :rules="[
+          { required, message: '请填写用户名' },
+          { pattern, message: '用户名6-15位' }
+        ]"
+      ></van-field>
+      <van-field
+        type="password"
+        v-model="password"
+        name="password"
+        label="密码："
+        placeholder="请输入密码"
+        :rules="[
+          { required, message: '请填写密码' },
+          { pattern, message: '密码6-15位' }
+        ]"
+      ></van-field>
+      <div style="margin: 16px">
+        <van-button round block type="primary" native-type="submit">
+          登录
+        </van-button>
+      </div>
+    </van-form>
+    <!-- 跳转按钮 -->
+    <a class="link" href="#/register">注册账号</a>
+  </div>
 </template>
 
 <script>
+import { UserLogin } from '@/api/user.js'
 export default {
   name: 'login-page',
   data () {
-    return {}
+    return {
+      username: '',
+      password: '',
+      required: true,
+      pattern: /^\w{6,15}$/
+    }
   },
-  methods: {}
+  methods: {
+    async onSubmit (values) {
+      console.log('submit', values)
+      // 发送Ajax请求
+      const res = await UserLogin(values)
+      console.log(res)
+      // 提示+跳转
+      this.$toast.success('登录成功')
+      this.$router.push('/')
+    }
+  }
 }
 </script>
 

src/views/register.vue

@@ -27,7 +27,7 @@
       ></van-field>
       <div style="margin: 16px">
         <van-button round block type="primary" native-type="submit">
-          提交
+          注册
         </van-button>
       </div>
     </van-form>

vue.config.js

@@ -1,4 +1,20 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  css: {
+    loaderOptions: {
+      less: {
+        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
+        lessOptions: {
+          modifyVars: {
+            // 直接覆盖变量
+            'text-color': '#111',
+            'border-color': '#eee',
+            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
+            hack: 'true; @import "@/style/base.less";'
+          }
+        }
+      }
+    }
+  }
 })