• vue路由&nodejs环境搭建

    目录

    一、路由

    1. SPA是什么

    3.路由思路

    二、无痕浏览

    三、nodejs环境配置

    1. Node.js是什么

    2. npm是什么

    3.node.js环境配置

    一、路由

    1. SPA是什么

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

    单页面应用程序：
         只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
    传统多页面应用程序：
         对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面

    优势
         减少了请求体积，加快页面响应速度，降低了对服务器的压力
         更好的用户体验，让用户在web app感受native app的流畅

    2. SPA实现思路和技术点

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

    3.路由思路

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    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. 	head>
    10. 	<body>
    11. 		<div id="app">
    12. 			
    13. 			<router-link to="/home">首页router-link>
    14. 			<router-link to="/about">关于router-link>
    15. 			
    16. 			<router-view>router-view>
    17. 		div>
    18. 	body>
    19. 	<script type="text/javascript">
    20. 	//2.定义组件   首页内容对应的组件、关于对应的组件
    21. 		const Home = Vue.extend({
    22. 			template:'
      首页
      '
    23. 		})
    24. 		const About = Vue.extend({
    25. 			template:'
      关于
      '
    26. 		})
    27. 		
    28. 		//3.定义路由与组件的对应关系
    29. 		let routes = [
    30. 			{path:'/home',component:Home},
    31. 			{path:'/about',component:About},
    32. 		]
    33. 		
    34. 		//4.生成路由对象
    35. 		const router = new VueRouter({routes:routes});
    36. 		
    37. 		new Vue({
    38. 			el:"#app",
    39. 			router,//5.将vue对象挂载带vue实例中
    40. 			data() {
    41. 				return {
    42. 					msg:'666'
    43. 				}
    44. 			}
    45. 		})
    46. 	script>
    47. html>

     注：点击首页跳到首页，点击关于跳到关于

    二、无痕浏览

    2. 			<router-link to="/home" replace="">首页router-link>
    3. 			<router-link to="/about">关于router-link>

    三、nodejs环境配置

    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）

       注1：npm==maven  有点类似

    3.node.js环境配置

    ①下载

    下载地址：https://nodejs.org/zh-cn/download/ 

     

    ②解压

    将文件解压到指定位置(例如：D:\initPath)，并在解压后的目录下建立node_global和node_cache这两个目录

     注1：新建目录说明
               node_global：npm全局安装位置
               node_cache：npm缓存路径

    ③配置环境变量

    新增NODE_HOME，值为：D:\initPath\node-v10.15.3-win-x64
    修改PATH并在最后添加：;%NODE_HOME%;%NODE_HOME%\node_global;

     注2：测试安装是否成功：打开cmd窗口，输出如下命令会输出NodeJs和npm的版本号
               node -v
               npm -v

    ④安装

     配置npm全局模块路径和cache默认安装位置
          打开cmd，分开执行如下命令：
          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"

    注1：将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来
    注2：如果执行命令卡死，可以删除C:\Users\用户名\.npmrc 后重新执行。（用户名：为当前电脑的用户名）
    注3："D:\initPath\node-v10.15.3-win-x64\node_global"，双引号不能少

    修改npm镜像提高下载速度(可以使用 cnpm 或 直接设置 --registry ，推荐设置 --registry)
      registry
              ## 设置淘宝源
              npm config set registry https://registry.npm.taobao.org/
              ## 查看源，可以看到设置过的所有的源
              npm config get registry
     
              注1：其实此步骤的内容就是将以下代码添加到C:\Users\用户名\.npmrc文件中
                   registry=https://registry.npm.taobao.org
       cnpm
              npm install -g cnpm --registry=https://registry.npm.taobao.org

              注1：cnpm安装完成后，以后就可以用cnpm命令代替npm命令, 此时npm还是会用官方镜像，cnpm会用国内镜像
              注2：如果要恢复成原来的设置，执行如下：
                   npm config set registry https://registry.npmjs.org/

    ⑤验证安装结果

    查看npm全局路径设置情况
              ## 此步骤随便全局安装一个模块就可以测评
              npm install webpack -g
              ## 以上命令执行完毕后，会生成如下文件
              %node_home%\node_global\node_modules\webpack
              注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载

    ⑥如何运行下载的Node.js项目

    将下载的项目解压到指定目录

    进入指定目录

    ⑦进行依赖安装

     依赖安装成功

     ⑧启动项目

    npm run dev

    运行项目

     

     

  • 相关阅读:
    顺序表ArrayList
    低代码平台的核心价值与优势
    CSS3 —— CSS3 基础（边框、渐变、文本效果）
    使用yum安装jdk，并配置环境变量
    弘辽科技：拼多多商品转化率低有什么影响？多少正常？
    第二章 类与名称空间
    Spring Cloud Gateway + Knife4j 4.3 实现微服务网关聚合接口文档
    Google codelab WebGPU入门教程源码＜6＞ - 使用计算着色器实现计算元胞自动机之生命游戏模拟过程(源码)
    数据挖掘一般框架
    [21天学习挑战赛——内核笔记]（九）——sysfs相关API
  • 原文地址：https://blog.csdn.net/yzq102873/article/details/126717305