使用cdn的形式创建vue项目

使用cdn的形式创建vue项目一.实例化vue二.引入第三方组件库1.引入elementUI2.使用组件3.效果图三.开发组件1.创建pageA目录，并新建pageA.js2.在index.html中引入该文件3.使用该组件4.效果图四.路由1.引入路由文件2.引入路由组件3.最终效果一.实例化vue创建index.html<!DOCTYPE html><html><

程鹏;

6165人浏览 · 2022-01-18 17:03:24

程鹏; · 2022-01-18 17:03:24 发布

使用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>

至此，一个简单的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>

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>

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)
  }
})

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

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

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

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>

4.效果图

在这里插入图片描述

四.路由

1.引入路由文件

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

2.引入路由组件

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

引入组件

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

渲染组件

<template id='pagea'>
	<page-a ></page-a>
</template>

注册路由

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'
		}
	}
})

全部代码

<!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>

3.最终效果

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^