一，Vue路由
什么是Vue路由？
Vue路由是Vue.js的一部分，是一个官方的Vue.js插件，用于管理单页面应用程序的路由。它允许您在应用程序中使用URL路径和参数来管理不同的页面视图，而无需刷新页面。使用Vue路由，您可以轻松地设置和管理客户端路由，包括嵌套和动态路由。它还提供了一些高级功能，例如路由守卫，用于在页面之间导航或访问受限制的页面时执行额外的逻辑。
核心
Vue路由的核心是VueRouter实例，它可以通过Vue.js应用程序的组件和路由定义来创建。路由定义包含一组路由规则，每个规则指定URL路径和相应的Vue.js组件。当用户浏览到指定的路径时，Vue路由会根据路由规则找到对应的组件并加载它，从而在应用程序中切换到新的视图。
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script> <title>Vue路由</title> </head> <body> <div id="app"> <router-link to="home">首页</router-link> <router-link to="about">关于</router-link> <router-view></router-view> </div> <Script type="text/javascript"> //定义两个组将 var Home=Vue.extend({ template:'<div>网站首页。。。。</div>' }); var About=Vue.extend({ template:'<div>网站发展。。。。。。</div>' }); //2.定义组件与路基对应关系 var routes=[{ component:Home, path:'/home' }, { component:About, path:'/about' }]; //3.通过路由关系获取路由对像 var router = new VueRouter({routes}); //4.将路由对象挂载到路由对象 new Vue({ el:'#app', router, data(){ return{ msg:'xzs' } } }) </Script> </body> </html>
效果：
点击首页
点击关于
二.node.js的环境配置
nodejs是什么？
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它使用事件驱动、非阻塞I/O模型，使其轻量又高效地处理并发请求。Node.js可用于服务器端编程、命令行工具和客户端编程。
nodejs的特点
- 非阻塞I/O：适合高并发请求的处理。
- 处理数据：Node.js非常适合处理数据密集型的实时应用程序。
- 轻量级：它非常快，因为它使用JavaScript运行在V8引擎上。
- 模块化：其模块化机制可以让开发者更加方便地扩展应用，同时代码的可重用性也得到提高。
下载
由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境。
Node.js支持多个操作系统平台，如Windows、Linux、macOS等。在官网中下载对应的版本并按照提示进行安装即可。
例如:我的是windows系统，所以我选择wendows，64位；
配置
将下载的文件解压到指定路径（路径不能有中文），并在解压后的目录下建立
node_global(npm全局安装位置)
和 node_cache(npm缓存路径)这两个目录
环境变量配置：
NODE_HOME: 配置的是nodeJS解压的根路径 如：D:\tools\node-v10.15.3-win-x64
添加path：
PATH：%NODE_HOME%
PATH：%NODE_HOME%\node_global
打开cmd测试
输入 node -v，npm -v
配置npm全局模块路径和cache默认安装位置
打开cmd，分开执行如下命令：把路径替换成自己的路径
安装淘宝镜像
cmd中输入：npm config set registry https://registry.npm.taobao.org/
成功后，在c盘的User下面看到一个.npmrc文件
查看npm全局路径设置情况
在cmd中输入npm install webpack -g
以上命令执行完毕后，会生成如下文件：
运行下载的Node.js项目
准备一个没有下载js的项目， 然后进到该项目的根目录doc界面，输入 npm i 指令，下载依赖
最后输入npm run dev 指令开始运行项目
