效果如下：
vue-cli3下载：
//普通下载
npm install -g @vue/cli
//淘宝镜像下载
cnpm install -g @vue/cli
若是安装了vue-cli2，则需先卸载：
npm uninstall vue-cli -g
cnpm下载： （解决npm速度过慢的问题）
npm install -g cnpm --registry=https://registry.npm.taobao.org
。。。
第一次弄这些的时候感觉好麻烦，但事后想了一下，如果不用vue-cli的模板，我们创建一个项目要经过如下几个步骤：
- 安装依赖 —— npm i 或 cnpm i
- 初始化 —— npm init -f 或 cnpm init -f （-f结尾表示没有模板）
- 安装组件，并查看内容
vue-cli3创建项目
vue create 项目名称
安装中间有一些需要“人工干预”的地方 —— 一些选择项：把Router、Babel选上（对应地方敲空格），然后基本上一直 y+回车 即可。
启动：
//cd到项目目录后
npm run serve
项目开始
组件化编程：
每个组件中的data必须通过“函数方式”书写： data(){return{...}}
在views文件夹下创建First.vue：
<template>
<div class="main">
<div class="left">
<!-- 组件 -->
<Left></Left>
</div>
<div class="right">
<div class="top">
<img src="img/title.jpg" />
</div>
<div class="buttom">
<!-- 组件 -->
<Right></Right>
</div>
</div>
</div>
</template>
<style lang=“text/css” scoped>
*{
margin: 0;
padding: 0;
}
.main{
width: 1200px;
margin: 20px auto;
}
.top img{
height: 200px;
width: 1000px;
}
.left{
width: 100px;
float: left;
margin-right: 10px;
}
.right{
width: 1000px;
float: left;
margin-left: 10px;
}
.left,.right{
background: #F5F5F5;
}
</style>
<script>
import Left from ‘…/components/Left.vue’
import Right from ‘…/components/Right.vue’
export default{
components:{
Left
Right
}
}
</script>
创建了一个“主文件”，则要改动 router文件夹下的index.js（“默认”初始化全局路由定义） 中的内容：
routes:[
{
path:’/’,
component:First // ！
}
]
并且将App.vue中多余内容删去，只保留“占位符”
<router-view />
（!）
（App.vue是项目创建成功后的默认“首页”，也就是代码中的“/”，占位符是为了显示“First.vue”组件内容到页面上）
在项目components文件夹下创建组件Left.vue：
<template>
<div>
<div class="title">热门推荐</div>
<ul class="menu">
<li @click="menu1">笔记本电脑</li>
<li @click="menu2">手机</li>
<li>服饰</li>
<li>手表</li>
<li>书籍</li>
<li>玩具</li>
<li>小家电</li>
<li>学习用品</li>
<li>办公用品</li>
</ul>
</div>
</template>
<style lang=“text/css” scoped>
.title{
width: 100px;
color: red;
}
.menu li{
list-style: none;
height: 50px;
margin-bottom: 2px;
background: white;
line-height: 50px;
}
</style>
<script>
import Msg from ‘./msg.js’
export default{
methods:{
menu1:function(){
Msg.KaTeX parse error: Expected 'EOF', got '}' at position 284: …n punctuation">}̲</span><span cl…emit(‘val’,‘2’);
}
}
}
</script>
在components文件夹下创建msg.js：
import Vue from 'vue'
export default new Vue
这个文件可了不得 —— 它将作为项目中（兄弟）组件通信的“事件总线”！
在components文件夹下创建Right.vue：
<template>
<div>
<div v-if="kk==1">
<!-- “复用”组件 -->
<GoodList :goodId="1"></GoodList>
</div>
<div v-else-if="kk==2">
<GoodList :goodId="2"></GoodList>
</div>
<div v-else>
<GoodList :goodId="0"></GoodList>
</div>
</div>
</template>
<script>
import Msg from ‘./msg.js’
import GoodList from ‘./goodsList.vue’
export default{
data(){
return{
kk:0
}
},
mounted:function(){
var _this=this
Msg.$on(‘val’,function(m){
_this.kk=m;
})
},
components:{
GoodList
}
}
</script>
这里有一点：<GoodList :goodId="xxx"></GoodList>
组件传值！
vue中的组件传值必须采用“bind动态绑定”的方式，这里传一个名称，在对应组件中（比如这里是import的goodsList.vue组件）要通过props接收这个值，去使用——props中的值必须要在watch中判断、使用
正菜开始了：发请求，达到“点击不同li切换不同内容”的效果。
cnpm i axios -S
- 1
这里又引入了一个文件： main.js （和App.vue一样性质：它是“默认”指定全局引用下载）
我们需要在其中引入axios：
//添加两句话
import axios from 'axios'
Vue.prototype.$http=axios
这里我们请求的是本地的json文件（找不来合适的网上资源…）
既然要“切换”，就需要一个“可复用”组件：
我们在components文件夹下创建goodsList.vue组件：
<template>
<div name="show">
<ul class="goosList">
<li v-for="good in list">
<img v-bind:src="good.img" />
<p>{{good.goodName}}</p>
</li>
</ul>
</div>
</template>
<style lang=“text/css” scoped>
.goodList li{
width: 200px;
height: 200px;
list-style: none;
float: left;
font-size: 9px;
color: red;
margin-bottom: 30px;
}
.goodList img{
width: 180px;
height: 180px;
}
</style>
<script>
export default{
name:‘show’,
data(){
return{
list:[]
}
},
mounted:function(){
this.Mxc()
},
methods:{
Mxc:function(){
var obj=this;
var url="";
if(obj.goodId=1){
url=“json/bjb.json”
}else if(obj.goodId=2){
url=“json/shouji.json”
}else{ // 0
url=“json/bjb.json”
}
this.$http.get(url).then(function(res){
obj.list=res.data;
})
}
},
props:{
goodId:Number
},
watch:{
goodId(){
this.Mxc()
}
}
}
</script>
区分一点：
watch里的函数名都是（要获取的）数据名（需要用啥，watch写啥）
页面使用的相关（data）数据名是computed中的函数名（computed写啥，页面用啥）
（注意两者中的“先后”关系）
效果如下：
vue-cli3下载：
//普通下载
npm install -g @vue/cli
//淘宝镜像下载
cnpm install -g @vue/cli
若是安装了vue-cli2，则需先卸载：
npm uninstall vue-cli -g
cnpm下载： （解决npm速度过慢的问题）
npm install -g cnpm --registry=https://registry.npm.taobao.org
。。。
第一次弄这些的时候感觉好麻烦，但事后想了一下，如果不用vue-cli的模板，我们创建一个项目要经过如下几个步骤：
- 安装依赖 —— npm i 或 cnpm i
- 初始化 —— npm init -f 或 cnpm init -f （-f结尾表示没有模板）
- 安装组件，并查看内容
vue-cli3创建项目
vue create 项目名称