centos vue cli，centos官网

今天给各位分享centos vue cli的知识，其中也会对centos官网进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

vue静态网站模版(vue加载html静态页面)

vue聊天室的基础静态页面搭建

接着打开webpack.prod.conf.js这个文件在build文件夹中，添加然后还是这个文件，找到plugins，在里面加入注意着里面的地址，是生成静态化以后的目录，这里跟你的route地址是对应的。按照你的route来写。

检查node是否安装成功为了更快安装，可以使用淘宝的镜像：http：//npm.taobao.org/在终端输入以下命令：检测cnpm是否安装成功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、官方文档：https：//docsify.js.org/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中使用的有和不同？也简单，只是配置上略有不同，使用上没有不同。

10 分钟为你搭建一个超好用的 cmdb 系统

CMDB，全称为Configuration Management Data Base，翻译过来就是配置管理数据库。它负责存储和管理企业IT架构中的设备配置信息，支撑服务流程的运转，发挥配置信息的价值。在当今的运维环境中，无论是自动化运维、标准化运维、DevOps，还是智能运维，CMDB都是不可或缺的基石，为后续建立标准、流程提供了数据库基础，从而实现标准化、自动化、智能化运维，同时降低运维成本和流程混乱带来的操作风险。

今天，我将分享一个开源CMDB系统的搭建过程，让你不仅能获取一个支持全文检索、自带RESTful API的强大系统，还能掌握一些时髦的技术。

后端技术包括Python3、Django、Django REST framework、Elasticsearch、uwsgi、Nginx和Docker。

前端技术涉及Vue、Element-ui、Vue-Router、Vuex和Axios。

通过本文，你将了解CMDB系统的外观设计，基本功能如热添加删除表、自定义字段类型、方便的增删改查前端界面、强大的搜索查找能力（后端使用Elasticsearch存储数据）、查看数据的删除修改记录、历史版本等，以及表级权限管理，开放所有API。

系统源代码在GitHub上提供，后端仓库地址为github.com/open-cmdb/cm...，前端仓库地址为github.com/open-cmdb/cm...。

接下来，我将介绍两种搭建此开源CMDB系统的方法：一是使用Docker，适用于Linux操作系统；二是不使用Docker，适用于Windows和Linux。最后，我将简要介绍Vue环境的搭建。

使用Docker

如果你熟悉容器技术，推荐使用此方法。对于最新的Docker，大多数Windows版本可能不支持，因此使用容器请使用Ubuntu或CentOS等Linux操作系统。首先，你需要安装Docker，安装方法可参考我之前的文章《docker容器从入门到痴迷》或直接在网上搜索对应操作系统的安装方法。

环境准备包括一台可以访问互联网的Linux服务器（内存最好≥4G）和创建一个具有sudo权限的普通用户，注意确保有yum命令，如果没有可以安装。此外，还需要准备一个用于注册和忘记密码功能的专用邮箱。

使用以下代码保存到install_cmdb.py并执行sudo python3 install_cmdb.py即可一键安装。输入网站地址和邮箱信息开始安装，如果一切顺利，几分钟后你会看到安装完成。如果失败，可能需要调整一些系统参数并删除已运行的容器重新执行。不过根据我的安装经验，基本不会出错，容器部署非常方便。

不使用Docker

以下是给Windows用户的内容，Linux用户可以参考操作。虽然使用Docker更为便捷，但它屏蔽了一些细节，不利于二次开发和问题排查。在不使用Docker的情况下，不仅要安装软件，还要安装依赖，配置环境，虽然麻烦，但可以学到更多知识，出现问题可以更快定位，加深对项目框架的理解。

(1)安装MySQL，创建数据库，配置权限。如果你的电脑已经安装MySQL，则无需再安装，直接创建数据库，配置权限即可。

从官方网站下载最新的MySQL Community Server，比如我下载的是mysql-8.0.12-winx64.zip，这是一个免安装版本，解压到你想安装的目录内，并在目录中新建my.ini文件。修改my.ini文件内容，确保路径设置正确，执行命令在安装目录的bin目录下启动MySQL服务。

(2)安装Elasticsearch。全文搜索是常见的需求，开源的Elasticsearch是目前全文搜索引擎的首选。它能快速存储、搜索和分析大量数据，如维基百科、Stack Overflow、Github等都采用它。安装非常简单，从官网下载解压，进入其bin目录运行bat文件即可。

运行CMDB后端API服务和前端UI

首先准备Python3环境，这个很简单，直接官网下载并运行即可，记得将Python.exe所在的路径添加到Path变量中。如果你的电脑中有多个项目，建议使用virtualenv为每个项目创建独立的虚拟Python环境，将各自的依赖包隔离。

Vue环境搭建

你可能会对现有的CMDB项目感到不满，想要根据自己的需求进行修改和扩展。因此，你可能需要修改前端或后端代码。后端的修改已经在前面部署中提到，可以阅读Django项目的源代码进行修改调试。若要修改前端代码进行调试，需要搭建Vue环境。

Vue是一个JavaScript框架，与jQuery类似，通过在HTML中引入Vue.js文件即可使用框架特性。Vue是一个构建用户界面的渐进式框架，易于上手，易于与其他第三方库或现有项目整合。Vue可以在复杂的单页应用中提供强大的驱动能力，但使用时需要html、css、javascript的基础知识。

安装node.js并添加npm路径到环境变量Path中，使用cnpm命令安装Vue CLI。创建Vue项目时，可以使用默认配置或根据需要进行个性化配置。启动项目后，使用访问浏览器查看效果。若需要将Vue项目部署在nginx服务器上，使用npm build命令生成静态资源。

在熟悉Vue之后，你可以根据项目需求修改前端源代码，进入src目录查看并修改源代码，然后将生成的dist文件部署到web服务器。

综上所述，搭建CMDB系统并不复杂，使用开源项目作为基础可以提高效率，避免重复造轮子。如果你是Linux用户并希望在生产环境中使用uwsgi驱动Django项目，请参考完整指南。

前端Vue项目打包部署实战教程

前言

在前后端分离前，前端项目通常与后端项目一同部署，无需前端人员直接参与。然而，随着前后端分离的兴起，前端项目需要独立部署。对于不熟悉服务器知识的前端人员来说，部署网站变得复杂。本文将介绍如何将一个前端Vue项目部署到服务器，实现外网访问。

1.准备工作

部署前，仅需一个Vue项目和一台服务器。服务器上无需预先安装额外软件。

2.初始化Vue项目

使用Vue-cli创建基本Vue项目。运行指定命令，选择配置后执行初始化。

3.安装Nginx

Nginx作为轻量级Web服务器，广泛用于互联网项目。本指南以CentOS为例，说明如何安装Nginx。

（1）检查服务器是否已安装Nginx。

（2）未安装Nginx时，使用命令安装。

（3）查看Nginx安装目录或版本，确认安装成功。

4.启动Nginx

（1）启动Nginx服务。

（2）停止服务后，无法访问网站。

（3）重启服务，以便配置更新生效。

5.修改Nginx配置

编辑Nginx配置文件，指定服务器监听端口和网站存放路径。确保配置正确后，重启Nginx。

6.新建网站文件夹

根据配置文件中的路径新建文件夹。确保文件夹结构符合项目部署需求。

7.打包部署Vue项目

使用Vue-cli打包项目，生成dist文件夹。通过文件传输工具或命令将dist文件夹上传至服务器。

8.解决刷新路由404问题

使用history模式时，切换路由后刷新页面可能引发404错误。通过修改路由模式和Nginx配置解决。

总结

网站部署流程清晰，关键在于了解Nginx的基本原理。掌握原理后，部署任何网站都会变得简单。