vue脚手架的使用

打开创建好的vue项目，点开src可以看到下面：

assets是用来放图片的目录

components用于放vue组件文件

router用于放路由文件

main.js是项目开始走的路口，一般不用修改：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

main.js指向App.vue，也就是说以后要改的话可以直接修改App.vue

点击不同链接跳转到不同的页面

首先创建3个组件【说组件是因为存放位置在组件目录下面】

Admin组件：

<template>
<div>
  <table>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>密码</th>
    </tr>
    <tr v-for="admin in adminList">
      <td>{{admin.id}}</td>
      <td>{{admin.name}}</td>
      <td>{{admin.pwd}}</td>
    </tr>
  </table>
  <!--使用自定义的Footer组件-->
  <Footer></Footer>
</div>
</template>

<script>
  import Footer from "./Footer";

  export default {
    name: "Admin",
    data() {
      return {
        adminList: [{
          id: '1',
          name: '张三管',
          pwd: '张三的密码'
        },
          {
            id: '2',
            name: '张三管理',
            pwd: '张三的密码'
          },
          {
            id: '3',
            name: '张三管理员',
            pwd: '张三的密码'
          }]
      }
    }
  }
</script>

<style scoped>
</style>

主页组件：

<template>
  <h1>欢迎进入我们的网站</h1>
</template>
<script>
  export default {
    name: "helloWorld"
  }
</script>
<style scoped>
</style>

用户组件：

<template>
<h1>欢迎进入用户</h1>
</template>
<script>
    export default {
        name: "User"
    }
</script>
<style scoped>
</style>

在路由文件下面导入组件：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import User from '../components/User'
import Admin from '../components/Admin'
Vue.use(Router)

export default new Router({
  routes: [
    //检测路径，跳转到对应的组件,根目录使他重定向到home主页
    {path: '/', redirect: '/home'},
    {path: '/home', component: HelloWorld},
    {path: '/user', component: User},
    {path: '/admin', component: Admin},
  ]
})

App.vue中添加链接

<!--主入口，修改这个地方即可-->
<template>
  <div id="app">
    <a href="#/user">用户模块</a>
    <a href="#/admin">管理员模块</a>
    <a href="#/home">主页</a>
    <!--展示router里面的组件-->
    <router-view/>
  </div>
</template>

<script>
  export default {
    //名字一般跟组件名一致
    name: "App",
  }
</script>
<style></style>

可以给组件创建自定义组件：

<template>
    <div>
      <h4>页脚</h4>
    </div>
</template>
<script>
    export default {
        name: "Footer"
    }
</script>
<style scoped>
</style>

在需要使用自定义组件的组件中导入自定义组件

<template>
  <div>
    <h1>欢迎进入用户</h1>
    <!--组件位置要放在div里面-->
    <Footer></Footer>
  </div>
</template>
<script>
  import Footer from "./Footer"

  export default {
    name: "User",
    components: {
      Footer
    }
  }
</script>
<style scoped>
</style>

如果需要引入图片，图片的src应该是在assert下面