【Vue学习02】开始一个helloworld组件

1. 目录结构

上一篇说到创建了Vue项目并且使用webstrom打开，打开后的目录中主要开发使用的目录为src,其他目录暂且不需要了解（也不要随便删除，会使项目崩溃） project_dir

在src中初期学习也只需要使用compontents,router,views

compontents和views中以.vue 结尾的文件都可以被称作vue组件。
router中的js文件中，注册了组件的路由
src下的main.js是所有vue组件的总入口，项目从这里启动，一般不要做修改
src下的App.vue是所有组件的父组件
现在自己动手写一个自己的Hello world页面，俗语有言，写出了Hello world你就成功了一半。

2. HelloWorld

1. 在views文件夹下面创建一个helloVue.vue作为我们的第一个vue页面

<!--helloVue.vue-->
<template>
  <div>
      <h1>Hello Vue!</h1>
  </div>  
</template>

<script>
    export default {
        name: "helloVue"
    }
</script>

<style scoped>
    h1{
        color:#2c3e50;
    }
</style>

2. 在router文件夹下的index.js注册路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
    // helloVue我们自己写的helloworld页面
  {
      path:'/helloVue',
      name:'helloVue',
      component:() => import('../views/helloVue.vue')
  },
];

const router = new VueRouter({
  routes
});

export default router

3. 注册完成之后就可以在浏览器中查看自己写的页面了
   在地址栏输入自己注册的路由helloVue,完整地址http://localhost:8080/#/helloVue，其中的#表示目前是开发环境，忽略即可
   HelloVue

下一篇学习vue的语法，参考官方文档教程学习

上一篇 【Vue学习01】新手创建Vue项目用webstrom打开
下一篇【Vue学习03】Vue语法