用Vue实现一个登陆界面

最新推荐文章于 2025-02-08 23:48:52 发布

aobu511721

最新推荐文章于 2025-02-08 23:48:52 发布

阅读量4.6k

点赞数 1

文章标签： javascript 开发工具 python ViewUI

原文链接：http://www.cnblogs.com/coderWj/p/8639420.html

版权

本文介绍如何使用Vue.js创建一个登录界面。通过搭建Vue开发环境，详细讲解项目目录结构，展示Login.vue和Main.vue组件的代码实现，以及运行项目的步骤。最后，给出登录界面的截图并进行简单总结。

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

总是从园子里索取，所以也想写点东西，欢迎大家批评指教。

最近由于一些原因，开始学习vue的项目开发，对于我这样一个刚刚入行的菜鸟级c#程序员，可真踩了不少坑，

接下来,废话少说。

一、搭建环境

本人win10开发环境（资深大佬勿喷，我没有mac，也没有安装linux环境）

1.首先安装node环境，本项目中主要是用来做包管理。传送门（https://nodejs.org/zh-cn/）

2.安装vue

　　打开控制台输入，并等待完成

npm insatll vue -g

3.安装vue-cli（脚手架）,用来构建项目。传送门（https://segmentfault.com/a/1190000008644830）

npm install -g vue-cli

我们这里使用webpack作为脚手架,初始化我们的项目(注意，项目名必须是小写)

vue init wepcak my-project

1.目录如下（Visual Studio Code 个人认为挺好用的）

我们现在可以进入项目目录(根据自己的项目名)

cd my-project
npm run dev // 这样就可以看到我们刚刚构建的项目，相信你也和我一样懵逼吧。

2.进行我们的改造，接下来才是正题（Code Show）

我们的源码主要是在src目录下,(删除该目录下原始文件)

目录情况如下

|-------src

| |-- components

| | |-- Main.vue

| | |-- Login.vue

| |-- main.js

|------- index.html　　（提示，在根目录下）