vue搭建自己的第一个网页_vue项目搭建好之后如何写页面

当我们学会了如何初始化一个项目后，现在我们再来讲一下如何自己构建一个简单的页面。这些也是我正在学习的地方，于是就是简单的记录一下，有一些错误或者你觉得这个浪费时间那真的抱歉哈。

项目目录介绍：

在我这两天的学习中，我觉得去官网仔细阅读一下官方文档是十分有必要的，不要担心看不懂，那你只需要把网页翻译成为中文就好啦。官方网址

建立项目：

我们刚刚接触一般是将.vue文件建立在comment目录里面，在里面可以建立一个.vue文件，这里面默认会有一个HelloWorld.vue文件，你可以自己新建一个练练手，也可以删除一些HelloWord里面的看看效果，这里我选择新建了一个文件，当然我最开始也删除了里面的一些，看效果

                                                                                       

 

 

 

现在我们页面就只剩下这个文字了，原来是下面这个样子的 

 

配置路由： 

 最重要的一点来了，就是需要配置路由，如果不配置路由就无法显示在网页上，这里我先建立一个新的.vue文件

 

 这个是homelist.vue中的代码，这个是我随便在elementui官网上面截取的一段代码，当然你需要先下载一些插件，官网里面都有介绍，这里我直接给出来 npm i element-ui -S   就是这个命令

 之后在讲框框里面的代码复制到main.js中

main.js文件示例 

 

 我这里也直接给出来，你可以直接复制

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 homelist.vue中的代码

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>
 
<script>
export default {
  name: 'homelist',
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>

最重要的来了，配置路由：

import homelist from '@/components/homelis'

这样你的第一个网页还是出不来，当你刷新你的界面时，你需要在 你的网址上面加一个homelist就可以啦