美文网首页
VUE学习之路四 创建第一个界面

VUE学习之路四 创建第一个界面

作者: 圣艾修 | 来源:发表于2019-02-13 16:42 被阅读4次

创建Login界面


实现步骤:

  • 步骤1:新建login/Login.vue文件
  • 步骤2:修改路由
  • 步骤3:运行项目

详细步骤

  • 在stc下新建pages目录,并在pages下新建login/Login.vue,并在界面内写下一句话:这是手动创建的Login界面,如下图:


    1.png
  • 修改路由:
    router/index.js 中的HelloWord为Login。
2.png
  • 在命令行使用:npm run build
3.png
  • 粘贴控制台提示的地址到浏览器,如下图:
4.png

VUE学习之路四 创界第一个界面

相关文章

  • VUE学习之路四 创建第一个界面

    创建Login界面 实现步骤: 步骤1:新建login/Login.vue文件 步骤2:修改路由 步骤3:运行项目...

  • Vue初体验 | 创建你的第一个Vue组件

    昨天学习了如何生成自己的第一个Vue工程,今天就学习如何创建自己的第一个Vue组件吧。 创建组件之前, 先将我学习...

  • 学习笔记---当Swift遇上UI

    小记:初次使用Swift来创建UI界面,所以记下点实用笔记方便日后学习。 要求:创建两个界面,第一个界面有 Lab...

  • Vue.js 学习之路(四)

    title: Vue.js 学习之路(四)tags: 前端 Vue-CLI 集成 Bootstap4 安装 jqu...

  • Vue cli2和cli3 区别

    一、生成项目命令 1、安装3.x版本的Vue脚手架: 创建Vue项目命令: 或基于ui界面创建Vue项目,命令:v...

  • vue+electron 配合使用

    创建vue项目 安装vue_cli 3.x 手脚架 npm install -g @vue/cli 打开可视化界面...

  • vue-cli 3.0(2)

    在 vue-cli 中,除了可以使用命令行来创建和配置 vue 项目,也为您新增了界面的形式来创建和配置 vue ...

  • Vue WEB前端开发总结

    Vue Vue.js(/vjuː/,或简称为Vue)是一个用于创建用户界面的开源JavaScript框架,也是一个...

  • Vue基础-快速入门

    一、Vue简介 Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动...

  • Vue入门

    安装vue 创建vue项目 引入vue通过script标签引入 第一个vue程序 什么叫响应式当一个 Vue 实例...

网友评论

      本文标题:VUE学习之路四 创建第一个界面

      本文链接:https://www.haomeiwen.com/subject/nopdeqtx.html