• Vue路由&nodejs环境搭建

    目录

    一，路由

    1.路由

    2.无痕浏览

     二，nodejs环境搭建

    1.环境搭建

    2.ElementUI简介

    一，路由

    1.路由

    在学习路由前我们先要了解SPA是什么

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

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

    SPA实现思路和技术点
       1 ajax
       2 锚点的使用（window.location.hash #）
       3 hashchange 事件 window.addEventListener("hashchange",function () {})
       4 监听锚点值变化的事件，根据不同的锚点值，请求相应的数据
       5 原本用作页面内部进行跳转，定位并展示相应的内容

    在实现路由时需要导入路由的js依赖

    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js">script>

    操作步骤：

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

     通过vue的路由可实现多视图的单页Web应用(基于html的SPA)

     引入依赖库 

    1. <script src="js/vue.js">script>
    2.       <script src="js/vue-router.min.js">script>

    创建自定义组件

     const Home = Vue.extend({});

    <代码演示>

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<title>路由title>
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			
    13. 			
    14. 			<router-link to="/" replace>首页router-link>
    15. 			<router-link to="/Abort">关于本站router-link>
    16. 			
    17. 			<router-view>router-view>
    18. 		div>
    19. 	body>
    20. 	<script type="text/javascript">
    21. 		//2.定义需求中需要用到的组件
    22. 		//const也是es6写法，代表该变量是对象
    23. 		const Home = Vue.extend({
    24. 			template: "
      Holle
      aaaaa
      "
    25. 		});
    26. 		const Abort = Vue.extend({
    27. 			template: "
      发展史
      aaaaa
      "
    28. 		})
    29.  
    30. 		//3.定义路由跳转路径(集合)
    31. 		let routes = [{
    32. 			path: '/',
    33. 			component:Home
    34. 		}, {
    35. 			path: '/Home',
    36. 			component: Home
    37. 		}, {
    38. 			path: '/abort',
    39. 			component: Abort
    40. 		}];
    41. 		
    42. 		//4.得到路由对象
    43. 		const router = new VueRouter({routes:routes})
    44. 		//绑定边界
    45. 		new Vue({
    46. 			el: '#app',
    47. 			//5.将路由与Vue实例进行绑定
    48. 			router,
    49. 			data() {
    50. 				return {
    51. 					msg: 'holle',
    52. 				}
    53. 			}
    54. 		})
    55. 	script>
    56. html>

    解析：

    注1：根路径“/”

    注2：route和router的区别
               route：路线
               router：路由器
               路由器中包含了多个路线

    补充：

        前面使用RouterLink和RouterView组件导航和显示

                    
                   
                   
                    go to Home
                   
                     

    2.无痕浏览

    1.replace
          设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

    2.补充：vue中导航中的后退-前进-编程式导航
          this.$router.go(-1) ：代表着后退
          this.$router.go(1)：代表着前进
          this.$router.push({    切换到name为home的路由

    3 append
          设置 append 属性后，则在当前 (相对) 路径前添加基路径。

    4. 当想要 渲染成某种标签，例如

  • 。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航

    5 active-class
          设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代

    6 exact-active-class
          配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。
         
     7 event
          声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。 
     

    • 效果图

    点击首页

     点击关于本站（ 当添加了replace，点击回退，返回时只会返回到首页）

     二，nodejs环境搭建

    1.环境搭建

    步骤：

            1、下载nodeJS的安装包

    下载安装包时可以去官网（下载 | Node.js）上下载（版本有很多，都存在区别选择相应的版本下载即可）


            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 启动项目

    2.ElementUI简介

    官网地址：https://element.eleme.cn/#/zh-CN/component/installation

    1. Node.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的包管理工具（package manager）。

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

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

       注1：npm==maven  有点类似
     

    官网图

     

     

  • 相关阅读:
    Web中的Bias（更新中）
    如何在Linux用Docker部署MySQL数据库并远程访问本地数据库
    WebRTC 的多媒体音视频帧传输协议
    32位单片机越来越多人用？简单跟上科技趋势
    【最全】linux服务器上安装Mysql
    Vue 使用vue-cli构建SPA项目（超详细）
    django及DRF流程源码分析
    基于STM32的蔬菜大棚温湿度智能控制系统设计
    测试开发都这么厉害了？为啥不直接转业务开发？
    什么是模拟芯片，模拟芯片都有哪些测试指标？
  • 原文地址：https://blog.csdn.net/weixin_66202611/article/details/126717164