vue.js简单登录界面访问mysql_Vue学习之路之登录注册实例代码

根据Vue.js + Element UI + MongoDB进行开发

P1 安装Vue-CLI

利用Vue.js提供的一个官方命令行工具

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖，走你

$ cd my-project

$ npm install

$ npm run dev

Vue.js 主要目录结构

.

├── build # 一些webpack的文件，配置参数什么的，一般不用动

├── config # vue项目的基本配置文件

├── index.html # 主页

├── node_modules # 项目中安装的依赖模块

├── package.json # 项目文件，记载着一些命令和依赖还有简要的项目描述信息

├── README.md

├── server # 自己创建的后端文件，可以忽视

├── src # 源码文件夹，基本上文件都应该放在这里

├── App.vue # App.vue组件

├── assets # 资源文件夹，里面放一些静态资源

├── components # 这里放的都是各个组件文件

├── main.js # 入口文件

└── router # vue-router 路由配置

├── static # 生成好的文件会放在这个目录下

├── test # 测试文件夹，测试都写在这里

├── .babelrc # babel编译参数，vue开发需要babel编译

├── .gitignore

└── .eslintignore

完成后就可以在/src/components/*.vue模板中写代码，ctrl+s保存后页面会自动刷新，若无效请检查端口是否被占用

P2 安装Element UI

npm i element-ui -S

完成后在main.js中添加如下代码完整引入Element,就能在/src/components/*.vue模板中使用Element UI的组件

// main.js

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

P3 登录注册功能