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'
//...
import Error from './component/Error.vue'
//...
export default new Router({
mode:'history',
routes:[
{
path:'/',
component: () => import('./First.vue') // ！
},{
//...
},{
path:'*', // 404页面处理
component: () => import('./Error.vue')
}
]
})
并且将App.vue中多余内容删去，只保留“占位符”
（App.vue是项目创建成功后的默认“首页”，也就是代码中的“/”，占位符是为了显示“First.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.$emit('val','1');
},
menu2:function () {
Msg.$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
现在，我们通常把npm当做后端资源下载——比如axios、echart之类的文件；而像jQuery、bootstrap等，我们称其为前端资源，并且，新增了bower关键字来管理前端资源：
bower -v、bower init
初始化之后我们要创建【隐藏文件】：null>.bowerrc——在其中设置前端资源下载后的保存位置
{"directory":"./components"}
这里又引入了一个文件：main.js （和App.vue一样性质：它是“默认”指定全局引用下载）
我们需要将刚刚下载的axios引入——在main.js文件中添加：
//添加两行代码
import axios from 'axios'
Vue.prototype.$http=axios
一般下载完（第三方）插件以后需要在vue全局引用（main.js中）：
import xxx from '...'
Vue.use(xxx)
但这里axios并不是“第三方插件”，而是vue官方推ajax请求工具（包），故而直接引用即可
这里我们请求的是本地的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写啥，页面用啥）
（注意两者中的“先后”关系）
接下来就要做“404页面”，这个页面原则上是“力求精美”，而且最好要有一个input框，让用户能从此页面跳到“想去的地方”：
<template>
<div>
<h2>{{msg}}</h2><br />
<form class="..." action="https://cn.bing.com/search" target="_blank" id="...">
<input type="text" class="..." name="q" value="搜索" onFocus="if(value===defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999999" id="..." />
<input type="submit" class="..." value="" />
</form>
</div>
</template>
<script>
export default{
data () {
return {
msg:'Error 404'
}
}
}
</script>
今日份扩展：
1、
我们在平时开发时用的一般都是模拟数据，比如用axios，get的路径都是本地的，但是到了线上，都要用比如“api/xxx.json”这样的格式。但是我们都知道，上线前改动代码是有很大风险的，
幸好，vue中帮我们“考虑到了”这一点，我们依然可以在项目里请求“/api”：
axios.get('/api/index.json')
.then(this.getHomeInoSucc) //成功的回调函数
在config文件夹（vue项目创建好的）下的index.js文件中，有dev选项，我们去改动其中的proxyTable属性：
proxyTable:{
'/api':{
target:'http://localhost:8080',
pathRewrite:{
'^/api':'/static/mock' //转发：将api对应到本地static文件夹下的mock文件夹
}
}
}
2、
在开发过程中，如果你的 Vue 程序和后端 API 服务器未在同一主机上运行，该如何代理 API 请求。假设使用 Vue-CLI 3 进行设置？
假设我们有一个运行在 localhost:8081 上的 Node.js 后端服务器。为了确保代理并可以从组件中访问它，可以配置 vue.config.js 文件并包含 devServer 部分，如下所示：
在 vue.config.js 配置文件中：
module.exports: {
devServer: {
proxy: {
'/api': {
target: ‘http://localhost:8081/api’,
changeOrigin: true
}
}
}
}