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

• 以Vue2.0为例子。

1、创建一个Vue项目

• 创建过程：Vue-cli（脚手架）的创建_vue脚手架创建项目命令-CSDN博客
• 【注】项目名不能有大写字母。
• 创建完毕后，使用VSCode打开项目文件夹（其他编辑器也行）。

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

    <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中，按需修改即可。
  •