Vue路由及NodeJS环境搭建

洛水&天依

已于 2023-07-20 21:44:39 修改

阅读量212

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-20 21:44:22 首次发布

本文链接：https://blog.csdn.net/uit67t567/article/details/131839665

版权

一. 路由

1. SPA是什么

2. SPA实现思路和技术点

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

一. 路由

1. SPA是什么

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

2、单页面应用程序：
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中

3、传统多页面应用程序：
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面

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

2. SPA实现思路和技术点

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

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

1、引入vue-router依赖

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

2、定义两个组件展示相关业务（即以后的.vue文件）

var Home = Vue.extend({
	template: '<div>首页展示的内容</div>'
});
var About = Vue.extend({
	template: '<div>网页发展的历史及更新日志</div>'
});

注1：extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件
你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用car组件

注2：也可以用以前的方式创建和获得组件，效果也是一样的
Vue.component(“button-counter”, {…});//创建组件
3、形成组件与请求路径的对应关系
例如：浏览器访问 http://localhost:8080/home 实际访问的是Home组件

var routes = [{
	component: Home,
	path: '/home'
}, {
	component: About,
	path: '/about'
}];

4、将路由关系与路由对象绑定

const router = new VueRouter({routes: routes});

5、将路由挂载到vue实例

new Vue({
	el: '#app',

	// 5. 将路由挂载到Vue实例中
	router,

	data() {
		return {
		}
	}
})

6、发送相关请求，并显示请求对应的内容

<router-link to="/home">首页</router-link>
<router-link to="/about">关于本站</router-link>
<router-view></router-view>

注：默认会被渲染成一个 <a> 标签，通过传入 to 属性指定链接

在这里插入图片描述

4. router-link相关属性

1、to
表示目标路由的链接

<router-link to="/home">首页</router-link>

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

<router-link :to="{ path: '/home'}" replace></router-link>

vue中导航中的后退-前进-编程式导航

this.$router.go(-1) ：代表着后退
this.$router.go(1)：代表着前进
this.$router.push({    切换到name为home的路由
	name:'home'
});

3、append
设置 append 属性后，则在当前 (相对) 路径前添加基路径.例如，我们从 /a 导航到一个相对路径 b，如果没有配置append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

4、有时候想要 <router-link> 渲染成某种标签，例如 <li> 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航

<router-link to="/foo" tag="li">foo</router-link>

<!-- 渲染结果 -->
<li>foo</li>

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

6、exact-active-class
配置当链接被精确匹配的时候应该激活的 class 可以通过以下代码来替代

7、event
声明可以用来触发导航的事件可以是一个字符串或是一个包含字符串的数组

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

二. NodeJS环境搭建

1. Node.js是什么

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

2. npm是什么

npm其实是Node.js的包管理工具（package manager）
与后端的Maven相似

3. Node.js环境搭建

由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境
下载地址：https://nodejs.org/zh-cn/download/
注1：Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本
解压
将下载的文件解压到相应的位置,在根目录下建立node_global和node_cache这两个目录
说明:
node_global：npm全局安装位置
node_cache：npm缓存路径
环境变量
新增NODE_HOME，值为：D:\initPath\node-v10.15.3-win-x64
在这里插入图片描述

修改PATH并在最后添加：;%NODE_HOME%;%NODE_HOME%\node_global;

注1：环境变量查看
```
 echo %node_home%
 
 echo %path%
```
注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)
1. –registry
  
  设置淘宝源
```
npm config set registry https://registry.npm.taobao.org/
```
  查看源，可以看到设置过的所有的源
```
npm config get registry
```
  注1：其实此步骤的内容就是将以下代码添加到C:\Users\用户名.npmrc文件中
```
 registry=https://registry.npm.taobao.org
```

2.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/

6.版本验证(同步骤3.3，注2)
1. 版本验证(同步骤3.3，注2)

 node -v
 
 npm -v

2.查看淘宝镜像设置情况

 npm get registry

3.查看npm全局路径设置情况;此步骤随便全局安装一个模块就可以测评

 npm install webpack -g

以上命令执行完毕后，会生成如下文件

 %node_home%\node_global\node_modules\webpack

注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载

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

将下载的项目解压到指定目录，本例是解压到：D:\temp\vueproject，后面都以此为例

打开命令窗口
切换到d盘
进入指定目录
```
cd E:\temp\vueproject
```
进行依赖安装(关键)
命令执行完后，你会发现，项目的根目录下多了一个node_modules文件夹，
那里面就是从npm远程库里下载的模块，然后“安装”到你的项目中，
此步骤，可理解成修改maven的pom文件添加依赖，然后maven再从中央仓库下载依赖
那pom文件在哪里呢？其实就是项目中的package.json
```
 npm install
 或
 npm i
```
启动项目
```
 npm run dev
```

洛水&天依

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue路由及NodeJS环境搭建

设置 append 属性后，则在当前 (相对) 路径前添加基路径.例如，我们从 /a 导航到一个相对路径 b，如果没有配置append，则路径为 /b，如果配了，则为 /a/b。注3：“D:\initPath\node-v10.15.3-win-x64\node_global”，双引号不能少。新增NODE_HOME，值为：D:\initPath\node-v10.15.3-win-x64。将下载的项目解压到指定目录，本例是解压到：D:\temp\vueproject，后面都以此为例。
复制链接

扫一扫