Vue cli 配置与列表的渲染 原

1、配置

安装完Vue cli后会生成很多文件,大部分文件我们不需要管它,我们往往需要修改的是跟目录下的

config->index.js

// 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
  }
}

里面有2个地方,一个是build对象里面的assetsPublicPath: '/',修改成assetsPublicPath: './',修改后就可以在npm run build后生成的dist文件夹中直接用浏览器打开index.html页面,不需要放到服务器上

另一个是dev对象下的proxyTable,可以把接口代理到本地

再举2个配置的例子

 proxyTable: {         '/api': {             target: 'http://www.weinihaigou.com',             changeOrigin: true,             pathRewrite: {               '^/api': ''             }         }     },

this.axios.post('/api/indexMo.shtml').then() 请求的地址是:http://www.weinihaigou.com/indexMo.shtml

proxyTable: {   '/list': {     target: 'http://api.xxxxxxxx.com',     pathRewrite: {       '^/list': '/list'     }   } }

这样我们在写url的时候,只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.

总结:请求的地址一定会有proxyTable的键,如第一个例子的api,我们始终牢记请求的始终是后台的接口,如请求http://www.weinihaigou.com/indexMo.shtml 首先写api+/indexMo.shtml,代表http://www.weinihaigou.com/api/indexMo.shtml  因为/api在请求的时候重定向空值“”,所以最后请求的是http://www.weinihaigou.com/indexMo.shtml

2、列表渲染

router->index.js,点击index里面的列表进入content详情页

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},
    }
   
  ]
})

page->index->index.vue

<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>

page->content.vue

<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>

总结:(1)如果用到外部封装的js如:{{$utils.goodTime(dat.create_at)}}

在main.js中引入utils ,并绑定到原型中

        import utils from './utils/index.js'         //将工具方法绑定到全局         Vue.prototype.$utils=utils

被引用的文件格式

        export default { goodTime (str) {{ ....    }}

(2)用到动态路由

http://blog.csdn.net/fungleo/article/details/53171614 此博客是vue很好的入门课,感谢作者细致的讲解。

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券