Vue-08-实战快速上手

9.Vue:实战快速上手

• 创建工程

• 注意：命令行都要使用管理员模式运行

• 创建一个名为hello-Vue的工程vue init webpack hello-vue

• 安装依赖，我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件

#进入工程目录
cd hello-vue
#安装Vue-router
cnpm install vue-router --save-dev
#安装element-ui
cnpm i element-ui -S
#安装依赖
npm install
#安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启动测试
npm run dev
1
2
3
4
5
6
7
8
9
10
11
12

• Npm命令解释：

  • npm install moduleName:安装模块到项目目录下

  • npm instal1 -g moduleName:-g的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看npm config prefix的位置

  • npm install -save moduleName:-save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写

  • npm install -save-dev moduleNam e:-save-deV的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

• components：放置功能组件

• views:放视图组件

• 创建views视图层目录,ViewMain.vue ,VueLogin.vue

1
2
3
4
5
6
7
8
9
10
11
12

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
75
76
77
78
79
80
81
82
83
84

• 补充这两个视图组件的路由，上一节的导入和使用路由可以不要

import Vue from 'vue'
import VueRouter from 'vue-router'
import MyComment from '/src/components/MyComment.vue'
import MyMain from '/src/components/MyMain.vue'
import MyOther from '/src/components/MyOther.vue'
import ViewMain from '/src/views/ViewMain.vue'
import VueLogin from '/src/views/VueLogin.vue'
//安装路由
Vue.use(VueRouter)
//配置导出路由
export default new VueRouter({
	routes: [
		{
			//路径
			path: '/mycomment',
			name: 'mycomment',
			//跳转组件
			component: MyComment
		},
		{
			path: '/mymain',
			name: 'mymain',
			component: MyMain
		},
		{
			path: '/myother',
			name: 'myother',
			component: MyOther
		},
		{
			path: '/viewmain',
			name: 'viewmain',
			component: ViewMain
		},
		{
			path: '/vuelogin',
			name: 'vuelogin',
			component: VueLogin
		}
	]
})
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

• 修改入口文件main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index' //自动扫描router/index.js的路由配置
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUi)
Vue.config.productionTip = false
 new Vue({
el: '#app',
router,
render: h => h(App),    //element-ui定义规则
}).$mount('#app')
/* new Vue({
	el: '#app',
	router,
	components: {App},
	template: ''
}) */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 在App.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

• 测试点击登录页，随便输入用户名、密码即可跳到首页，登录事件中设置了

• 存在问题：

如果出现错误：可能是因为sass-loader的版本过高导致的编译错误，当前最高版本是8.x,需要退回到7.3.1；
去backage,json文件里面的"sass-loader’"的版本更换成7.3.1，然后重新cnpm install就可以了

将vue/cli版本降低为3.x，可以避免一些环境问题

9.1路由嵌套

• 嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL中各段动路径也按某种结构对应嵌套的各层组件，例如：

/user/foo/profile
/user/foo/posts
1
2

• 用户信息组件，在views/user目录下创建一个名为Profile.vue的视图组件；

• 在views下建user目录分别放置两个主页要显示的组件UserList.vue、UserProfile.vue

1
2
3
4
5
6
7
8
9
10
11
12

1
2
3
4
5
6
7
8
9
10
11
12

• 之后再路由文件中配置这两个组件

import Vue from 'vue'
import VueRouter from 'vue-router'
import MyComment from '/src/components/MyComment.vue'
import MyMain from '/src/components/MyMain.vue'
import MyOther from '/src/components/MyOther.vue'
import ViewMain from '/src/views/ViewMain.vue'
import VueLogin from '/src/views/VueLogin.vue'
import UserList from '/src/views/user/UserList.vue'
import UserProfile from '/src/views/user//UserProfile.vue'
//安装路由
Vue.use(VueRouter)
//配置导出路由
export default new VueRouter({
	routes: [
		{
			//路径
			path: '/mycomment',
			name: 'mycomment',
			//跳转组件
			component: MyComment
		},
		{
			path: '/mymain',
			name: 'mymain',
			component: MyMain
		},
		{
			path: '/myother',
			name: 'myother',
			component: MyOther
		},
		{
			path: '/viewmain',
			name: 'viewmain',
			component: ViewMain,
			children:[
				{
					path: '/user/userlist',
					name: 'userlist',
					component: UserList
				},
				{
					path: '/user/userprofile',
					name: 'userprofile',
					component: UserProfile
				}
			]
		},
		{
			path: '/vuelogin',
			name: 'vuelogin',
			component: VueLogin
			
		}
		
	]
})
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

• 不嵌套的话会打开新的标签页面

• 修改views目录下的VueMian，是的主页框架出来

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

• 之后就可以测试了，登录后主页显示，由于elementui空间有一些问题，所以显示不完全，但嵌套路由效果也显示了
  
  

9.2 参数传递和重定向

• 传递参数页：注意传参格式，显示用户信息

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

• 路由页面配置index.js注意第二种方式需要在传递参数路径处加props:true，接受参数页才能通过props接受

import Vue from 'vue'
import VueRouter from 'vue-router'
import MyComment from '/src/components/MyComment.vue'
import MyMain from '/src/components/MyMain.vue'
import MyOther from '/src/components/MyOther.vue'
import ViewMain from '/src/views/ViewMain.vue'
import VueLogin from '/src/views/VueLogin.vue'
import UserList from '/src/views/user/UserList.vue'
import UserProfile from '/src/views/user//UserProfile.vue'
//安装路由
Vue.use(VueRouter)
//配置导出路由
export default new VueRouter({
	routes: [
		{
			//路径
			path: '/mycomment',
			name: 'mycomment',
			//跳转组件
			component: MyComment
		},
		{
			path: '/mymain',
			name: 'mymain',
			component: MyMain
		},
		{
			path: '/myother',
			name: 'myother',
			component: MyOther
		},
		{
			path: '/viewmain/:name',
			name: 'viewmain',
			component: ViewMain,
			props:true,
			children:[
				{
					path: '/user/userlist',
					name: 'userlist',
					component: UserList
				},
				{
					path: '/user/userprofile/:id',
					name: 'userprofile',
					component: UserProfile,
					props:true
				}
			]
		},
		{
			path: '/vuelogin',
			name: 'vuelogin',
			component: VueLogin
			
		},//上面都是转发,请求路径不变
		{
			path: '/gohome',
			redirect:'/mymain'
		}
		
	] 
})
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

• 接受参数页UserProfile.vue，{{$router.params.id}}第一种方式失败，读取不到参数或ID

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• VueLogin页面传递用户信息

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
75
76
77
78
79
80
81
82
83
84

• 重定向，需要在路由index配置重定向页面

{
    path: '/gohome',
    redirect:'/mymain'
 }
1
2
3
4

9.3 路由模式与404

• 路由模式有两种

• hash:路径带#符号，如http://localhost/#/login
• history:路径不带#符号，如http://localhost/login修改路由配置，代码如下：

• 修改路由配置，代码如下：

export default new Router({
mode:'history',
routes:
]
});
1
2
3
4
5

• 前端部署到Nginx，通过Axios+Nignx的反向代理请求后端接口数据，这样分离部署的前后端就连起来了，不过这样还得解决跨域问题。

• 404页面设置NotFound.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 路由配置

import NotFound from '/src/views/NotFound.vue'
{
path: '*',
component:NotFound
}
1
2
3
4
5

9.4 路由钩子与异步请求

• beforeRouteEnter:在进入路由前执行
• beforeRouteLeave:在离开路由前执行

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

• 参数说明：

to:路由将要跳转的路径信息
from:路径跳转前的路径信息
next:路由的控制参数
next()跳入下一个页面
next('path)改变路由的跳转方向，使其跳到另一个路由

next(false)返回原来的页面
next(vm)=>)仅在beforeRouteEnter中可用，vm是组件实例,通过axios拉取数据

• 在钩子函数中使用异步请求安装
• Axios cnpm install axios -s/cnpm install vue-axios -s
• main.js引用Axios

import Vue from 'vue'
import App from './App.vue'
import router from './router/index' //自动扫描router/index.js的路由配置
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(ElementUi)
Vue.use(axios,VueAxios)
Vue.config.productionTip = false
 new Vue({
el: '#app',
router,
render: h => h(App),    //element-ui
}).$mount('#app')
/* new Vue({
	el: '#app',
	router,
	components: {App},
	template: ''
}) */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 在此static/mock/servicejs.json建个json文件

{
	"name":"zs",
	"url": "http://baidu.com",
	"address": {
	 "city":"北京"
    },
	"hower":[
		{"option":"java"},
		{"option":"python"},
		{"option":"c++"},
		{"option":"读书"}
	]
}
1
2
3
4
5
6
7
8
9
10
11
12
13

• 在UserProfile.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