vue2.0前端框架搭建+ElementUI

2023-09-11 10:19| 来源: 网络整理| 查看: 265

vue2.0是我们国人研发的前端框架，是基于ECAMScript6.0以上的版本进行开发的，之前我们使用的Javascript是5.0版本，2015年推出了ECAMScript6.0（简称ES6），之后每年升级一个版本，所以VUE框架使用的是ES6以上的标准，现在我开始教大家搭建VUE2前端框架。首先下载NodeJS，在浏览器中输入：nodejs.cn，进入下载页面在这里插入图片描述 1.选择合适的版本进行安装输入命令 nodejs和npm都安装成功!! 2.安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装全局vue-cli脚手架 npm install -g @vue-cli 4.初始化vue2框架创建工作空间目录，如：D:\space 进入目录，执行命令：vue init webpack demo[项目名]，等待一段时间下载文件，然后进行选择，选择标准安装，不选择安装npm等其他插件，完成后执行cd 项目名，再执行npm install，安装其他组件，等待完成后，整个Vue项目的框架搭建就完成了。 5.下载开发软件进行Vue开发软件推荐使用vscode，官网地址：https://vscode.en.softonic.com/，关于vscode的使用大家可以搜索相关的教程，下一步进行vue代码讲解。 6.vue项目结构目录在这里插入图片描述大家需要了解的有：vue文件，路由器，依赖包，vue文件就是一个相当于html的页面，路由器在router文件夹下，管理页面跳转的url地址，package.json是vue的依赖包，所有相关插件都自动添加到package.json里 7.安装elementUI 之前说过，vue是基于ES6.0，那么javascript在这里就没有再使用了，现在我们需要安装elementUI，这个是页面控件的展示插件，打开vscode，在终端输入：npm i element-ui -S，打开main.js文件，引入代码：

import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI) new Vue({ el: '#app', router, components: { App }, template: '' })

8.修改APP.vue文件上面的main.js代码引入了app.vue这个文件，那么我们打开app.vue这个文件，修改代码如下：

这段代码是使用路由器，之前说了，路由器是管理页面的，那这里就是引入了路由页面，上面代码Vue对象中el属性是需要引用的html元素，在这里是id为app的元素里的代码才有用 9.路由器路由器管理所有访问路径和页面代码，这里我们引用了两个vue文件(一个html文件就是一个Vue)Register.vue和Message.vue，放在components文件夹下，修改路由器配置文件

import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Register' import Message from '@/components/Message' Vue.use(Router) Vue.use(Message) Vue.use(Register) export default new Router({ routes: [ { path: '/', name: 'Register', component: Register }, { path: '/message', name: 'Message', component: Message } ] })

这样我们就能访问到Register.vue和Message.vue 10.vue代码及elementUI标签 vue既然相当于html文件，那么它的组成还是html元素，不过不是写在body元素中，写在template元素中，也不用开头。然后是和elementUI完全整合

{{ msg }} 提交

css代码和Javascript代码仍然可以使用，我们使用的是ES6以上规范的Javascript代码，ElementUI表单验证是这样的使用的

export default { name: 'Register', data() { return { msg: '欢迎进入注册登录系统', list: ['上网', '唱歌', '游泳', '健身', '表演'], userForm: { username: '', password: '', sex: '', interestArray: [], birth: '' }, userRules: { username: [ { required: true, message: '用户名不能为空', trigger: 'blur' }, { pattern: /^[a-zA-z]{1}[a-zA-z\d]{5,11}$/, message: '用户名由数字或字母组成6-12位，且首位必为字母', trigger: 'blur' }, { validator: checkUsername, trigger: 'blur' } ], password: [ { required: true, message: '密码不能为空', trigger: 'blur' }, { pattern: /^[a-zA-z\d]{6,12}$/, message: '密码由数字或字母组成6-12位', trigger: 'blur' } ], sex: [{ required: true, message: '请选择性别', trigger: 'blur' }], interestArray: { required: true, message: '兴趣爱好至少选择一样', trigger: 'blur' }, birth: { required: true, message: '出生年月不能为空', trigger: 'blur' } } } }, submit () { this.$refs['userForm'].validate((valid) => { if (valid) { //路由器跳转页面 this.$router.push('/Message') } else { return false } }) } } }

有关ElementUI更多使用可以查看官方文档：Element官方地址以下是ElementUI实现效果展示在这里插入图片描述登录页面展示这里登录使用提交方式为http方式提交到后台，官方推荐使用axios，个人认为http方式提交和axios提交在代码编写上没有本质区别

this.$http.post('/api/user/login', this.loginForm).then((resp) => { //resp.data返回数据 var msg = resp.data.msg if (msg === 'success') { this.$router.push('/main') } else { //消息提示 type:error 错误提示 ,message 消息内容 this.$message({type: 'error', message: msg}) } })

11.启动项目终端进入项目路径后输入：npm run dev 如果显示以下信息表示项目成功启动在这里插入图片描述直接访问 http://localhost:8080 12.结束语希望有更多的程序员能使用VUE和ElementUI，您一定会觉得vue开发更简单更省事，看完本篇一定对您有很大的帮助！! 关于后台代码见下一篇博文Springboot后端

【本文地址】

公司简介

联系我们