码迷,mamicode.com
首页 > 其他好文 > 详细

学习项目-前端-第九课:NUXT

时间:2020-07-19 13:50:08      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:sync   ima   list   async   class   cti   dir   项目   图片   

一、preparation

1、download starter-template-master

2、command line-->cnpm install

3、change "{{ name }}"(package.json) to your project name

4、command line-->npm run dev

5、change title(nuxt.config.js-->head-->title)

二、layout/default.vue

1 <template>
2   <div>
3   <header>tensquare Social Plateform
        <router-link to="/">Home Page</router-link>
        <router-link to="/recruit">Recruit</router-link>
        <router-link to="/gathering">Activity</router-link>
      </header>
4     <nuxt/><!-- /pages/index.vue -->
5     <footer>Predator Copyright</footer>
6   </div>
7 </template>
8 </script>

三、page route(automatic search by directory architecture)

技术图片技术图片

 四、render

1、install axios-->command line:cnpm install axios --save

2、pages/gathering/index.vue

 1 <template>
 2   <div>
 3     Activity List
 4     <div v-for="(item,index) in items" :key="index">{{item.name}}</div>
 5   </div> 
 6 </template>
 7 <script>
 8 import axios from axios
 9 export default {
10   asyncData(){
11     return axios.get(http://192.168.1.66:7300/mock/5f01a8f3b2b4ff07dd0ca4fc/api/gathering).then(
12       res=>{
13         console.log(res.data.data)
14         return {items: res.data.data}
15       });
16   }
17 }
18 </script>

 五、dynamic route

技术图片技术图片

 

学习项目-前端-第九课:NUXT

标签:sync   ima   list   async   class   cti   dir   项目   图片   

原文地址:https://www.cnblogs.com/DotSDot/p/13338861.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!