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中,按需修改即可。
相关推荐
小桥风满袖2 分钟前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Rubin932 分钟前
埋点方案实现
前端
斯~内克6 分钟前
Centrifugo 深度解析:构建高性能实时应用的开源引擎
前端·开源
tianchang18 分钟前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
掘金安东尼26 分钟前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试
Hilaku27 分钟前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
天天扭码30 分钟前
AI时代,前端如何处理大模型返回的多模态数据?
前端·人工智能·面试
每天开心33 分钟前
一文教你掌握事件机制
前端·javascript·ai编程
LeeAt39 分钟前
真的!真的就一句话就能明白this指向问题
前端·javascript
阳火锅40 分钟前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试