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