239 vue学习【第5篇】：vue-cli脚手架（框架）

一、创建vue项目

npm install vue-cli -g   #-g全局
(sudo)npm install vue-cli -g   #mac笔记本

vue-init webpack myvue  #项目的名字
cd muvue
npm install
npm run dev

二、目录结构的说明

出现下面这样的图就说明成功了

239 vue学习【第5篇】：vue-cli脚手架（框架）

三、import和require的区别

import一定要放在文件顶部，他相当于一个指针引用了文件，并没有吧文件包含进来，需要调用文件时才引入
require可以吧文件放在任何位置，他是吧文件直接包含进来

四、设置文件路径的流程

1）建立组件（.vue的文件）
2）配置路由（index.js文件中配置）
3）<router-link></router-link>
4)<router-view></router-view>
5)import 包名 from "组件路径"
6)comonents进行注册

五、实现异步加载

//异步
vue-resource:实现异步加载数据（已经弃用）
axios：实现异步加载数据
npm install axios --save-dev
npm install vue-axios --save-dev

六、VUE的生命周期

1、定义vue对象并实例化
2、执行created函数
3、编译模板，只会编译template的模板
4、吧HTML元素渲染到页面当中
5、执行mounted函数，（加载）相当于onload
6、如果有元素的更新，就执行update函数
7、销毁实例

六、项目实战

仿抽屉网站

239 vue学习【第5篇】：vue-cli脚手架（框架）

ALL.vue

 1 <template>
 2   <div class='box'>
 3     <ul>
 4       <li v-for='item in arr'>
 5         <div class='p1'>
 6           <router-link :to="{path:'/detail',query:{ids:item.id}}">{{item.content}} </router-link>
 7         </div>
 8         <div class="p2">
 9           <img :src="item.imgUrl">
10         </div>
11       </li>
12 
13     </ul>
14 
15   </div>
16 </template>
17 
18 <script>
19   export default {
20     name: 'HelloWorld',
21     data () {
22       return {
23         arr: []
24       }
25     },
26     mounted () {
27       var url = '../../static/news.json'
28       var self=this;
29       this.$axios.get(url)
30         .then(function (response) {
31           console.log(response.data.result.data);
32           self.arr = response.data.result.data;
33         })
34         .catch(function (error) {
35           console.log(error);
36         })
37     }
38   }
39 </script>
40 
41 <!-- Add "scoped" attribute to limit CSS to this component only -->
42 <style scoped>
43   h1, h2 {
44     font-weight: normal;
45   }
46 
47   ul {
48     list-style-type: none;
49     padding: 0;
50   }
51 
52   li {
53     display: inline-block;
54     margin: 0 10px;
55   }
56 
57   a {
58     color: #42b983;
59   }
60 .box{
61   width: 980px;
62 }
63 .p1{
64   float:left;
65   width:780px;
66 }
67  img{
68   float:right;
69  }
70 </style>

View Code

DETAIL.vue

 1 <template>
 2   <div class="box">
 3     <h1>我是详细页面{{id}}</h1>
 4     <ul>
 5       <li>
 6         <div class="p1">
 7           {{obj.content}}
 8         </div>
 9         <div class="p2">
10           <img :src="obj.imgUrl">
11         </div>
12 
13       </li>
14     </ul>
15   </div>
16 </template>
17 
18 <script>
19   export default {
20     name: 'Detail',
21     data () {
22       return {
23           obj:{} ,
24           id:this.$route.query.ids
25       }
26     },
27     mounted(){
28       var url = "../../static/news.json"
29       var self =this;
30       this.$axios.get(url,{
31           params:{id:this.id}
32       })
33         .then(function (response) {
34           //console.log(response.data.result.data);
35           self.obj = response.data.result.data[0];
36         })
37         .catch(function (error) {
38           console.log(error);
39         })
40     }
41   }
42 </script>
43 
44 <!-- Add "scoped" attribute to limit CSS to this component only -->
45 <style scoped>
46   h1, h2 {
47     font-weight: normal;
48   }
49 
50   ul {
51     list-style-type: none;
52     padding: 0;
53   }
54 
55   li {
56     display: inline-block;
57     margin: 0 10px;
58   }
59 
60   a {
61     color: #42b983;
62   }
63   .box{
64     width: 980px;
65   }
66 
67   .p1{
68     float:left;
69     width:700px;
70   }
71   .p2{
72     float:right;
73   }
74 </style>

View Code