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中,按需修改即可。
相关推荐
gnip3 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫4 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel5 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼5 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手9 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法9 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku9 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode10 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu10 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu10 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript