设计网站100个免费丰都网站建设哪家好
1.SPA
1.1.什么是SPA
单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。
我们熟知的JS框架如react,vue,angular,ember都属于SPA。
在单页面应用中，所有必要代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为了响应用户操作）动态装载适当的的资源并添加到页面中。
页面在任何时间点都不会重新加载，也不会控制转移到其他页面。
1.2.SPA和MPA的区别
MPA（Multi-page application），多页面应用。
在MPA中，每个页面都是一个主页面，都是独立的。
当我们访问另一个页面的时候，都需要重新加载html、css、js文件，公共文件则根据需求加载。
| SPA | MPA | |
|---|---|---|
| 组成 | 一个外壳页面和多个页面片段组成 | 多个完整页面构成 |
| 资源共用（jss，css） | 共用，只在外壳部分加载 | 不共用，每个页面都要加载 |
| 刷新方式 | 局部刷新或者更改 | 整体刷新 |
| url模式 | 哈希模式（a.com/#/page1.com/#/page2.com） | 历史模式（a.com/page1.com; a.com/page2.com） |
| 用户体验 | 页面片段切换快，用户体验好 | 页面切换加载慢，体验不好 |
| 转场动画 | 容易实现 | 无法实现 |
| 数据传递 | 容易 | 依赖url传参，或者cookie、localstorage等 |
| 搜索引擎优化（SEO） | 需要单独方案，实现较为困难 | 简单 |
| 开发成本 | 难度高，借助专业的框架 | 难度低，但是页面重复代码多 |
| 维护成本 | 相对较低 | 相对较高 |
1.3.SPA的优缺点
优点：
1.用户体验好，速度快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
2.前后端分离
3.页面效果会比较炫酷（比如切换页面内容时的专场动画）
缺点：
1.不利于seo（搜索引擎优化（Search Engine Optimization,SEO）是一种通过了解搜索引擎的运行规则来调整网站，以提高目标网站在有关搜索引擎内排名的方式）；
2.导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）
3.不支持低版本服务器，，最低只支持到IE9
4.初次加载耗时较多
5.页面复杂度提高很多
2.路由
2.1.什么是路由
路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。
通俗易懂的话来讲就是Hash地址与组件的之间的对应关系。
路由分为前端路由和后端路由:
前端路由是依靠hash值(锚链接)的变化进行实现
后端路由是由服务器端进行实现，并完成资源的分发
前端路由是基于hash值的变化进行实现的。比如：用户点击了页面上的路由链接，导致了URL地址栏中的Hash值发生了变化，前端路由监听到了Hash值的变化，前端路由把当前的Hash地址对应的组件渲染到浏览器中。
2.2.演示
2.2.1.路由基本
第一步：引入依赖库
<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>
第二步：创建自定义组件
const Home=Vue.extend({
//注：必须包裹一个根元素
template:'<div><h1>Home组件</h1><div>Home组件的内容区域</div></div>'
});
const About=Vue.extend({
template:'<div><h1>About组件</h1><div>About组件的内容区域</div></div>'
});
第三步：定义路由
//定义路由即路线
var routes=[
//{path:"/",component:Home}, //默认显示效果
{path:"/Home",component:Home},
{path:"/About",component:About}
];
第四步：创建路由器实例
//定义路由器
const router=new VueRouter({routes:routes});
第五步：挂载根实例
//创建和挂载根实例,通过$mount方式挂载到指定的管理区域(重要)
var vm=new Vue({
//el:'#app',
router:router,
data:function(){
return {
ts:new Date().getTime()
}
}
}).$mount("#app");
第六步：效果展示
<div id="app">
<h1>1.路由器,ts={{ts}}</h1>
<div>
<router-link to="/Home">go to home</router-link>
<router-link to="/About">go to about</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。 通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签(超链接或锚），可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。
router-link相关参数
| 参数 | 说明 |
|---|---|
| to | 表示目标路由的链接 |
| replace | 设置 replace 属性的话，当点击时，导航后replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中。 |
| append | 设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b |
| tag | tag可以指定<router-link>之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a> |
| active-class | 当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active 的class, 设置active-class可以修改默认的名称. |
2.2.2.路由切换
页面展示
<div id="app">
<h1>1.路由器,ts={{ts}}</h1>
<div>
<router-link to="/Home" replace>go to home</router-link>
<router-link to="/About" >go to about</router-link>
</div>
<div>
<button v-on:click="previous">向前</button>
<button v-on:click="next">向后</button>
<button v-on:click="gotopage">切换指定组件</button>
</div>
<div>
<router-view></router-view>
</div>
</div>
vue中导航中的后退-前进-编程式导航
var vm=new Vue({
//el:'#app',
router:router,
data:function(){
return {
}
},
methods:{
previous:function(){
this.$router.go(1); //代表着前进
console.log("previous");
},
next:function(){
this.$router.go(-1); //代表着后退
console.log("next");
},
gotopage:function(){
this.$router.push({ //切换到path为/About的路由
path:"/About"
});
console.log("gotopage");
}
}
});
3.Node.js
3.1.什么是Node.js
在 Node.js 之前，JavaScript 只能运行在浏览器中，作为网页脚本使用，为网页添加一些特效，或者和服务器进行通信。有了 Node.js 以后，JavaScript 就可以脱离浏览器，像其它编程语言一样直接在计算机上使用，想干什么就干什么，再也不受浏览器的限制了。
Node.js 不是一门新的编程语言，也不是一个 JavaScript 框架，它是一套 JavaScript 运行环境，用来支持 JavaScript 代码的执行。用编程术语来讲，Node.js 是一个 JavaScript 运行时（Runtime）。
Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。Node.js使用了一个事件驱动、非阻塞式I/O 的模型。Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。不能再将它视为一种“小玩意”。
1）Node.js依赖JavaScript运行环境，开发语言是：Javascript
2）J2EE依赖Java运行环境，开发语言是：Java
3.2.什么是Npm
npm(Node.js Package Manager)是一个Node.js的包管理工具，用来解决Node.js代码部署问题。在安装Node.js时会自动安装相应的npm版本,不需要单独安装。使用npm包管理工具可以解决如下场景的需求:
1.允许用户从NPM服务器下载他人编写的第三方包到本地使用。
2.允许用户从NPM服务器下载并安装他人编写的命令行程序到本地使用。
3.允许用户将自己编写的包或命令行程序上传到NPM服务器供他人使用。
3.3.Node.js环境搭建
3.3.1.下载
下载地址：Node.js — Download Node.js®
注1：Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本
3.3.2.解压
下载的node-v10.15.3-win-x64.zip解压到指定目录中，并在解压后的目录下建立node_global和node_cache这两个目录。
node_global：npm全局安装位置；
node_cache：npm缓存路径;
3.3.3.配置环境变量
新增NODE_HOME:E:\tools\node-v10.15.3-win-x64(以自己的安装目录为准）
修改PATH 并在最后添加：%NODE_HOME%
%NODE_HOME%\node_global
环境变量查看： echo %node_home%，echo %path%
测试安装是否成功： node -v，npm -v
3.3.4.npm配置
配置npm全局安装位置和缓存路径。打开CMD，分别执行如下命令：
npm config set cache "C:\tools\node-v14.15.0-win-x64\node_cache" npm config set prefix "C:\tools\node-v14.15.0-win-x64\node_global"
注意：
1）创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来
2）如果执行命令卡死，可以删除C:\Users\用户名.npmrc 后重新执行。(用户名：当前电脑的用户名)
3）"E:\tools\node-v10.15.3-win-x64\node_global"，双引号不能少
修改npm镜像提高下载速度 (换源）
可以使用 cnpm或直接设置--registry，推荐设置--registry
npm config set registry https://registry.npmmirror.com
cnpm
npm install -g cnpm --
安装配置webpack
npm install webpack -g
以上命令执行完毕后，会生成如下文件:
%node_home%\node_global\node_modules\webpack
3.3.5.如何运行下载的Node.js项目
将下载的项目解压到指定目录，本例是解压到：D:\temp\vueproject，后面都以此为例
## 1.打开命令窗口
cmd
## 2.切换到d盘
d:
## 3.进入指定目录
cd D:\temp\vueproject
## 4.进行依赖安装
npm install
## 5.启动项目
npm run dev