Vue cli 配置与列表的渲染 原

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: false,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
         // '/api': {
         //  target: 'http://127.0.0.1:80',
         //  changeOrigin: true,
         //  pathRewrite: {
         //   '^/api': '/'
         //  }
         // }
        '/api/v1/**':{
            target:'https://cnodejs.org',//你接口的域名
            secure:false,
            changeOrigin:true,
        }
    },
    // '/api/v1/**'也可以写成'/api'
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../page/index/index'
import Content from '../page/content'
import Jqpage from "../page/jq"
//import Index from '@/views/index/index'
//import Manage from '@/views/manage/index'

//import OtherRouter from '../views/index/otherrouter'

Vue.use(Router)
//const Foo = { template: '<div>嵌套路由</div>' }
export default new Router({
  routes: [
    {
    	path: '/',
    	name: 'Index',
        component:Index
    	//components:{a:Index,b:Manage},
        //children:[{path:'', component:OtherRouter}]
        //children:[{path:'', component:Foo}]
    },
     {
        path: '/jq',
        name: 'jq',
        component:Jqpage
    },
     {
        path: '/content/:id',
        name: 'Content',
        component:Content
        //components:{b:Manage},
    }
   
  ]
})

<template>
  <div>
    <Header></Header>
    <router-link to="/jq" class="link" style="height:50px;display:block">link to jqpage</router-link>
    <!-- <img class="img" src="../../../static/image/logo.jpg" alt=""> -->
    <div class="article_list">
      <ul>
        <li v-for="i in list">
        <!-- <time v-text="$utils.goodTime(i.create_at)"></time> -->
          <!-- <time v-text="i.create_at"></time> -->
           <div class="time">{{$utils.goodTime(i.create_at)}}</div>
           <router-link :to="'/content/'+i.id">
             {{i.title}}
           </router-link>
        </li>
      </ul>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
 import Header from "../../components/header.vue"
 import Footer from "../../components/footer.vue"
 export default{
  components:{Header,Footer},
  data(){
    return {
      list:[]
    }
  },
  created(){
    this.getData()
  },
  methods:{
    getData(){
      this.$api.get("topics",null,r=>{
        this.list = r.data
      })
    }
  }
 }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 ul>li{margin-bottom:30px;}
 .time{margin-bottom:10px;}

 .link{background:url(../../../static/image/logo.png) no-repeat;color:red;}
</style>

<template>
  <div>
   <MyHeader></MyHeader>
    <!-- 也可以写成<my-header></my-header> -->
   <h2 v-text="dat.title"></h2>
   <p>作者：{{dat.author.loginname}}  发表于：{{$utils.goodTime(dat.create_at)}}</p>
   <articel v-html="dat.content"></articel>
   <h3>网友回复</h3>
   <ul>
     <li v-for="i in dat.replies">
        <p>评论者：{{i.author.loginname}}　　评论于：{{$utils.goodTime(i.create_at)}}</p>
        <article v-html="i.content"></article>
      </li>
   </ul>
   <myFooter></myFooter>
  </div>
</template>

<script>
import MyHeader from '../components/header.vue'
import myFooter from '../components/footer.vue'
export default {
  components: { MyHeader, myFooter },
  data () {
    return {
      id: this.$route.params.id,//id与router 里面的 path: '/content/:id'一致
      dat: {}
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.$api.get('topic/' + this.id, null, r => {
        this.dat = r.data
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>