vue-cli3项目实战——实现通用管理系统前端模板

效果如下：

---

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（“默认”初始化全局路由定义） 中的内容：

import First from './views/First.vue'

routes:[
{
path:’/’,
component:First // ！
}
]

并且将App.vue中多余内容删去，只保留“占位符” （!）
（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">}̲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>

这里有一点：
组件传值！
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写啥，页面用啥）
（注意两者中的“先后”关系）