使用cdn的形式创建vue项目_cdn vue

作者：凡人多烦事01 | 2024-02-29 11:48:43

踩

cdn vue

使用cdn的形式创建vue项目

一.实例化vue

创建index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../plug-in/element-ui/index.css">
	</head>
	<body>
		<div id='app'>
			{{message}}
		</div>
		<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					message: 'hello',
				},
			})
		</script>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

至此，一个简单的vue实例已经创建完成
在这里插入图片描述

二.引入第三方组件库

开发vue项目，第三方组件库是必不可少的，以elementUi为例

1.引入elementUI

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
1
2
3
4

2.使用组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		
	</head>
	<body>
		<div id='app'>
			<el-button @click='toDetail'>详情</el-button>
			<el-table :data="tableData" a>
			 <el-table-column prop="date" label="日期" width="180">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="180">
				</el-table-column>
				<el-table-column prop="address" label="地址">
				</el-table-column>
			</el-table>
		</div>
		<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					message: 'hello',
					tableData: [{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					}, {
						date: '2016-05-04',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1517 弄'
					}, {
						date: '2016-05-01',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1519 弄'
					}, {
						date: '2016-05-03',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}]
				},
			})
		</script>
	</body>
</html>

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

3.效果图

在这里插入图片描述

三.开发组件

1.创建pageA目录，并新建pageA.js

在这里插入图片描述

//pageA.js
Vue.component('page-a', {
  template: '<div>{{message}}</div>',
  data() {
	  return {
		  message: '我是page-a'
	  }
  },
  created() {
	  console.log(this.$route)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

2.在index.html中引入该文件

如需添加样式，在pageA目录下新建pageA.css，后在index.html中引入就可以了

<script src='../pageA/pageA.js'></script>
1

3.使用该组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		
	</head>
	<body>
		<div id='app'>
			<page-a></page-a>
		</div>
		<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src='../pageA/pageA.js'></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					message: 'hello',
				},
			})
		</script>
	</body>
</html>
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

4.效果图

在这里插入图片描述

四.路由

1.引入路由文件

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
1

2.引入路由组件

【注】路由组件的编写同普通组件的编写一致，这里依旧引用pageA组件

引入组件

<script src='../pageA/pageA.js'></script>
1

渲染组件

<template id='pagea'>
	<page-a ></page-a>
</template>
1
2
3

注册路由

var routes = [
    {path:'/pagea',component:{template: '#pagea'}},
];

var router = new VueRouter({
    routes: routes
})

var app = new Vue({
	el: '#app',
	router,
	data: {
		message: 'hello',
	},
	created() {
	},
	methods: {
		toDetail() {
			location.href = '../detail/detail.html'
		}
	}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		
	</head>
	<body>
		<div id='app'>
			<router-view></router-view>
		</div>
		<template id='pagea'>
			<page-a ></page-a>
		</template>
		<!-- 引入vue -->
		<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
		<!-- 引入vue-router -->
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- 引入组件 -->
		<script src='../pageA/pageA.js'></script>
		<script>
			var routes = [
			    {path:'/pagea',component:{template: '#pagea'}},
			];
			
			var router = new VueRouter({
			    routes: routes
			})
			var app = new Vue({
				el: '#app',
				router,
				data: {
					message: 'hello',
				},
			})
		</script>
	</body>
</html>
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

3.最终效果

在这里插入图片描述

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/165426