目录 1.简介 2.如何使用vue.js 3.部署api服务器 4.vue.js路由配置 5.实现页面加载数据 6.测试vue项目 7.在正式环境部署 8.Vue前端代码下载 1.简介 这是一个使用vue.js + mint-ui + .net core api的小说网站。 最近在学习vue.js，而抛开实践的学习都是在装逼，所以结合实际，准备做一个小说网站，这样麻麻再也不用担心我在看小说时被不良信息侵扰了哈哈。 首先说明一下，小说数据来源于网络搜索，并不直接存储于自己的服务器中，所以，这是一个实时爬小说数据的网站。 应为这里是要说vue.js的部署，所以具体的爬数据我是不会写出来的，当然了，具体在哪里爬数据，我也不会说明，请大家谅解。 2.如何使用vue.js vue.js的使用有两种方式： 1.直接引用js 2.用vue cli生成vue项目 我觉得啊，第一种比较简单，可以直接与现有项目结合，因为前后端都在一个项目中，所以服务器也只有一个。第二种比较复杂，需要安装一些vue.js的环境，然后生成独立的前端项目，所以部署的时候，需要一个前端服务器和一个后端api服务器，所以需要两个服务器。 不过，为了学习vue，我在这里用的是第二种方式。那么对于一个新手，我们要怎么入门呢？ ps：博主使用的环境是windows 10 1.首先，我们安装Visual Studio Code，用VsCode来开发vue项目，下载地址：https://code.visualstudio.com/ 2.安装Node.js，因为我们需要使用npm进行编译，下载地址：http://nodejs.cn/download/ 3.安装完VsCode和Node.js后，我们打开VsCode，点击“新建终端”，如下图： 在终端命令行中输入命令安装cnpm（中国的npm镜像）：npm install -g cnpm --registry=https://registry.npm.taobao.org ps：如果下面的命令无法执行，请将所有npm改为cnpm。 4.安装vue编译器vue-cli，在终端中输入命令：npm install -g vue-cli 5.安装webpack并初始化目录，在终端中输入命令：vue init webpack C://MyFirstVueProject PS:这一步你会发现，在MyFirstVueProject文件夹中，多出了许多文件，这些文件也就构成了你的vue项目 6.进入项目文件夹，在终端中输入命令：cd C://MyFirstVueProject 7.安装mint-ui，在终端中输入命令：npm i mint-ui --save 8.更新所有npm包，在终端中输入命令：npm install 以上的步骤完成后，你就可以打开VsCode，开始对你的vue项目开发了(vue开发文档)。贴一张我的项目结构图： 3.部署API服务器 因为前后端是两个服务器，所以，这里我们还需要一个api项目，向前端提供数据支持，这里我用的是.net core，代码就不写了。 先看看项目结构和搜索功能的控制器吧： 所以，我其实只提供了3个api： 查询： /api/SearchNovel/{text} 小说目录：/api/getcategory/{category}/{guid} 正文：/api/readnovel/{category}/{guid}/{pageGuid} 编译完成后，部署到服务器中，如图： 以上数据是后面会用到的。 4.vue.js路由配置 现在，我们继续我们的vue开发吧~ 看到上面我的vue项目结构了吧，已经有了一些vue页面了 现在，我们要配置路由，使url匹配上页面，让页面跳转正常进行。 具体配置如下： 在右边的代码中，我注释掉了一个mode属性，它的值是history。 一开始使用history是因为url中会出现#符号，如下图： 因为觉得这个难看，所以将mode值设置成了history。然而这么设置之后，又出现了新的问题。在我阅读小说的时候，如果将该页面保存成书签，通过书签再进来，发现出现404错误，为什么？ 原来是因为这个url是个假地址，直接通过url进来，因为当前页面没有路由信息，所以会导致404的问题。于是乎，我将此段代码注释掉了。算了，难看就难看点吧。 还有一个要划重点，那就是代码中scrollBehavior属性，按照图中设置，可以使页面跳转后，滚动条始终保持在顶端。 5.实现页面加载数据 路由配置完了，说明页面可以正常跳转了，接下来该是数据的显示了，话不多说，直接上图，红框标注重点~，我们以小说正文页面为例： created是页面加载时会调用的方法，在这里，我们去获取数据就可以了。 但是在点击下一页后，页面的位置好像不对，不是在最顶端，前面不是说过在路由设置属性就可以了吗？其实还少了一步，如下图： 6.测试vue项目 这里，我们需要将api服务器ip给设置一下，如下图： 我们通过proxyTable进行请求转发，将以/api/开头的请求，全部转发到localhost:5001上， 因为这个是https的，所以需要设置secure。 然后在终端中输入命令：npm run dev 项目就能运行了，终端会出现网站地址。 7.在正式环境部署 正式环境与测试环境不同，正式环境不能使用proxyTable，如此一来，我们要通过相同url来解决跨域，就需要用到一些请求转发的工具，这里我用的是nginx。 1.部署vue站点 1.先在IIS中配置一个站点 在终端中输入命令：npm run build 将项目的dist文件夹中的所有内容复制到站点根目录。 2.使用nginx转发请求 为什么要转发请求？ 答：为了避免数据来源与页面来源不一致，出现跨域的问题。 PS：这里我并没有处理cookie的问题，因为没有用到，有cookie需求请自行百度。 首先我们下载一个nginx的zip文件，解压。 修改conf文件夹下的配置文件，如图： 3.效果预览 访问10.1.73.14:1800即可 8.Vue前端代码下载 你们不能怪我没传到博客园，这个要博客园背锅，我是有证据的，如下图！ 然后我就去csdn传了，需要1积分下载，嗯，这也不能怪我，csdn去背锅吧！ 下载地址：https://download.csdn.net/download/u010418661/10776344https://www.cnblogs.com/zhuxiaoxiao/p/9933862.html