朝小闇的博客

海上月是天上月,眼前人是心上人

vue(3.开发实例演示(含webpack))

1.解剖初始化模板

1.1 vue文件

  • 如图所示,对于一个新建的vue文件而言,其中标签分为三个部分:
    • template标签:这一块模板区域用于编写html代码块,其实就是component组建中的template属性内容,用作模板显示,而这个模板component的名字就是该vue文件名,使用时导入即可;
    • script标签:默认导出;
    • style标签:scoped属性相当于private,确保其中的样式只在本style样式中有效;

image-20200904130511003

1.2 App.vue和main.js

  • 创建新项目时src目录下模板文件只需要保留App.vue和main.js即可;
  • App.vue中template模板相当于主模板,其中可以直接通过组件标签调用其它组件模板,相当于没有slot便签的限定而可以自由嵌套插槽;
  • App.vue组件用来传递给main.js,main.js是webpack中设置的默认入口文件,它只需要绑定App.vue文件并且完成一些组件的初始化和申明使用即可;

image-20200904131915497

2.webpack

2.1 基础概念

  • webpack的本质是将新版本的vue组件框架打包成ES5版本支持的js代码;

2.2 实例步骤

  • 新建项目webpack-study
  • 打开之后创建modules文件目录;
  • modules文件目录下创建hello.js作为模板,代码为:
1
2
3
4
5
6
7
8
9
10
11
12
13
//暴露一个方法,在同一个文件中暴露的多个方法最终被接受到同一个对象中
exports.sayHi = function () {
document.write("<h1>Vue webpack</h1>");
}
exports.sayHi2 = function () {
document.write("<h1>JavaScript</h1>");
}
exports.sayHi3 = function () {
document.write("<h1>JavaSE</h1>");
}
exports.sayHi4 = function () {
document.write("<h1>Linux</h1>");
}
  • modules文件目录下创建main.js作为入口,代码为:
1
2
3
4
5
6
//接受一个文件中暴露的所有方法,类似于java的类
var hello = require("./hello");
hello.sayHi();
hello.sayHi2();
hello.sayHi3();
hello.sayHi4();
  • webpack-study目录下创建webpack.config.js文件用来设置webpack参数,代码为:
1
2
3
4
5
6
7
8
module.exports = {
//entry设置程序入口
entry:'./modules/main.js',
//output设置程序打包输出目录
output:{
filename:"./js/bundle.js" //这是标准格式
}
};
  • 在管理员模式下进入文件目录,使用指令:
1
webpack

image-20200903172445440

  • 这个bundle.js文件就是打包后得到的js文件,也就是最终拿来使用的文件;
  • 最后如上图创建index.html文件,作为整个程序的首页,添加<script>标签引入bundle.js文件:
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>

image-20200903172940366

大功告成!整个过程一目了然。


3.vue-router(重点)

3.1 基础概念

  • 实现多个页面跳转的功能;

  • 能够实现部分组件的页面改变而不影响其它组件部分;

  • 实质并不会通过服务器后端实现链接跳转,而是前端直接修改并且即时刷新显示

3.2 实例步骤

  • components目录下新建两个文件main.vuecontent.vue

  • 如图所示,只在template标签内加入一段标题即可:

image-20200904123949339

  • src目录下新建目录router,下建index.js文件,代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//导入vue和vue-router组件
import Vue from "vue"
import VueRouter from "vue-router";
//导入新建的content.vue和main.vue组件
import Content from "../components/content"
import Main from "../components/main"

//安装路由,相当于类的实例化操作
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
routes:[
{
//路由路径,在App.vue中用于link to连接的部分
path:'/content',
//路由名称,也可用于link to连接
name:'content',
//跳转的组件
component:Content
},
{
//路由路径,在App.vue中用于link to连接的部分
path:'/main',
//路由名称,也可用于link to连接
name:'main',
//跳转的组件
component:Main
}
]
})

  • main.js入口文件中导入vue-router
1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描路由配置

Vue.config.productionTip = false


new Vue({
el: '#app',
router, //直接使用即可
components: { App },
template: '<App/>'
})
  • App.vue文件中添加模板代码:
1
2
3
4
5
6
7
8
9
<template>
<!--router只有两个标签,link为链接标签,view为显示视图标签,to属性即为转到路径,该路径是index.js中配置的路径-->
<div id="app">
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<!--没有view标签则无法显示内容-->
<router-view></router-view>
</div>
</template>
  • 部署服务器npm run dev后网页显示如图:

  • 附:最终目录,其余部分已删除:

image-20200904125959596


4.实例工程(运用element-UI)

4.1 新建项目并配置依赖

  • 使用管理员模式运行命令行,并进入到目录下准备新建项目;

  • 创建一个名为hello-vue的工程项目:vue init webpack hello-vue,接下来的步骤请参看博客:Vue开发环境配置

  • 新建之后,执行以下命令:

1
2
3
4
5
6
7
8
9
10
11
12
#进入工程目录
cd he1lo-vue
#安装vue-router
npm install vue-router --save- dev
#安装element- ui
cnpm i element-ui -S
#安装依赖
cnpm install
#安装SAsS加戟器
cnpm install sass-loader node-sass --save-dev
#启动测试
npm run dev
  • 启动测试后可以正常通过端口访问即可;

4.2 修改配置文件

  • 在IDEA中打开工程项目,并在package.json文件中修改以下内容(sass版本过高需手动调低):

  • 修改完毕重新安装依赖:
1
cnpm install

4.3 修改初始src

  • 按照vue-router删改,最终效果图如下:

image-20200904144820476

4.4 新建目录及文件

  • 新建项目目录router用来存放路由配置文件index.js
  • 新建项目目录view用来存放视图组件,而components组件专门存放功能组件,明确分工;
  • 在view目录下新建Login.vue文件和Main.vue文件;

image-20200904145015407

4.5 使用element-ui组件

image-20200904145542362

  • 所有视图组件都是独立的,接下来配置路由index.js文件,使其能够联系起来:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Vue from 'vue'
import VueRouter from "vue-router";
import Main from '../view/Main'
import Login from '../view/Login'

Vue.use(VueRouter);

export default VueRouter({
routes:[
{
path:'/main',
component:Main
},{
path:'/login',
component:Login
}
]
})

4.6 配置main.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Vue from 'vue'
import App from './App'

import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(router);
Vue.use(ElementUI);
Vue.config.productionTip = false;


new Vue({
el: '#app',
router,
render: h => h(App)
});
  • 并在App.vue中添加路由显示;
  • 最终成果:

image-20200904153130970


5.路由嵌套

5.1 基础概念

  • 路由嵌套可以实现外框架组件不变而仅改变内组件;

5.2 实例步骤

  • 接4工程;
  • 在view目录下创建子目录user,并在该目录下创建两个新文件,新文件中仅配置一行文字:

image-20200904162145636

  • 在路由index.js文件中添加子路由:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default new VueRouter({
routes:[
{
path:'/main',
component:Main,
children:[
{path:'/user/listone',component:UserListOne},
{path:'/user/listtwo',component:UserListTwo}
]
},{
path:'/login',
component:Login
}
]
})
  • 对应更改Main.vue文件,导入侧边栏,并在侧边栏中添加路由连接和路由视图:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<template>
<div>
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="false">展开</el-radio-button>
<el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">个人中心</span>
</template>
<el-menu-item-group>
<span slot="title">分组一</span>
<!--添加路由链接-->
<el-menu-item index="1-1"><router-link to="/user/listone">账号设置</router-link></el-menu-item>
<el-menu-item index="1-2"><router-link to="/user/listtwo">密码设置</router-link></el-menu-item>
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-4">选项4</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项5</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>

<!--添加路由视图-->
<router-view align="center"></router-view>



</div>
</template>

<script>
export default {
name: "Main",
data() {
return {
isCollapse: true
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
  • 结果如图:

image-20200904161758727


6.传参以及重定向

6.1 传参

  • 先更改Main.vue文件中的路由器链接:
1
2
<!--name属性对应路由配置时的名称,params表示传参,且需要使用v-bind:双向绑定才能使此处的值能被路由接收-->
<router-link :to="{name:'UserListOne',params:{id:1}}">账号设置</router-link>
  • 再修改路由配置文件index.js
1
2
// /:id 表示参数id,用来接收params传参,props:true,表示开启props传参
{path:'/user/listone/:id',name:'UserListOne',component:UserListOne,props:true}
  • 最后修改ListOne.vue文件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<div>
<h1>账号设置</h1>
{{id}}<!--便可以直接调用参数,且内容必须直接放在标签内不,或者报错-->
</div>

</template>

<script>
export default {
props:['id'],//将index.js中的id传到此处
name: "UserListOne"
}
</script>
  • 最后显示:

image-20200904173718333

6.2 重定向

  • 只要在路由配置时添加一个新的路由配置重定向即可:
1
2
3
4
{
path:'/goHome',
redirect:'/main'
}
  • 再在Main.vue中添加配置:
1
<el-menu-item index="1-3"><router-link to="/goHome">回到首页</router-link></el-menu-item>
  • 得到结果:

image-20200904174020000

6.3 账号传参

  • 先修改Login.vue文件,在跳转函数时添加代码:
1
this.$router.push("/main/"+this.ruleForm.name);
  • index.js文件中修改代码接收参数:
1
2
3
path:'/main/:name',
component:Main,
props:true,
  • Main.vue文件中添加代码:
1
props:['name'],
1
<span>{{name}}</span>
  • 结果:

image-20200904184745405

image-20200904184818425

6.4 路由模式

  • mode属性:

    • hash:路径带 # 符号;
    • history:路径不带 # 符号;
  • 修改为history模式:

1
mode:'history',
  • 图显:

image-20200904185239423


7. 404及钩子

7.1 404

  • 在view目录下新建NotFound.vue文件,添加文字即可;
  • index.js文件中routes最后添加代码:
1
2
3
4
{
path:'*', //表示除以上页面外链接都指向该页面
component:NotFound
}
  • 结果:

image-20200904194401030

7.2 路由钩子与异步请求

  • 两个路由钩子:
1
2
//beforeRouteEnter(to,from,next):在进入路由前执行
//beforeRouteLeave(to,from,next):在离开路由前执行
  • 参数说明:

    • to:路由将要跳转的路径信息;
    • from:路由跳转前的路径信息;
    • next:路由的参数控制:
      • next():跳入下一个页面;
      • next(‘/path’):改变路由的跳转方向,使其跳转到另一个路由;
      • next(false):返回原来的页面;
      • next((vm)=>{}),仅在beforeRouteEnter中可用,vm是组件实例;
  • 在钩子函数中使用异步请求:

    • 安装Axios: cnpm install axios -s (反复尝试npm和cnpm,直到成功安装);
    • main.js引用Axios:
    1
    2
    3
    4
    import axios from 'axios'
    import VueAxios from 'vue-axios'

    Vue.use(VueAxios,axios);
    • static(静态数据,可以从网上读取并下载)目录下创建新目录mock(静态数据测试规范目录),新目录下创建新文件data.json(从Vue基础入门那里拿来使用),重新部署服务器之后能够通过文件目录读取到该文件(该步骤同样可测试axios是否完整安装,否则重装);

    image-20200904205141348

    • ListOne.vue文件中添加以下代码:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    beforeRouteEnter:(to,from,next)=>{//=>是function的简写模式,在钩子函数中使用
    console.log("进入路由之前");
    next(vm=>{//使用此方法可以直接调用vm实例
    vm.getData();
    });
    },
    beforeRouteLeave:(to,from,next)=>{//=>是function的简写模式,在钩子函数中使用
    console.log("离开路由之前");
    next();
    },
    methods:{
    getData:function () {
    this.axios({
    method:'get',
    url:'http://localhost:8080/static/mock/data.json' //数据链接
    }).then(function (response) {
    console.log(response);
    })
    }
    }
    • 点击页面上“账号设置”之后则获取了该数据:

    image-20200904210337482

    • 并且正常输出了“进入路由之前”和“离开路由之前”提示;
  • 根据上述这段操作则可以实现从静态数据中获取数据,再结合前面几点内容融会贯通之后基本实现了前端的数据交互操作;

-------- 本文结束 感谢阅读 --------