• Vue路由

    目录

    一、路由

    1.路由 

    2.SPA是什么

    3.实现路由思路有7个步骤

    二、无痕浏览 

    三、NodeJs环境搭建 

    1.Node.js是什么 

    2.npm是什么 

     3.下载

    4.配置环境变量 

    5.测试 

    6.配置npm的全局模块的下载地址 

     7.下载github的Vue的项目解压

    7、在通过npm run dev 启动项目 

    8.总结步骤 

    四、ElementUI简介 

    五、总结 

     1.路由

    2.无痕浏览    replace

    3.NodeJS环境搭建 

    4.ELement UI 

    一、路由

    1.路由 

    我们之前点击导航栏是跳转页面，现在不再是跳转页面了，是通过路由的方式，跳转到组件

    2.SPA是什么

     单页Web应用（single page application，SPA），就是只有一个Web页面的应用，
       是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序

       单页面应用程序：
         只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
       传统多页面应用程序：
         对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
       
       优势
         减少了请求体积，加快页面响应速度，降低了对服务器的压力
         更好的用户体验，让用户在web app感受native app的流畅
     

    3.实现路由思路有7个步骤

    1、确保引入Vue.vue-router的js依赖
    2、首先需要定义组件（就是展示不同的页面效果）
    3、需要将不同的组件放入一个容器中（路由集合）
    4、将路由集合组装成路由器
    5、将路由挂载到Vue实例中
    6、定义锚点
    7、跳转

    实现路由思路的代码块：  

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 		
    8. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js">script>
    9. 		<title>title>
    10. 	head>
    11. 	<body>
    12. 		
    13. 		<div id="app">
    14. 			
    15. 			<router-link to="/home">首页router-link>
    16. 			<router-link to="/about">关于router-link>
    17. 			
    18. 			<router-view>router-view>
    19. 		div>
    20. 	body>
    21. 	<script type="text/javascript">
    22. 		// 2.定义组件  首页对应的组件,关于对应的组件
    23. 		// const/let/var
    24. 		// Vue.component('Home',{})
    25. 		const Home = Vue.extend({
    26. 			// 模板
    27. 			template:'
      主界面
      '
    28. 		})
    29. 		const About = Vue.extend({
    30. 			// 模板
    31. 			template:'
      关于
      '
    32. 		})
    33. 		
    34. 		// 3.定义路由与组件的对应关系
    35. 		let routes = [
    36. 			{path:'/home',component:Home},
    37. 			{path:'/about',component:About},
    38. 		]
    39. 		
    40. 		// 4.生成路由对象  一定要是routes
    41. 		const router = new VueRouter({routes:routes});
    42. 		
    43. 		// 创建实例
    44. 		new Vue({
    45. 			// 挂载实例
    46. 			el:'#app',
    47. 			router,// 5.将vue对象挂载到vue实例中
    48. 			// 变量区
    49. 			data() {
    50. 				return {
    51. 					msg:'hello vue'
    52. 				}
    53. 			}
    54. 		})
    55. 	script>
    56. html>

    运行结果如图所示： 

    二、无痕浏览 

    无痕浏览的意思是，我们消除上一页的记录，好比如：

    我们在百度搜索一张图片，点击图片，然后我们在按返回键如图所示：

      

    三、NodeJs环境搭建 

    1.Node.js是什么 

    Node.js 是JavaScript程序的运行环境、只是封装成运行环境

    NodeJS是js脚本语言的运行环境

    1.1 Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。
      1.2 Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言 

      注1：Node.js-->JavaScript运行环境，开发语言是：javascript
           J2EE   -->Java运行环境， 开发语言是java
      注2：Node.js v10.15.3文档地址：http://nodejs.cn/api/

    2.npm是什么 

    npm其实是Node.js的包管理工具，相当于后台的maven

    npm其实是Node.js的包管理工具（package manager）。

       为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。
       如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。
       于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，
       直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

       更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，
       npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

       注1：npm==maven  有点类似

     3.下载

       下载地址：https://nodejs.org/zh-cn/download/ 
          选择相应的版本下载，本章使用的是：node-v10.15.3-win-x64.zip 

    放在非中文目录下解压

    我们就解压到我的E盘里面的去如图所示：

    4.配置环境变量 

    1.这个配置跟我们java配置一样的

     2.在去path里面使用

     

    5.测试 

     徽标键+r然后输入cmd    测试语法：node -v         npm -v

    就可以看到相对应的版本的问题，特别要 注意版本问题

     

    6.配置npm的全局模块的下载地址 

    这些命令一一执行，必须要一个一个的执行

    1.文件的缓存       

             npm config set cache "E:\temp\nodeJS\node-v10.15.3-win-x64\node_cache"

    2.设置全局变量
            npm config set prefix "E:\temp\nodeJS\node-v10.15.3-win-x64\node_global"

    3.加快npm，js依赖下载的速度

    我们安装淘宝的cnpm镜像，因为国外的很慢。我们可以采用cnpm install  来代替npm安装 
            npm config set registry https://registry.npm.taobao.org/

    就会出现一个

     里面就是我们执行上面的语句

     7.下载github的Vue的项目解压

    解压

     6、在解压的项目中是没有node_modules的，在工程的根目录下需要通过npm              install进行再次依赖下载（package.json）

    注意一定要进入到这里面然后输入cmd

     

    这样就下载好了

    去看一下那个文件夹有多少兆     一共大概就是190多兆，如果没有这么多，比如是150兆，然后这个项目就会运行不起来，删了重新来过

    7、在通过npm run dev 启动项目 

    或者说，在这里报了一个错，下面的就实现不了，就要删了重新下，这里一般都不会 

    运行好的项目，这里随便登录，只要不为空就可以了 

    登录进来如图所示：

    如果说这个项目不看了就可以把cmd执行码关闭掉 

    8.总结步骤 

    只要跟着这7个步骤，一般都会没有问题  

     1、下载nodeJS的安装包
        2、解压nodeJS的解压包，在根目录下新增两个文件夹node_global和node_cache
        3、配置环境变量
            NODE_HOME:配置的是nodeJS解压的根路径D:\initPath\node-v10.15.3-win-x64
            path:%NODE_HOME%;%NODE_HOME%\node_global
            node -v
            npm -v
        4、配置npm的全局模块的下载地址
            npm config set cache "D:\initPath\node-v10.15.3-win-x64\node_cache"
            npm config set prefix "D:\initPath\node-v10.15.3-win-x64\node_global"
            npm config set registry https://registry.npm.taobao.org/
        5、下载github的Vue的项目解压
        6、在解压的项目中是没有node_modules的，在工程的根目录下需要通过npm              install进行再次依赖下载（package.json）
        7、在通过npm run dev 启动项目

    四、ElementUI简介 

     官网：Element - The world's most popular Vue UI framework

    前后端分离采用下面的这个  npm i element-ui -s 

     我们element UI有两种开发模式，一种是传统开发模式，二是前后端分离的开发模式

     分比例：

     类型的案例

    它的代码块：

    我们前后端开发模式，是不使用这种开发模式的，这种开发模式只是当做bootstrap，LayUI，easyui去使用。

    前后端分离应该采用第二种开发模式  npm i element-ui -s

    1.  
    2. <!DOCTYPE html>
    3. <html>
    4. 	<head>
    5. 		<meta charset="utf-8">
    6. 		<title>elementui入门</title>
    7. 		<!-- 1. 导入css -->
    8. 		<link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
    9. 		<!-- 2. 引入vue和vue-router-->
    10. 		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    11. 		<!-- 未使用vue路由功能可不导入 -->
    12. 		<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
    13. 		<!-- 3. 引入ElementUI组件 -->
    14. 		<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
    15. 		<style>
    16. 			.el-row {
    17. 				margin-bottom: 20px;
    18.  
    19. 				&:last-child {
    20. 					margin-bottom: 0;
    21. 				}
    22. 			}
    23.  
    24. 			.el-col {
    25. 				border-radius: 4px;
    26. 			}
    27.  
    28. 			.bg-purple-dark {
    29. 				background: #99a9bf;
    30. 			}
    31.  
    32. 			.bg-purple {
    33. 				background: #d3dce6;
    34. 			}
    35.  
    36. 			.bg-purple-light {
    37. 				background: #e5e9f2;
    38. 			}
    39.  
    40. 			.grid-content {
    41. 				border-radius: 4px;
    42. 				min-height: 36px;
    43. 			}
    44.  
    45. 			.row-bg {
    46. 				padding: 10px 0;
    47. 				background-color: #f9fafc;
    48. 			}
    49. 		</style>
    50. 	</head>
    51. 	<body>
    52. 		<div id="app">
    53. 			<ul>
    54. 				<li>
    55. 					<h1>{{ts}}</h1>
    56. 					<p>传统html+vue+elementUI开发</p>
    57. 					<el-row>
    58. 						<el-col :span="24">
    59. 							<div class="grid-content bg-purple-dark">
    60. 								<el-button type="primary" v-on:click="doClick">主要按钮</el-button>
    61. 							</div>
    62. 						</el-col>
    63. 					</el-row>
    64. 					<el-row>
    65. 						<el-col :span="18">
    66. 							<div class="grid-content bg-purple" style="height: 400px;">博客信息</div>
    67. 						</el-col>
    68. 						<el-col :span="6">
    69. 							<div class="grid-content bg-purple-light" style="height: 400px;">分类管理</div>
    70. 						</el-col>
    71. 					</el-row>
    72. 					<el-row>
    73. 						<el-col :span="24">
    74. 							<div class="grid-content bg-purple-dark">版权信息</div>
    75. 						</el-col>
    76. 					</el-row>
    77.  
    78. 				</li>
    79. 			</ul>
    80. 		</div>
    81. 	</body>
    82. 	<script>
    83. 		var vm = new Vue({
    84. 			el: "#app",
    85. 			data: function() {
    86. 				return {
    87. 					ts: new Date().getTime()
    88. 				}
    89. 			},
    90. 			methods: {
    91. 				doClick: function() {
    92. 					console.log('doClick');
    93. 					this.$alert('这是一段内容', '标题名称', {
    94. 						confirmButtonText: '确定',
    95. 						callback: action => {
    96. 							this.$message({
    97. 								type: 'info',
    98. 								message: `action: ${ action }`
    99. 							});
    100. 						}
    101. 					});
    102. 				}
    103. 			}
    104. 		});
    105. 	</script>
    106. </html>

    五、总结 

     1.路由

    分为7个步骤：

            1.导入vue-router.js依赖

            2.定义组件        const Home = vue.extend({})

            3.定义路由与组件的对应关系 [{path:'/home',component:Home,{...}]

            4.获取VueRouter对象  new vueRouter（{routes:routes}） 注意这里一定要是routes

            5.将路由对象挂载到vue实例中

            6.定义锚点       

            7.触发事件       

    2.无痕浏览    replace

    3.NodeJS环境搭建 

      什么是nodeJs：运行JAVAScript脚本语言的环境

    什么是npm：nodeJS中的包管理工具，相当于Java后台中的maven 

    1.下载nodejs的安装包，并解压

    2.再解压目录下的根目录下，新建两个文件夹  node_global、node_cache    

    3.环境变量设置

           NODE_HOME:nodejs安装包的解压目录

            path：%NODE_HOME%;%NODE_HOME%\node_global;

            测试有没有安装好

            node -v

            npm -v

    4.从github中下前端vue项目进行测试     -  资料中有

    5. 通过npm install 下载本项目的js依赖，会在项目根路径生成node_module

    6.通过 npm run dev 启动项目进行测试

    4.ELement UI 

    1.传统开发模式：html+vue+Element UI类似于bootstrap、LayUI、easyui 

    2.前后端分离的开发模式

  • 相关阅读:
    计算机专业毕业设计项目推荐12-志愿者管理系统（Spring+Js+Mysql）
    广州蓝景分享—「web前端素材」使用CSS动画效果(下)
    【数据结构】链表
    D-Star 寻路算法
    JS字符串知识点
    论硬件开发过程中开发文档规范化的重要性
    功率放大器驱动压电陶瓷有哪些应用
    eyb：工资账套页面设计到聊天数据显示（五）
    WPF 的一些坑
    C++：类和对象（三）
  • 原文地址：https://blog.csdn.net/weixin_67465673/article/details/126708464