1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之Hello world

Vue教程之Hello world

接下来我们来开始编程教程的必备入门实例,Hello world。

项目结构介绍

首先在开始我们的Hello world之旅之前,我们需要看下我们创建好的项目代码结构。

.
├── README.md 
├── .gitignore # git提交时候的过滤文件
├── .editorconfig # 编辑器的项目配置文件,VScode需安装插件《EditorConfig for VS Code》才可生效。
├── babel.config.js # 向后兼容ES语法
├── node_modules # 依赖目录
├── package-lock.json # 锁定安装时的依赖的版本
├── package.json # 名称、描述和版本之类的信息,以及运行、开发以及有选择地将项目发布到 NPM 所需的信息
├── public # 公共文件
│   ├── favicon.ico # 标签栏看到的小图标
│   └── index.html # 编译打包的模版文件
└── src # 项目的主文件目录
    ├── App.vue # 基础组件
    ├── assets # 存放静态资源,例如图标、图片等
    ├── components # 组件的存放路径
    ├── main.js # 项目入口文件
    ├── router # 路由文件存放的目录
    ├── store # 状态管理文件存放的目录
    └── views # 页面存放路径

Hello world

在 views 里创建 hello-world.vue 的文件

<template>
  <div>
    Hello world!!!
  </div>
</template>

在 router/index.js 中创建路由

Vue教程之Hello world

然后启动程序(npm run serve),访问 http://localhost:8080/hello-world 即可访问到 Hello world 的页面

Vue教程之Hello world
这篇文章对您有用吗? 1

我们要如何帮助您?

发表评论

您的电子邮箱地址不会被公开。