这篇文章给大家聊聊关于vuepress部署在服务器上，以及*客如何开启本地对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
一、VuePress****客如何开启本地***HTTPS***访问
在使用VuePress搭建*客并部署到Github Pages后，有时需要本地访问时以HTTPS开头。虽然VuePress官方文档中没有说明，但在StackOverflow上找到了解决方案。通过在config.js中添加配置，我们可以实现本地HTTPS访问。
尝试添加配置后，访问会出现安全提示，提示由于缺少SSL证书，浏览器认为连接不安全。HTTPS的原理涉及CA（证书颁发机构）和证书的加密验证。服务器需要服务器证书和私钥，而客户端则需要信任的CA根证书。这时，mkcert这个工具就派上用场，它能生成自签名的本地证书并将其添加到系统信任的证书库中。
首先，安装mkcert，然后在Mac上通过钥匙串访问查看新生成的本地CA证书。
接着，生成服务端证书和私钥，文件名为localhost+1.pem和localhost+1-key.pem。
将这两个文件复制到config.js同级目录，并在config.js中进行配置。
重启项目后，如果证书有效但仍然显示不安全，可能需要重启浏览器或在隐私模式下访问。
我的*客搭建系列教程，目前是第22篇，涵盖了VuePress的搭建、优化和部署，系列为github./mqyqingfeng/...。如果你想加入读者群或有任何反馈，可以添加「mqyqingfeng」。感谢你的关注和支持，如有错误或建议，请随时指正。
二、vue制作一个简单的网站(vue搭建网站)
用vue开发网页效果
本地应用：
指令v-text的作用是：设置标签的内容
默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
部分替换使用两个大括号写法
v-html指令：作用是设置元素的innerHTML
内容中有html结果会被解析为标签；v-text无论内容是什么，只会解析为文本
解析文本用v-text，解析html结构用v-html
v-on指令：事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接受传入的实参
时间的后面跟上【.修饰符】可以对事件进行限制
.enter可以限制触发的按键为回车
时间修饰符有多种
计数器的步骤：
1.在data中定义数据num；
2.methods中添加两种方法add和sub
3.使用v-text给num设置span标签
4.使用v-on将add，sub绑定给+、-按钮
5.add逻辑小于10继续累加，否则alert
6.sub逻辑大于0继续递减，否则alert
创建Vue示例时，el（挂载点），data（数据），methods（方法）
v-on指令的作用是绑定事件，简写为@
方法中通过this，关键字获取data中的数据
v-text设置文本值，简写{{}}
v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示和隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
v-if指令的作用是：根据真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除
v-bind指令的作用是：为元素绑定属*
完整写法是v-bind：属*名
简写的话可以省略v-bind，只保留【：属*名】
需要动态的增删class建议使用对象的方式
v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是（item，index）in数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据和表单元素值相关联
绑定的数据双向绑定表单元素的值
网络应用
VuePress-Vue驱动的静态网站*入门教程
VuePress由两部分组成：第一部分是一个极简静态网站*(opensnewwindow)，它包含由Vue驱动的主题系统和插件API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持Vue及其子项目的文档需求。
每一个由VuePress生成的页面都带有预渲染好的HTML，也因此具有非常好的加载*能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
事实上，一个VuePress网站是一个由Vue、VueRouter和webpack驱动的单页应用。如果你以前使用过Vue的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用VueDevTools去调试你的自定义主题。
在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于Nuxt(opensnewwindow)的nuxtgenerate命令，以及其他的一些项目，比如Gatsby
1、创建并进入一个新目录
2、使用你喜欢的包管理器进行初始化
3、将VuePress安装为本地依赖
我们已经不再推荐全局安装VuePress
4、创建你的第一篇文档
5、在package.json中添加一些scripts
这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些scripts已经被添加。
6、在本地启动服务器
VuePress会在(opensnewwindow)启动一个热重载的开发服务器。
现在，你应该已经有了一个简单可用的VuePress文档。接下来，了解一下推荐的目录结构和VuePress中的基本配置。
VuePress遵循“约定优于配置”的原则，推荐的目录结构如下：
如果没有任何配置，这个网站将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个.vuepress目录，所有VuePress相关的文件都将会被放在这里。你的项目结构可能是这样：
一个VuePress网站必要的配置文件是.vuepress/config.js，它应该导出一个J*aScript对象：
对于上述的配置，如果你运行起devserver，你应该能看到一个页面，它包含一个页头，里面包含一个标题和一个搜索框。VuePress内置了基于headers的搜索——它会自动为所有页面的标题、h2和h3构建起一个简单的搜索索引。
你也可以使用YAML(.vuepress/config.yml)或是TOML(.vuepress/config.toml)格式的配置文件。
一个VuePress主题应该负责整个网站的布局和交互细节。在VuePress中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。同时，默认主题提供了一些选项，让你可以去自定义导航栏（n*bar）、侧边栏（sidebar）和首页（homepage）等，
由于VuePress是一个标准的Vue应用，你可以通过创建一个.vuepress/enhanceApp.js文件来做一些应用级别的配置，当该文件存在的时候，会被导入到应用内部。enhanceApp.js应该exportdefault一个钩子函数，并接受一个包含了一些应用级别属*的对象作为参数。你可以使用这个钩子来安装一些附加的Vue插件、注册全局组件，或者增加额外的路由钩子等：
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
准备用vue写个小项目，使用axios调用api做一个网站，还需要哪些技术？
看你自己的需要咯，
比如前端的跟vue搭配一起的，有vue-router（路由，这个就不解释了）,vuex（全局变量，也不详细解释了）。可能还有框架？比如element-ui，或者vuetify这样的。
后端的话如果用node的就有express,koa这样的。而后端的，可能还涉及到一些数据的存储之类的，又会涉及到一个数据库的插件，比如ORM，NEDB这样的。
第二章：用element、flask、vue开发一个数据加密网站
在本章中，我们能学到：
公众号《帅帅的Python》回复《数据加密》获取源码
我们在网上搜索md5加密，会出来很多的网站，但是都是关于单个字符的的加密，其中加密算法有md5和sha加密。但是当我有1万条数据，如何加密，总不能一条一条的复制粘贴过去加密，这很不现实。
小凡决定先参考这些网站做一个简单的字符串加密网站，然后再做关于Excel文件的加密网站。
我们看这些网站都是由两个输入框，中间加上选项组成的，比如下面这种：
我们可以用element中的组件绘制出这样的页面：
绘制输入字符串的文本框：
同理，我们可以绘制出加密后的文本框：
form表单：
下拉框，选择加密的方式：
单选框：
按钮：
后端我们用flask写一个接口，这个接口就是用来将前端输入的字符串发送给加密的函数，我们需要开发一个，使用POST方法，并且接受传递的参数。
启动后端服务，即可访问到网站。
小凡不满足于只能加密字符串，接下来，小凡要思考如何加密Excel文件？
Primary:Vue{三、一个基于Vue的门户网站(经验踩坑)}
使用框架时必须熟知框架指令特*！很重要；
Bootstrap+jQuery是很好的选择！
库：?????1.i18n(双语言切换)；
?????????2.vue-router(路由）；
?????????3.vuex(状态管理，需要进行双语言切换监听变化)；
?????????4.ElementUI(饿了么以电脑端为主得UI框架)；
?????????5.sass(css预处理)；
?????????6.echarts(需要K线图，个人推荐不要用echarts,太大)；
?????????7.axios(相对于fetch兼容*好，请求数据)
IE的坑：1.走马灯之前用的是swiper的，结果兼容*不好，4.0+兼容不好，3.0主要以移动端为主，
????????之后换成了ElementUI的走马灯又引导出无法覆盖ElementUI的样式，因为VUE是默认全局覆盖局部，再加一个style，不要加scoped,ElementUI是全局引入！?解决问题。
????????2.经验不足，IE9不支持flex,坑、坑、坑移动端写习惯了！
????????3.多行文本省略只支持webkit内核浏览器，又是坑，用js控制长度搞定！
????????4.低版本兼容引入babel-polyfill，将build?webpack.base.conf.js里entry修改为entry:{'babel-polyfill':'babel-polyfill',:'./src/main.js'},
??????5.使用axios低版本兼容?es6-promise包，在main.js里引用
????????????????importpromisefrom'es6-promise'
????????????????promise.polyfill()
打包：1.history模式：需要服务器端配置请看官网；不需要改任何东西，路由里加mode:history即可
??????2.hash模式：将config里index.js里的assetsPublicPath:'/'??改为assetsPublicPath:'./',即可访问静态资源；
??????3.打包体积：将config里index.js里的productionSourceMap:true,改为?productionSourceMap:false，或者待打包完之后手动删除Map文件；
??????4.路由懒加载（具体看官网很简单）；
??????5.第三方*离将build?webpack.base.conf.js里添加
????????????????????externals:{；
??????????????????????'echarts':"echarts"
?????????????????????},
??????6.打包后css背景图无法访问，将build??utils.js里添加?publicPath:'../../',
????7.sass配置（webpack.base.conf.js）
????{test:/\.scss$/,loaders:["style","css","sass"]},
如有写错的地方欢迎大家评论
web前端开之网站搭建框架之vue详解
网站搭建框架之vue
Vue是web前端快速搭建网站的框架之一。它与jQuery有所不同，是以数据驱动web界面（以操作数据改变页面，而jQuery是以操作节点来改变页面），同时，vue还实现了数据的双向绑定，可及时响应用户的输入。最主要的是vue的写法简单，容易掌握，组件形式可以大大提高工作效率。
对于vue的使用可以分为两种使用形式：1.引入vue.js文件，在js中将vue实例化；2.通过node安装第三方包--vue，搭建脚手架，用脚手架将页面分成几个组件编写，从而利用组件来搭建页面。
引入vue.js的写法
Vue分为V层（视图层）和M层（数据层），一般都是由M层的数据来驱动V层的改变。而vue的常用指令数量不多且写法简单。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是将数据写进标签内，但它们的不同之处在于v-text会将标签当做文本内容写入
，而v-html则会对标签进行编译，只显示标签内的内容。
至于v-show、v-if、v-else这三个指令都是通过布尔值的判断来执行的，当布尔值为真时，设置了v-show、v-if指令的标签会显示出来，当布尔值为假时，标签隐藏；而v-else与这两个指令相反。除此之外，v-show和v-if、v-else之间也有差别，v-show是改变标签的display属*来使标签显示或隐藏；而v-if、v-else是通过添加或删除节点，来显示或隐藏标签的。
V-for是vue的一种遍历方法，这个方法极大的简化了数组或对象的遍历并显示到页面的步骤
而v-bind：是对html属*或自定义属*的数据驱动方式，格式为v-bind:href，可简写为：href。对于类（class）的操作是通过布尔值来判断增加或者隐藏类，同时。类和样式（style）所接受的数据类型为对象。
V-model指令的作用是将数据进行双向绑定，仅限于输入类型标签。当用户在页面输入时，数据层的数据会跟着改变。这是VM模式。由v驱动m。
除了这些普通的指令之外，还有事件指令v-on:，可简写为@+事件名，例如：@click，并将执行函数写到vue的methods中
通过脚手架来写项目的话，可用通过写组件，再将组件引入（注册）到另一个vue文件里拼接在一起，从而构建出一个页面。
（组件书写格式）
（组件整合）
（注册路由）
路由是通过vue-router来实现的，在注册路由的时候要将router实例化。不同的路由跳转不同的页面，这是搭建单页面应用的优势。
而父组件与子组件之间的通讯可以通过props将父组件的信息传递给子组件，改变子组件的内容，这样子组件的复用就不会有障碍了，而子组件传递信息给父组件或者其他组件的通讯则需vuex。
通过引入vuex并实例化一个Vuex.Store作为一个公共平台，将数据进行传输。通过vue的puted方法接收数据，通过methods方法改变数据。而这个公用平台可以实现组件与组件之间的信息传递，从而实现组件之间的交互。
通过一个星期的实战，深深的体会到了vue的优势，在构建移动端这方面的效率很高。但在搭建的过程中，还是少不了与jQuery结合，毕竟每个工具都有其优点，择其优而用是明智的选择。
三、vue静态网站模版(vue加载html静态页面)
vue聊天室的基础静态页面搭建
接着打开webpack.prod.conf.js这个文件在build文件夹中，添加然后还是这个文件，找到plugins，在里面加入注意着里面的，是生成静态化以后的目录，这里跟你的route是对应的。按照你的route来写。
检查node是否安装成功为了更快安装，可以使用淘宝的镜像：：//npm.taobao./在终端输入以下命令：检测pm是否安装成功vue-cli是vue脚手架工具，方便打包，部署，测试等。
前言：Vue服务器采用nginxVue为服务器；请确保你是以拥有sudo权限的用户来登录的服务器请按照下面的步骤，在CentOS中安装Nginx。
Vue模板渲染的原理是什么
1、vue的渲染分为两个部分：vue自身的初始化；生命周期钩子函数的过程自身初始化时，通过五个mixin方法为vue自身注入相关属*和方法。
2、原理：Vue框架的核心是虚拟DOM，编译template模板时要转译成VNode的函数，当用render函数构建DOM时，Vue就免去了转译的步骤。
3、原理是：vue在编译的时候通过在DOM元素以及css样式上加上唯一标记，实现样式私有化，不污染全局样式。如：编译为；对应的样式。my-class编译为。my-class[data-v-56e7f951]。
VuePress-Vue驱动的静态网站*入门教程
1、VuePress是一个以Markdown为中心的静态网站*，一个VuePress站点本质上是一个由Vue在和VueRouter驱动的单页面应用(SPA)。路由会根据你的Markdown文件的相对路径来自动生成。
2、先简单介绍一下VuePress，这是尤大在2018年4月份发布的一个新轮子。一个基于VueSSR的静态站*，本来的目的是爽爽的写文档，但是我发现用来撸一个人*客也非常不错。
3、官方文档：s：//docsify.js./Vue驱动的静态网站*。
4、下面我们来使用VuePress来搭建一个*客系统。我这里使用的是vuepress社区主题vuepress-theme-hope（一款集成了众多插件的vuepress主题）。事实上，一个VuePress网站是一个由Vue、VueRouter和webpack驱动的单页应用。
5、GatsbyGatsby是一个越来越流行的开源网站生成框架。它使用React.js来生成快速、界面优美的网站。
Primary:Vue{三、一个基于Vue的门户网站(经验踩坑)}
(windowasany).xxx参考：vue3报错UncaughtErrorvue2中用法：vue3用法：vue3+ts中使用process报错，找不到名称“process”。
Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。
今天到公司，继续打开我的vue的项目，但是页面显示的是CannotGET，打开控制台之后，发现有一篇红色报错。
vue项目静态资源(图片,字体)引用路径正确姿势
我们需要在template，script，style下引用图片，如下。比如这里能用@assets是因为在vue.config.js里面设置了如下参数。
我们首先打开App.vue，查看template：里面定义了一个Vuelogo，其中引用了asserts文件夹的图片。根据路径，我们可以找到图片路径。那么如果我们有其他图片，自然也可以类比使用。
vue打包上线后经常会碰到静态资源路径找不到的问题。
静态资源文件放入public文件夹下（类似cli2里面的static文件夹），打包时不会被wenpack处理，输出文件在dist文件夹下。
public文件夹public文件夹下的文件并不会被Webpack处理：它们会被复制到最终的打包目录（文件名需指定）下。必须使用绝对路径引用这些文件，简单说就是用来存放万年不变的文件。在vuex版本类似static/文件夹。
nuxt入门教程(一)vue如何实现全站静态化?
所以今天龙哥教你一套新的前端框架，基于vue的ssr前端框架—nuxt。本地开发的时候，使用vue语法，模块化你的项目，然后发布的时候生成静态，把ajax获取来的内容转化成静态html以利于seo。
接着打开webpack.prod.conf.js这个文件在build文件夹中，添加然后还是这个文件，找到plugins，在里面加入注意着里面的，是生成静态化以后的目录，这里跟你的route是对应的。按照你的route来写。
一般使用nodejs环境下的pm2运行发布generate打包用于将首页静态化（首页的nuxt-link也会被静态化），打包后生成dist文件夹（类似于vue一般*打包）。发布时，只需要将dist文件夹发布即可（同vue项目发布）。
需在plugins文件夹里创建一个element-ui.js文件，内容如下：在nuxt项目中如何使用scss？与Vue中使用的有和不同？也简单，只是配置上略有不同，使用上没有不同。