Vue之登录基础交互

摘要:
下一步是在python中实现后端。涉及以下知识点:vue、vueCLI、elementUI、ES Promise用法、axios。当然,npm和webpack也是现代前端的必备技能。太碎了,饺子馅。

1.把VueCLI装起来 https://cli.vuejs.org/zh/

2.vue create hello-world 执行后,很自然就创建了一个实例项目。npm run dev后 打开如下界面:

Vue之登录基础交互第1张

3.安装elementUI组件:npm i element-ui -S (https://element.eleme.cn/#/zh-CN/component/installation

4.加载组件至项目,打开main.js 加入下面三行代码

Vue之登录基础交互第2张

5.打开HelloWorld.vue,在template段下面代码:

Vue之登录基础交互第3张

6.打开HelloWorld.vue,在script段下面代码:

Vue之登录基础交互第4张

7.cmd下运行 npm run serve后,呈现如下效果:

Vue之登录基础交互第5张

8.基本样子已经呈现出来,接下来改造任务是 加入请求服务端代码,初步思路是,点击登录按钮后,弹出一个对话框,显示出远端服务器返回的标准北京时间json 

9.安装axios组件并在main.js上添加此组件引用:npm install --save axios vue-axioshttp://www.axios-js.com/zh-cn/docs/vue-axios.html

 Vue之登录基础交互第6张

 10.再次打开helloworld.vue ,定位到script代码段,略微修改如下(网址是苏宁的获取标准北京时间的webapi):

Vue之登录基础交互第7张

 11.如果网址能正确访问会呈现如下效果:

Vue之登录基础交互第8张

12.如果远端网址无法访问,则呈现:

Vue之登录基础交互第9张

13.这已经完成了,最为基础的前后端交互,当然后端api依然是借助公开地址。下一步计划,将后端用python实现。

14.前端的知识点成碎片化分布,撰写此文,仅用来汇总知识点。涉及了如下知识点:

vue,vueCLI,elementUI,ES的Promise用法,axios。当然npm,webpack这也是现代前端必备技能。真是太碎了,饺子馅。

免责声明:文章转载自《Vue之登录基础交互》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Mybatis中接口和对应的mapper文件位置配置深入剖析trove命令行使用下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

初学vue出现空格警告的原因及其解决办法

初学vue自己新建一个vue项目来做学习demo。不过在编写代码时一直出现空格不规范的警告。严重影响初学者的热情。错误如下图所示。(这样的错误很多,但大概翻译成中文的意思都是说空格使用不规范。) 这是因为你使用 ESLint,用来规范代码风格的。你的 Webpack 配置中大概是使用了 eslint-loader。在多人协作或大项目中推荐使用,不想要就在 ...

vue前端工程化

今日目标 1.能够了解模块化的相关规范 2.了解webpack3.了解使用Vue单文件组件4.能够搭建Vue脚手架5.掌握Element-UI的使用 1.模块化的分类 A.浏览器端的模块化 1).AMD(Asynchronous Module Definition,异步模块定义)代表产品为:Require.js2).CMD(Common Module D...

Vue实现二级菜单的显示与隐藏

1 <html> 2 <head> 3 <title>Vue实现二级菜单的显示与隐藏</title> 4 <script src="vue.js"></script> 5 <style type="text/css"> 6 *{ 7...

记录 vue新建项目+electron打包桌面软件

1.node.js 安装好的情况下 安装脚手架vue-cli npm install -g @vue/cli (安装失败的话给"@vue/cli" 加上引号试试) 2.创建项目    vue create 项目名 (然后是一堆英文选项是否生成router之类的。参考下面博客) 3.进入项目根目录(electron-vue-helloworld),然后执行...

vue初级学习--组件的使用(自定义组件)

一、导语   突然冒出四个字,分即是合,嗯,有点道理。。。。。。。。。。。。。。。。。。。。。。。 二、正文   在搞的仿淘宝demo,之前加入购物车是与商品详情一块的,今天把它单独拆出来,复用性高点,那这样的话,就涉及到了组件开发了。vue的组件注册是超级超级容易的,接下来就简短的说说组件吧,直接上demo了。   1、理解组件     官方对于组件的解...

vue create与vue init的区别

1.vue ui 图形化界面 2. vue create 是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与cue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档。 使用方式:vue create 项目名称 3. vue init vue init 是vue-cli2.x的初始化方...