Vue入门教学——编写第一个页面

  • 以Vue2.0为例子。

1、创建一个Vue项目

2、运行项目

  • 进入项目文件夹,执行运行命令。
复制代码
  cd demo
  npm run serve
  • 按住Ctrl,鼠标左键点击即可打开。

3、编写第一个页面

  • 从App.vue和路由中可以看出,原始的系统中一共有两个页面。
  • 为了简便,直接把Home当作要编写的第一个页面。
  • 首先删除About页面相关的信息。
  • 再修改App.vue中的信息。
  • 接下来,修改Home页面。
    • 从下面代码可以看出,Home页面调用了一个HelloWord组件。该组件存放在components中。
    • 可以通过向Home页面中添加组件来调整页面布局。
  • 接下来进行简单演示,创建一个新的组件插入HomeView.vue中。
    • 先删除HelloWord组件的相关信息。

    • 在components下创建一个新的组件文件。

      • HomeTitle.vue
      html 复制代码
      <template>
          <div id="hometitle">
              <p>编写第一个主页</p>
          </div>
      </template>
      <script>
          export default {
              name:'HomeTitle',
          };
      </script>
      
      <style scoped>
          #hometitle p{
              font-size:50px;
              font-weight:bold;
          }
      </style>
    • 将HomeTitle组件引入到Home主页中。

    • 保存即可。

  • 修改头部信息。
    • 项目的头部信息都存放在public文件夹的index.html中,按需修改即可。
相关推荐
麦兜*1 小时前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
知了一笑1 小时前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室2 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~2 小时前
重学前端004 --- html 表单
前端·html
TE-茶叶蛋2 小时前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
遇到困难睡大觉哈哈2 小时前
CSS中的Element语法
前端·css
Real_man3 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中3 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术3 小时前
日历插件-FullCalendar的详细使用
前端·javascript
咔咔一顿操作3 小时前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue