藍易云 - LNMP網站框架搭建（編譯安裝）

NMP（Linux + Nginx + MySQL + PHP）編譯安裝詳解

LNMP是一種常見的網站框架，由Linux、Nginx、MySQL和PHP組成。本指南將詳細介紹如何通過編譯安裝各組件，搭建LNMP環境。

云服務器，高防服務器就選藍易云，頭條搜索：藍易云

安裝Linux操作系統

下載并安裝Linux發行版選擇適合你的Linux發行版，如Ubuntu、CentOS等。按照安裝指南完成操作系統的安裝。

安裝Nginx

安裝編譯Nginx所需的依賴庫
sudo apt update sudo apt install build-essential libpcre3 libpcre3-dev zlib1g zlib1g-dev openssl libssl-dev
下載Nginx源碼包
wget http://nginx.org/download/nginx-1.20.1.tar.gz # 替換為最新版本號
解壓源碼包
tar -zxvf nginx-1.20.1.tar.gz
進入解壓后的目錄
cd nginx-1.20.1
執行配置命令
./configure
編譯并安裝Nginx
make sudo make install
驗證Nginx是否安裝成功
/usr/local/nginx/sbin/nginx -v

安裝MySQL

安裝MySQL服務器
sudo apt update sudo apt install mysql-server
配置MySQL
在安裝過程中會提示設置root用戶密碼，按照提示操作。

安裝PHP

安裝編譯PHP所需的依賴庫
sudo apt install build-essential libxml2 libxml2-dev bzip2 libbz2-dev libpng-dev libjpeg-dev libonig-dev libzip-dev libcurl4-openssl-dev libssl-dev
下載PHP源碼包
wget http://php.net/get/php-8.0.11.tar.gz/from/this/mirror -O php-8.0.11.tar.gz # 替換為最新版本號
解壓源碼包
tar -zxvf php-8.0.11.tar.gz
進入解壓后的目錄
cd php-8.0.11
執行配置命令（可以根據需要自定義配置）
./configure --prefix=/usr/local/php --with-config-file-path=/usr/local/php/etc --with-fpm --with-mysqli=mysqlnd --with-pdo-mysql=mysqlnd --with-openssl --with-zlib --with-curl --with-gd --with-jpeg-dir --with-png-dir --with-zlib-dir --with-libxml-dir --enable-xml --enable-fpm --enable-mbstring --enable-gd-jis-conv
編譯并安裝PHP
make sudo make install
復制PHP配置文件
sudo cp php.ini-development /usr/local/php/etc/php.ini
復制PHP-FPM配置文件
sudo cp /usr/local/php/etc/php-fpm.conf.default /usr/local/php/etc/php-fpm.conf
啟動PHP-FPM服務
sudo /usr/local/php/sbin/php-fpm

配置Nginx與PHP

打開Nginx配置文件
sudo nano /usr/local/nginx/conf/nginx.conf
在http塊中添加以下內容來配置PHP解析
server { listen 80; server_name your_domain.com; root /path/to/your/web/root; index index.php index.html index.htm; location / { try_files $uri $uri/ /index.php?$query_string; } location ~ \.php$ { fastcgi_pass unix:/var/run/php-fpm.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } }
將 your_domain.com 替換為你的域名或IP地址。
將 /path/to/your/web/root 替換為你的網站根目錄路徑。
保存并關閉文件
重啟Nginx
sudo /usr/local/nginx/sbin/nginx -s reload

總結與進一步配置

到這里，你已經成功搭建了LNMP網站框架。你可以將網站文件放置在指定的網站根目錄中，并訪問你的域名或IP地址來查看網站。

分析說明表

步驟	描述
安裝Linux操作系統	選擇并安裝適合的Linux發行版，如Ubuntu或CentOS。
安裝Nginx	下載并編譯Nginx源碼，安裝所需的依賴庫，配置并安裝Nginx。
安裝MySQL	使用包管理器安裝MySQL服務器，配置root用戶密碼。
安裝PHP	下載并編譯PHP源碼，安裝所需的依賴庫，配置并安裝PHP及PHP-FPM。
配置Nginx與PHP	修改Nginx配置文件，配置PHP解析，設置網站根目錄及服務器名稱，重啟Nginx服務。

思維導圖

LNMP安裝流程

安裝Linux操作系統

安裝Nginx

安裝MySQL

安裝PHP

安裝依賴庫

下載Nginx源碼

解壓源碼包

配置和安裝

安裝依賴庫

下載PHP源碼

解壓源碼包

配置和安裝

配置Nginx與PHP

進一步配置和安全性調整

配置防火墻：確保只開放必要的端口（如80和443）。
SSL/TLS配置：為Nginx配置SSL證書，提高網站的安全性。
PHP安全配置：修改 php.ini 文件，禁用危險的PHP函數，配置PHP錯誤日志等。

通過上述步驟，你不僅搭建了一個基本的LNMP環境，還可以根據實際需求進行進一步的配置和優化，以確保網站的安全性和性能。希望這篇指南能夠幫助你順利完成LNMP環境的搭建。

言

前一段時間，小編也收集了推薦36種免費React模板和主題「干貨」，這次又收集了22種Vue的。希望小伙們喜歡。收集不易，希望點贊+關注。

在Internet上搜索模板和主題時，很難找到免費的Vue資源。

即使您不在乎質量，它們似乎也很難被發現，并出于好奇而感動，我花了數小時在Google和Github上四處挖掘，結果得到了收集22種開源Vue模板和主題框架集合。我不會對此打賭，但是它們也是高質量的資源。

Bootstrap Vue

現場演示：https://bootstrap-vue.org/

github：https://github.com/bootstrap-vue/bootstrap-vue

BootstrapVue 擁有85個以上的組件，45個以上的可用插件，多個指令和670+個圖標，它提供了可用于Vue.js v2.6的Bootstrap v4.5組件和網格系統的最全面的實現之一，并具有廣泛的功能和自動 WAI-ARIA 可訪問性標記。

vue & nuxt 博客網站

現場演示：https://surmon.me/
Github: https://github.com/surmon-china/surmon.me

使用vue & nuxt 搭建建立的非常有風味獨特的博客網站。

Vue后臺UI框架 - Buefy

現場演示：https://buefy.org/

Github: https://github.com/buefy/buefy/

Buefy 是基于Bulma框架和設計的Vue.js響應式UI組件的輕量級庫

特征

輕松保留當前的布爾瑪主題/變量
支持Material Design圖標和FontAwesome
非常輕巧，除了Vue＆Bulma之外沒有任何內部依賴性
大約88KB min + gzip（包括布爾瑪）
語義代碼輸出
遵循布爾瑪設計和一些Material Design UX
專注于可用性和性能，而無需過度動畫的東西

vue后臺UI框架 - ant-design-vue

現場演示：https://vue.ant.design
Github: https://github.com/vueComponent/ant-design-vue

這里是 Ant Design 的 Vue 實現，開發和服務于企業級后臺產品。

特性

提煉自企業級中后臺產品的交互語言和視覺風格。
開箱即用的高質量 Vue 組件。
共享Ant Design of React設計工具體系。

Vue后臺UI框架 - vuetifyjs

現場演示：官網:vuetifyjs.com
Github：https://github.com/vuetifyjs/vuetify

Vuetify 是一個 Vue UI 庫，包含手工制作的精美材料組件。不需要設計技能 - 創建令人驚嘆的應用程序所需的一切都觸手可及。

vue后臺UI框架 - iview

iview官網：https://www.iviewui.com/
Github：https://github.com/iview/iview
官方后臺示例：iview-admin：https://github.com/iview/iview-admin

iView Admin是一個前端管理后臺集成解決方案。它基于Vue.js并使用UI Toolkit iView。

餓了么出品的UI框架 - element-ui

Vue：http://element-cn.eleme.io/2.0/#/zh-CN/component/quickstart
React：https://eleme.github.io/element-react/#/zh-CN/quick-start
Angular：https://element-angular.faas.ele.me/guide/start

基于Vue2.0和bulma0.2的后臺管理框架 - vue-admin

Github：https://github.com/vue-bulma/vue-admin

cd vue-admin
npm install
npm run dev

人人開源 / renren-fast-vue

現場演示：http://demo.open.renren.io/renren-fast (賬號密碼：admin/admin)

Gitee：https://gitee.com/renrenio/renren-fast-vue

renren-fast-vue基于vue、element-ui構建開發，實現renren-fast后臺管理前端功能，提供一套更優的前端解決方案

前后端分離，通過token進行數據交互，可獨立部署

主題定制，通過scss變量統一一站式定制

動態菜單，通過菜單管理統一管理訪問路由

數據切換，通過mock配置對接口數據／mock模擬數據進行切換

發布時，可動態配置CDN靜態資源／切換新舊版本

若依 / RuoYi-Vue

演示地址：http://vue.ruoyi.vip
文檔地址：http://doc.ruoyi.vip

RuoYi-Vue 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分離權限管理系統

前端采用Vue、Element UI。

后端采用Spring Boot、Spring Security、Redis & Jwt。

權限認證使用Jwt，支持多終端認證系統。

支持加載動態權限菜單，多方式輕松權限控制。

高效率開發，使用代碼生成器可以一鍵生成前后端代碼。

提供了一個Oracle版本RuoYi-Vue-Oracle，保持同步更新。

感謝Vue-Element-Admin，eladmin-web。

不分離版本，請移步RuoYi，微服務版本，請移步RuoYi-Cloud

Vue White Dashboard

現場演示：https://demos.creative-tim.com/vue-white-dashboard/?ref=devto

地址：https://www.creative-tim.com/product/vue-white-dashboard?ref=devto

Vue White Dashboard 是一個免費的開源Bootstrap 4和Vue.js Admin儀表板，其中包含大量的組件，這些組件可以組合在一起并看起來非常漂亮。Vue White儀表板具有16個以上的獨立組件，可讓您自由選擇和組合。這意味著有成千上萬種可能的組合。所有組件的顏色都可能不同，您可以使用SASS文件輕松進行修改。

Vue QRcode Reader

現場演示：https://gruhn.github.io/vue-qrcode-reader/?rel=nofollow

github：https://github.com/gruhn/vue-qrcode-reader?rel=nofollow

Vue QRcode Reader是一組用于檢測和解碼QR碼的VueJS組件。它使您無需離開瀏覽器即可檢測和解碼QR碼。所有組件都具有響應能力。除此之外，它接近零樣式，因此您可以使它們適合您的布局。使用方法簡單明了。

VueJS Expo

現場演示：https://vuejsexpo.com/?ref=devto

VueJS Expo 使用Vue.js框架收集了許多精美的網站，應用程序和實驗。如果您是VueJS框架的粉絲，那么這里可能是受到啟發的地方。展示包括基于VueJS的主題，元素，儀表板等。

Vue Paper Dashboard PRO

現場演示：https://demos.creative-tim.com/bs3/vue-paper-dashboard-pro/#/admin/overview?ref=devto

地址：https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=devto

Vue Paper Dashboard PRO 是建立在Bootstrap和Vue之上的漂亮資源。它將幫助您立即開始開發儀表板。Vue Paper Dashboard Pro是 Original Paper Dashboard Pro的VueJS移植版本。使用儀表板非常簡單，但是需要具備Javascript，Vue和Vue-Router的基礎知識。

Vue-Color

現場演示：http://vue-color.surge.sh/?rel=nofollow

Github：https://github.com/xiaokaike/vue-color?rel=nofollow

Vue-Color 是來自Sketch，Photoshop，Chrome，Github，Twitter，Material Design等眾多酷炫色彩選擇器的集合。

Vue-Koel

現場演示：https://koel.dev/?rel=nofollow

Github：https://github.com/koel/koel?rel=nofollow

Koel 是一種簡單的基于Web的個人音頻流服務，在客戶端用Vue編寫，在服務器端用Laravel編寫。針對Web開發人員，Koel采用了一些更現代的Web技術-CSS網格，音頻和拖放API等來完成其工作。

Vue Argon Dashboard

現場演示：https://demos.creative-tim.com/vue-argon-dashboard/?ref=devto

地址：https://www.creative-tim.com/product/vue-argon-dashboard?ref=devto

Vue Argon Dashboard 是Bootstrap 4和Vue.js的儀表板。它是開源的，免費的，并且具有許多組件，可以幫助您創建出色的網站。Vue Argon儀表板內置了100多個單獨的組件，因此您可以選擇和組合。由于實現了所有元素，因此從原型制作到功能齊全的代碼，您將節省大量時間。該儀表板附帶了預先構建的示例，因此開發過程是無縫的，從我們的頁面切換到真實的網站非常容易。

Pagekit

現場演示：https://pagekit.com/?rel=nofollow

github：https://github.com/pagekit/pagekit?rel=nofollow

Pagekit 是使用Symfony組件和VueJS構建的模塊化，輕量級CMS。不管是個人博客還是公司網站，使用Pagekit都可以為Web創建功能強大的內容，使其在每種設備上都能完美運行。它具有干凈直觀的界面。它也有一個很棒的內置市場。

Vue Material Dashboard PRO

現場演示：https://demos.creative-tim.com/vue-material-dashboard-pro/?ref=devto#/dashboard

地址：https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=devto

Vue Material Dashboard PRO 是基于Vue Material和VueJS構建的超棒高級管理模板。它是通過考慮您在儀表板中實際需要的東西而創建的。Vue Material Dashboard PRO包含精選和優化的VueJS插件。一切都旨在相互配合。使用儀表板非常簡單，但是需要具備Javascript，VueJS和Vue Router的基礎知識。

Vue Material Kit

現場演示：https://demos.creative-tim.com/vue-material-kit/?ref=devto#/

地址：https://www.creative-tim.com/product/vue-material-kit?ref=devto

Vue Material Kit 是基于Vue Material和VueJS構建的驚人的免費開源資源。這將幫助您立即開始開發UI Kit。Vue材料工具包是原始材料工具包的官方VueJS版本。使用UI Kit非常簡單，但是需要Javascript，VueJS和Vue Router的基礎知識。

Retrospectify

現場演示：http://pepf.nl/retrospective/?rel=nofollow

github ：https://www.creative-tim.com/product/vue-material-kit?ref=devto

Retrospectify 是用Vue編寫的出色工具，用于數字化敏捷團隊回顧。當與遠程團隊進行回顧時，或者當您希望隨時間跟蹤回顧結果時，這將很有用。它具有三種注釋類型，您可以在注釋周圍移動或將點添加到各個注釋中。

Code Notes

現場演示：https://lauthieb.github.io/code-notes/?rel=nofollow

github ：https://github.com/lauthieb/code-notes?rel=nofollow

最后

如果您尚未使用VueJS，則應該知道它在Github上擁有超過164k的星星和88.7k的星星。很多！同樣，Vue是一種開源產品，這意味著任何人都可以為它做貢獻或從貢獻者那里學到新東西。

我希望這個清單可以在您的下一個開發項目中為您提供幫助

1 packages 目錄

前面在項目根目錄下創建了 packages 目錄，該目錄存放組件庫的所有組件及組件庫的入口。該目錄中已經創建了兩個子目錄 foo 和 yyg-demo-ui。這兩個目錄是干嘛用的呢？

1.1 foo 目錄

foo 目錄代表一個示例組件，后面咱們會使用該組件來測試組件庫在 example 和組件庫文檔中是否能正常運行。后續要開發的所有組件（如高級卡片組件、JSON Schema 表單組件等）都與 foo 組件的文件目錄結構保持一致。

1.2 yyg-demo-ui 目錄

該目錄與整個組件庫工程的名稱相同，所以你本地的這個目錄不一定叫這個名稱。該目錄是組件庫的入口模塊，該模塊會安裝組件庫的所有組件（即 packages 目錄下的其他包）作為依賴，并引入全部組件，統一暴露。此外還是打包組件庫的入口。可以將它理解為組件庫的聚合模塊。

2 實現 foo 示例組件

2.1 初始化 package.json

foo 目錄存放示例組件，它也是一個包，所以需要在命令行中進入 packages/foo 目錄，使用 pnpm 初始化：

pnpm init

修改生成的 package.json 中的 name 屬性值為 foo，在 monorepo 中，子包的 name 屬性通常會命名為 @組織名/foo，由于咱是個組件庫，可以將其命名為 @組件庫名/foo，即 @yyg-demo-ui/foo。我修改了 package.json 的下面幾個屬性：

{
  "name": "@yyg-demo-ui/foo",
  "version": "1.0.0",
  "description": "示例組件",
  "author": "程序員優雅哥 youyacoder",
  "main": "index.ts",
...
}

2.2 初始化 foo 目錄結構

在命令行中進入 foo 目錄：

創建 index.ts 文件，該文件為組件的入口文件：

touch index.ts

創建 src 目錄，該目錄存放組件的實現源碼。在 foo/src/ 中創建 index.tsx 和 types.ts，前者是組件的具體實現，后者是組件的 props 定義及類型：

mkdir src
touch src/index.tsx src/types.ts

如此一來，示例組件 foo 的目錄結構便創建完成，目錄結構如下：

packages/
|- foo/
        |- index.ts
        |- src/
                |- index.ts
                |- types.ts
|- yyg-demo-ui/

2.3 定義 foo 組件的 props

在 foo/src/types.ts 中定義 foo 組件的 props，并提取其類型：

import { ExtractPropTypes } from 'vue'

export const fooProps = {
  msg: {
    type: String,
    required: false,
    default: ''
  }
}

export type FooProps = ExtractPropTypes<typeof fooProps>

上面的代碼定義了一個非必填的屬性 msg，并使用 vue 中提供的 ExtractPropTypes 提取 props 的類型。

2.4 實現 foo 組件

在 foo/src/index.tsx 中實現 foo 組件：

import { defineComponent } from 'vue'
import { fooProps } from './types'

const NAME = 'yyg-foo'

export default defineComponent({
  name: NAME,
  props: fooProps,
  setup (props, context) {
    console.log(props, context)
    const onBtnClick = () => {
      console.log('點擊按鈕測試', props.msg)
    }
    return () => (
      <div class={NAME}>
        <h1>yyg-demo-ui Foo</h1>
        <p class={NAME + '__description'}>msg is: { props.msg }</p>
        <el-button type='primary' onClick={onBtnClick}>點擊我</el-button>
      </div>
    )
  }
})

該組件僅簡單展示文本和 Element Plus 的按鈕，用于測試。

2.5 定義 foo 組件入口文件

foo/index.ts ：

import { App } from 'vue'
import Foo from './src'

Foo.install = (app: App) => {
  app.component(Foo.name, Foo)
}

export default Foo

該文件將組件導入并導出，并且為該組件提供 install 方法。這樣便完成了 foo 組件的代碼編寫。

3 實現 yyg-demo-ui

完成 foo 示例組件后，就需要開始開發組件庫入口 yyg-demo-ui 了。第一步仍是初始化 package.json

3.1 初始化 package.json

在命令行中進入 packages/yyg-demo-ui 目錄：

pnpm init

同上修改生成的 package.json 文件的 name 屬性：

{
  "name": "@yyg-demo-ui/yyg-demo-ui",
  "version": "1.0.0",
  "description": "組件庫入口",
  "author": "程序員優雅哥 youyacoder",
  "main": "index.ts",
  ...
}

3.2 安裝依賴

foo 和 yyg-demo-ui 都是獨立的包，yyg-demo-ui 需要安裝 foo 到依賴中，才能引入 foo 組件。在 2.1 中將 foo 的 package.json name 屬性修改為 @yyg-demo-ui/foo，安裝時要使用該名稱。從控制臺中進入 packages/yyg-demo-ui ，執行命令：

pnpm install @yyg-demo-ui/foo

此時查看 packages/yyg-demo-ui/package.json 的 dependencies，會看到使用 workspace協議依賴了 foo

"dependencies": {
  "@yyg-demo-ui/foo": "workspace:^1.0.0"
}

同時在 node_modules 中也可以看到多了一個 @yyg-demo-ui/foo：

3.3 定義入口文件

在 packages/yyg-demo-ui 下創建 index.ts，導入組件并導出：

import { App } from 'vue'
import Foo from '@yyg-demo-ui/foo'
// import component end
import '../scss/index.scss'

const components = [
  Foo
] // components

// 全局動態添加組件
const install = (app: App): void => {
  components.forEach(component => {
    app.component(component.name, component)
  })
}

export default {
  install
}

到這里咱們基本完成了組件的開發環境搭建，但遺留了三個問題：
組件及組件庫的樣式定義
如何查看組件的效果
組件庫如何構建打包發布
這些問題在后面的文章中會依次解答。下一篇文章將分享組件庫的 CSS 架構和 example 搭建。

感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關注、收藏，程序員優雅哥會持續與大家分享更多干貨

在線咨詢

上一篇：用Python寫了一個上課點名系統（附源碼）（自制考勤系統）
下一篇：使用 Vue3 和 vue-print 實現打印功能票據文檔「最新教程」

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

藍易云 - LNMP網站框架搭建（編譯安裝）

安裝Linux操作系統

安裝Nginx

安裝MySQL

安裝PHP

配置Nginx與PHP

總結與進一步配置

分析說明表

思維導圖

進一步配置和安全性調整

言

Bootstrap Vue

vue & nuxt 博客網站

Vue后臺UI框架 - Buefy

vue后臺UI框架 - ant-design-vue

Vue后臺UI框架 - vuetifyjs

vue后臺UI框架 - iview

餓了么出品的UI框架 - element-ui

基于Vue2.0和bulma0.2的后臺管理框架 - vue-admin

人人開源 / renren-fast-vue

若依 / RuoYi-Vue

Vue White Dashboard

Vue QRcode Reader

VueJS Expo

Vue Paper Dashboard PRO

Vue-Color

Vue-Koel

Vue Argon Dashboard

Pagekit

Vue Material Dashboard PRO

Vue Material Kit

Retrospectify

Code Notes

最后

推薦Vue學習資料文章：

1 packages 目錄

1.1 foo 目錄

1.2 yyg-demo-ui 目錄

2 實現 foo 示例組件

2.1 初始化 package.json

2.2 初始化 foo 目錄結構

2.3 定義 foo 組件的 props

2.4 實現 foo 組件

2.5 定義 foo 組件入口文件

3 實現 yyg-demo-ui

3.1 初始化 package.json

3.2 安裝依賴

3.3 定義入口文件

您的項目需求