前端vue-cli相关知识与搭建过程(项目创建,组件路由)very 详细

news2024/9/21 0:51:54

一.关于vue-cli

1.什么是vue

Vue (读音 /vju ː /，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue

的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三

大主流框架！ vue访问官网： https://v2.cn.vuejs.org/

如下：

2.未使用vue前前端如何写

未使用vue前要写前端必须通过对一个个的标签进行操作，html是前端主体，css负责修饰html，javasqrt负责对html的标签产生的动作，如点击标签,按钮等进行操作，javasqrt操作标签时都要拿到，频繁的对标签进行操作导致书写麻烦，代码量大，所以就产生了vue(框架)。

如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/index1.css" rel="stylesheet"/>
		<script>
			function test(){
		var div=document.getElementById("div1");
	        div.style.backgroundColor="#FFFFFF";
		
					}
			function test1(){
				var div1=document.getElementById("div1");
				div1.style.backgroundColor="green";
			}
		</script>
	</head>
	<body>
	<input type="button" value="隐藏" class="bottom" onclick="test()" />
	<input type="button" value="显示" class="bottom1" onclick="test1()"/>
	<div class="main"  style="" id="div1"></div>
     
	</body>
</html>

3.传统的vue(框架)

传统的vue比起未使用vue前大大简化了操作，首先最直观的好处就是不需要在对标签操作时先拿到标签只需要直接操作数据即可，大大提高了程序的运行效率，其次体积小使用压缩后的，并且实现了双向数据绑定,简化 Dom 操作，生态丰富、学习成本低市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件！来即用实现快速开发。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<!-- {{ message }}后面可以跟数据 -->
	<!-- 	v-text
		作用是设置标签的文本内容
		默认写法会替换全部内容，使用差值表达式可以替换指定内容
		内部支持写表达式
		<p v-text="message">非凡英才</p>
		<p>{{message}}非凡英才</p>
		v-html
		作用是设置元素的 innerHTML
		内容中有 html 结构会被解析为标签
		内部支持写表达式
		<p v-html="message">非凡英才</ -->
		

		<div id="app">
		  <p>{{ message }}aaaaa</p>
		 <!-- <p v-text="message"></p>
		  <p v-html="message"></p> -->
		  <input type="button" value="测试" v-on:click="test1()"/>
		  <input type="text" value="测试二" v-model="message"/>
		</div>
		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
			    message:'<b>Hello</b>',
			  },methods:{
				  test1(){
					  this.message=this.message.split("").reverse("").join("");
					
					 /* test2(){
		                   
							} */
				  }
			  }
			})
		</script>

	</body>
</html>

4.现在的vue-cli

现在的vue-cli对传统的vue实现了进一步的优化，首先传统的vue虽然也不用对标签进行操作，但是每次创建一个项目时要写多个页面时就要创见多个html相当于每个html都是独立的，为了我们不需要频繁的导入外部依赖与下载，就产生了现在的vue-cli,现在的vue-cli每创建一个项目只有一个html，这就使得我们不需要重复导入依赖文件，与项目有关的依赖文件只需要在这一个html中配置一次即可。如下：