如何写你的第一个vue页面

1.前题：先用vue-cli 建好vue工程（具体步骤请看我的前1篇文章）

2. 使用HBuiderX   （下载地址：HBuilderX-高效极客技巧）

打开 vue工程对应的目录

打开后vue 工程就会出现在 hbuilder 的左边

注意工程结构：

public : 放静态资源的目录（ html ,图片 ，外部插件 ）

src ; 写具体代码的地方

package.json:依赖版本控制文件

vue.config.js:工程配置文件

3. 点开 src 目录

等下我们的代码就在 views 目录中写。

4. 在写之前先给大家一个 Hbuilder 模版文件：HBuilderX模板.zip

解压后把 templates  放到 C:\Users\（你的用户名）\AppData\Roaming\HBuilder X 目录下 重启Hb

就可以开始写 vue 了。

5. 鼠标右键 views目录新建vue文件

 注意要选择刚刚放上去的模版：

点创建vue 文件就建好了。

6.  生成的vue 页面节点解释

template ： 写html的地方

script：写脚本的地方

style:写样式的地方

7. 在script中写上如下代码

8. 在template中写如下代码：

9.  在 src 目录中找到 App.vue 文件（这个是工程的入口）

在About下加这行代码：<router-link to="/test1">测试1</router-link>| 

10. 找到 src 目录下的 router 目录 下的index.js文件打开

找到 About 对应的节点加上test1页面的路由

要注意这个是json的写法，{} 表示一个节点，如果还有下一个节点（请自己补 , 号）

path:访问路径    name   : vue页面中的名字   component: vue页面的相对路径

11： 找到HBuilder 的 设置  的  node 运行配置  选择 外部终端

12 ： 点工程目录右键

13：cmd 中键入： npm run serve

14：http://127.0.0.1:（vue.config.js 中配置德端口）

15：点击 测试1 

现在我们的第1个vue页面就完成了。