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 分钟前
为什么浏览器要限制 JavaScript 定时器?
前端·javascript·github
学前端搞口饭吃6 分钟前
react context如何使用
前端·javascript·react.js
GDAL12 分钟前
为什么Cesium不使用vue或者react,而是 保留 Knockout
前端·vue.js·react.js
IT_陈寒13 分钟前
《Java 21新特性实战:5个必学的性能优化技巧让你的应用快30%》
前端·人工智能·后端
小谭鸡米花23 分钟前
uni小程序中使用Echarts图表
前端·小程序·echarts
芜青26 分钟前
【Vue2手录11】Vue脚手架(@vue_cli)详解(环境搭建+项目开发示例)
前端·javascript·vue.js
a别念m30 分钟前
前端架构-CSR、SSR 和 SSG
前端·架构·前端框架
麦麦大数据1 小时前
J002 Vue+SpringBoot电影推荐可视化系统|双协同过滤推荐算法评论情感分析spark数据分析|配套文档1.34万字
vue.js·spring boot·数据分析·spark·可视化·推荐算法
BillKu6 小时前
Vue3 + Element-Plus 抽屉关闭按钮居中
前端·javascript·vue.js
面向星辰6 小时前
html中css的四种定位方式
前端·css·html