郑州专业网站制作建设,杭州网站建设开发,开发公司都有什么部门,一家装修的网站怎么做文章目录 一、vue路由1.1 简介1.2 SPA1.3 实例 二、Node.js环境搭建2.1 Node.js简介2.2 npm2.3 环境搭建2.3.1 下载解压2.3.2 配置环境变量2.3.3 配置npm全局模块路径和cache默认安装位置2.3.4 修改npm镜像提高下载速度 2.4 运行项目 一、vue路由
1.1 简介
Vue 路由是 Vue.js… 文章目录 一、vue路由1.1 简介1.2 SPA1.3 实例 二、Node.js环境搭建2.1 Node.js简介2.2 npm2.3 环境搭建2.3.1 下载解压2.3.2 配置环境变量2.3.3 配置npm全局模块路径和cache默认安装位置2.3.4 修改npm镜像提高下载速度 2.4 运行项目 一、vue路由
1.1 简介
Vue 路由是 Vue.js 框架中用于实现单页面应用SPA的路由管理工具。它允许你在应用中定义不同的路由并根据用户的操作动态地切换视图而无需重新加载整个页面。
在 Vue 路由中你可以定义路由规则指定每个路由对应的组件并在需要时进行导航。Vue 路由提供了一些核心的概念和组件包括路由器router、路由视图router-view和路由链接router-link。
路由器router是 Vue 路由的核心它负责管理应用的路由规则并根据用户的导航操作来切换视图。你可以在路由器中定义路由规则指定每个路由对应的组件并配置其他参数如路由守卫、路由模式等。路由视图router-view是用于显示当前路由对应组件的容器。当用户导航到不同的路由时路由视图会根据当前路由的配置动态地渲染相应的组件。路由链接router-link是用于在应用中生成导航链接的组件。你可以使用路由链接来创建导航菜单、导航按钮等它会根据配置的路由规则生成正确的链接并在用户点击时触发路由切换。
1.2 SPA
SPA 是单页面应用Single Page Application的缩写。它是一种 Web 应用程序的架构模式通过在加载初始页面后动态地更新页面的部分内容而不是每次用户操作都重新加载整个页面。
单页面应用通过使用 JavaScript 和 AJAX 技术将应用的不同部分组织为组件并在用户进行导航时动态地更新组件的内容而不需要重新加载整个页面。
客户端 vs. 服务端路由
服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时浏览器会从服务端获得全新的 HTML然后重新加载整个页面。
然而在单页面应用中客户端的 JavaScript 可以拦截页面的跳转请求动态获取新的数据然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验尤其是在更偏向“应用”的场景下因为这类场景下用户通常会在很长的一段时间中做出多次交互。这种方式可以提供更快的用户响应时间减少不必要的网络请求同时也提供了更流畅的用户体验。
1.3 实例
!DOCTYPE html
htmlheadmeta charsetutf-8title路由/title!-- 1、确保引入Vue.vue-router的js依赖 --script srchttps://cdn.bootcss.com/vue/2.6.10/vue.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js/script/headbodydiv idapph1{{msg}}/h1!-- 6、定义锚点 --router-link to/home首页/router-linkrouter-link to/about关于/router-link!-- 使用RouterLink组件导航. --!-- router-link 默认会被渲染成一个 a 标签 --!-- 通过传入 to 属性指定链接. --router-view /router-view!-- 使用RouterView组件显示. --/div/bodyscript/* 2、定义组件 */var home Vue.extend({template: div首页内容路由/div});var about Vue.extend({template: div路由相关介绍/div});/* 注1extend是构造一个组件的语法器. 你给它参数他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里也可以在任意vue模板里使用car组件 *//* 3、需要将不同的组件放入一个容器中路由集合 */var routes [{component: home,path: /home}, {component: about,path: /about}]/* 4、将路由集合组装成路由器 */var router new VueRouter({routes});/* 5、将路由挂载到Vue实例中 */new Vue({el: #app,router,data() {return {msg: 路由};}});/script
/html 二、Node.js环境搭建
2.1 Node.js简介
Node.js是一个开源的、跨平台的JavaScript运行时环境它允许开发者使用JavaScript语言编写服务器端的应用程序。传统上JavaScript主要用于在浏览器中编写前端代码但是Node.js的出现使得开发者可以将JavaScript应用于服务器端开发。
Node.js基于Chrome V8引擎它提供了一组丰富的内置库和模块使得开发者可以轻松地构建高性能、可扩展的网络应用程序。Node.js采用事件驱动、非阻塞I/O模型这意味着它可以处理大量并发请求而不会阻塞其他操作从而提供了出色的性能和可伸缩性。
Node.js的应用场景非常广泛包括构建Web服务器、API服务器、实时应用程序、命令行工具等。它还可以与各种数据库进行交互如MongoDB、MySQL等以及与其他服务进行通信如HTTP、TCP、UDP等。 Node.js–JavaScript运行环境开发语言是javascript J2EE --Java运行环境 开发语言是java 2.2 npm
npm 是Node Package Manager的缩写是一个用于管理和共享JavaScript代码的工具。它是Node.js的默认包管理器用于安装、发布和管理JavaScript模块。
通过npm开发者可以轻松地安装和更新依赖项以及共享自己编写的代码供他人使用。npm提供了一个庞大的开源代码库开发者可以从中获取各种功能强大的模块以加快开发速度并提高代码质量。 类似于maven 2.3 环境搭建
2.3.1 下载解压
官网 Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本 本章使用的是node-v18.16.1-win-x64 下载后解压到指定文件夹就行并在解压后的目录下建立node_global和node_cache这两个目录 注1新建目录说明 node_globalnpm全局安装位置 node_cachenpm缓存路径 注2本教程是将文件解压到D:\develop\node-v18.16.1-win-x64后面都以此为例实际开发中请修改成自己的解压目录 2.3.2 配置环境变量
与配置java非常相似
新增NODE_HOME值为D:\develop\node-v18.16.1-win-x64 在PATH添加%NODE_HOME%与%NODE_HOME%\node_global 测试在cmd窗口输入node -v与npm -v 出现版本即表示配置成功
2.3.3 配置npm全局模块路径和cache默认安装位置
打开cmd分开执行如下命令 npm config set cache “D:\develop\node-v18.16.1-win-x64\node_cache” npm config set prefix “D:\develop\node-v18.16.1-win-x64\node_global” 注1将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来 注2如果执行命令卡死可以删除C:\Users\用户名.npmrc 后重新执行。用户名为当前电脑的用户名 注3“D:\develop\node-v18.16.1-win-x64”双引号不能少 2.3.4 修改npm镜像提高下载速度
可以使用 cnpm 或 直接设置 --registry 推荐设置 --registry –registry ## 设置淘宝源npm config set registry https://registry.npm.taobao.org/## 查看源可以看到设置过的所有的源npm config get registry注1其实此步骤的内容就是将以下代码添加到C:\Users\用户名.npmrc文件中 registryhttps://registry.npm.taobao.org cnpm npm install -g cnpm --registryhttps://registry.npm.taobao.org注1cnpm安装完成后以后就可以用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删掉下载的破碎文件重新下载2.4 运行项目
在项目文件中打开cmd输入 nmp i
命令执行完项目文件中会出现node_modules文件
命令执行完后你会发现项目的根目录下多了一个node_modules文件夹那里面就是从npm远程库里下载的模块然后“安装”到你的项目中此步骤可理解成修改maven的pom文件添加依赖然后maven再从中央仓库下载依赖然后输入 npm run dev
