spring boot + vue 登录系统（一）

最新推荐文章于 2024-08-08 16:10:16 发布

范先生你好

最新推荐文章于 2024-08-08 16:10:16 发布

阅读量147

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46521165/article/details/113008396

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文档主要介绍了如何使用Vue.js和Ant Design Vue搭建一个前端登录系统。首先，通过Vue CLI创建项目，接着引入Ant Design Vue库并进行安装。在main.js中配置后，进一步设置页面路由，创建登录组件Login.vue。在实现过程中遇到了Vetur报错'Cannot find name ‘template’.'和ESLint关于分号的警告。通过调整Vetur和ESLint的设置解决了问题。此外，还分享了代码格式化的快捷键Shift+Alt+F。

摘要由CSDN通过智能技术生成

搭建前端项目

创建vue项目

vue init webpack myuser

默认

? Project name myuser
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "myuser".

......................
.......................
...........................

To get started:

  cd myuser
  npm run dev

然后访问：http://localhost:8080
看到Welcome to Your Vue.js App，项目搭建成功

引入ant-design-vue

安装

cnpm install ant-design-vue --save

main.js 中添加

import Antd, { version } from 'ant-design-vue'

Vue.use(Antd)

添加页面路由

src目录下创建文件夹views
创建登录组件Login.vue

router/index.js中修改

import Login from '@/views/Login.vue'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})