1、vue路由和无痕浏览

1.1、SPA是什么

1.2、SPA实现思路和技术特点

1.2.1、技术特点

1.2.2、思路

1.3、通过vue的路由可实现多视图的单页Web应用

1.4、router-link相关属性

1.5、无痕浏览

1.6、代码展示

2、nodeJS环境搭建

2.1、node.js是什么

2.2、npm是什么

2.3、环境搭建

3、ElemenUI简介

3.1、传统开发模式

1、vue路由和无痕浏览

1.1、SPA是什么

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

1.2、SPA实现思路和技术特点

1.2.1、技术特点

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

1.2.2、思路

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

1.3、通过vue的路由可实现多视图的单页Web应用

3.0 引入依赖库
script src=“js/vue.js”>
script src=“js/vue-router.min.js”>
3.1 创建自定义组件，例如：Home和Abort组件
const Home = Vue.extend({});
注1：extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件
你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用car组件
注2：也可以用以前的方式创建和获得组件，效果也是一样的
Vue.component(“button-counter”, {…});//创建组件
var ButtonCounter = Vue.component(‘button-counter’);//获得组件
3.2 定义路由(即路线),
var routes = [{path: ‘/about’,component: About}];
注1：根路径“/”
3.3 创建路由器实例,然后传 routes 配置
const router = new VueRouter({routes:routes});
注1：route和router的区别
route：路线
router：路由器
路由器中包含了多个路线
3.4 创建和挂载根实例。
var vm = new Vue({router: router}).$mount(‘#app’);
3.4 前面使用RouterLink和RouterView组件导航和显示
<!- 使用RouterLink组件导航. -->
<!- router-link> 默认会被渲染成一个 <a> 标签 -->
<!- 通过传入 to 属性指定链接. -->
router-link to=“/home”>go to Home
<!- 使用RouterView组件显示. -->
router-view>/router-view>

1.4、router-link相关属性

4.1 to
表示目标路由的链接
router-link to=“/home”>Home/router-link>
router-link v-bind:to=“‘home’”>Home/router-link><!- 使用 v-bind 的 JS 表达式 -->
4.2 replace
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。
router-link :to=“{ path: ‘/home’}” replace>
vue中导航中的后退-前进-编程式导航
this.r o u t e r . g o ( − 1 ) ：代表着后退 t h i s . router.go(-1) ：代表着后退 this.router.go(−1)：代表着后退this.router.go(1)：代表着前进
this.$router.push({ 切换到name为home的路由
name:‘home’
});
4.3 append
设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
router-link :to=“{ path: ‘relative/path’}” append>/router-link>
4.4 有时候想要 router-link> 渲染成某种标签，例如 li>。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航
router-link to=“/foo” tag=“li”>foo/router-link>
<!- 渲染结果 -->
li>foo/li>
4.5 active-class
设置链接激活时使用的 CSS 类名。可以通过以下代码来替代
4.6 exact-active-class
配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。
4.7 event
声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。
router-link v-bind:to = “{ path: ‘/route1’}” event = “mouseover”>Router Link 1/router-link>

1.5、无痕浏览

主要为replace=“replace”

1.6、代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><!-- 1.引入路由的js依赖 --><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script></head><body><div id="app"><!-- 7.触发的时间 --><router-link to="/home" replace="replace">首页</router-link><router-link to="/about">关于</router-link><!-- 定义锚点 --><router-view></router-view></div></body><script>//2.定义组件const Home=Vue.extend({template:'<div>这是首页内容，展示最新的10篇博客</div>'});const About=Vue.extend({template:'<div>这是关于本站显示的内容区域，本站的发展史。。。</div>'});// 3.定义路由与组件的对应关系let routes = [{path:'/home',component:Home},{path:'/about',component:About},]// 4.生成路由对象const router = new VueRouter({routes:routes});new Vue({el:'#app',router,//5.将vue对象挂载到vue实例中data(){return {msg:'hello vue!!!'};}})</script>
</html>

2、nodeJS环境搭建

2.1、node.js是什么

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

2.2、npm是什么

npm其实是Node.js的包管理工具（package manager）

2.3、环境搭建

1、下载nodeJS的安装包
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 启动项目

当你按照步骤操作完成之后，执行完第七步你就会进入这个界面当进入这个界面就意味着你成功了

3、ElemenUI简介

3.1、传统开发模式

html+vue+ElememtUI类似于Bootstrap、Layui、easiyu

vue路由、无痕浏览和nodeJS环境搭建、ElementUI简介相关推荐

vue路由无痕浏览nodeJS环境搭建ElementUI简介
目录一.vue路由&无痕浏览 1. SPA是什么 2. SPA实现思路和技术点 ①技术点 ②思路 3. 通过vue的路由可实现多视图的单页Web应用(基于html的SPA) 4. route ...
vue路由无痕浏览nodeJS环境搭建
目录一.vue路由&无痕浏览 1. SPA是什么 2. SPA实现思路和技术点 ①技术点 ②思路 3. 通过vue的路由可实现多视图的单页Web应用(基于html的SPA) 4. route ...
Vue路由--无痕浏览 NodeJs环境搭建
文章目录一.路由二.SPA是什么三.路由实现步骤导入Vue.vue-rou ...
Vue路由无痕浏览 - nodeJs环境搭建
目录一.Vue路由 1.1 路由的使用步骤 1.2 无痕浏览二.nodeJs环境搭建 2.1 Node.js是什么 2.2 配置NodeJS环境 2.3 下载github的Vue项目一.Vue路 ...
Vue05之ElementUI入门+nodejs环境搭建+运行nodejs项目
14天阅读挑战赛努力是为了不平庸~ 目录 1. ElementUI入门 1.1 ElementUI简介 1.2 Vue+ElementUI安装 1.3 开发示例 2. 搭建nodejs环境 2.1 ...
NodeJS环境搭建以及运行Node.js项目、饿了么ui（elementui）开发模式简单介绍
一.Node.js是什么? 1.1 Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]. Node.js使用了一个事件驱动.非阻塞式I/O 的模型. 1.2 Node.j ...
nodejs实践录：windows 10系统nodejs环境搭建
本文讲述windows 10 64bit系统中,nodejs环境的搭建. 安装下载地址为:https://nodejs.org/zh-cn/download/, 下载安装包为node-v10.15. ...
nodejs实践录：ubuntu 16.04系统nodejs环境搭建
本文讲述ubuntu 16.04 64bit系统中,nodejs环境的搭建. 安装此章节已失效此章节已失效更新源,命令如下: sudo apt-get update sudo apt-get i ...
vue项目的导入idea以及环境搭建中提示错误的处理方法
文章目录一.安装nodejs 1.安装nodejs,默认下一步就OK 2.测试nodejs是否安装成功二.环境变量的配置第一步:配置默认安装目录和缓存日志目录. 第二步:环境变量配置. 三.安装 ...

vue路由、无痕浏览和nodeJS环境搭建、ElementUI简介

1、vue路由和无痕浏览

1.1、SPA是什么

1.2、SPA实现思路和技术特点

1.2.1、技术特点

1.2.2、思路

1.3、通过vue的路由可实现多视图的单页Web应用

1.4、router-link相关属性

1.5、无痕浏览

1.6、代码展示

2、nodeJS环境搭建

2.1、node.js是什么

2.2、npm是什么

2.3、环境搭建

3、ElemenUI简介

3.1、传统开发模式

vue路由、无痕浏览和nodeJS环境搭建、ElementUI简介相关推荐

最新文章

热门文章