自制網(wǎng)站的動態(tài)圖怎么做創(chuàng)意廣告
🔥博客主頁：?【小扳_-CSDN博客】
?感謝大家點(diǎn)贊👍收藏?評論??
文章目錄
????????1.0 環(huán)境準(zhǔn)備
? ? ? ? 1.1 安裝 NodeJs
? ? ? ? 1.2 驗(yàn)證 NodeJs 環(huán)境變量
? ? ? ? 1.3 配置 npm 的全局安裝路徑
????????1.4?切換 npm 的淘寶鏡像( npm 使用國內(nèi)淘寶鏡像的方法(最新) )
? ? ? ? 1.5 查看鏡像是否配置成功
? ? ? ? 1.6 安裝 Vue - cli
? ? ? ? 1.7 查看 Vue - cli 是否配置成功
? ? ? ? 2.0 Vue 項(xiàng)目
? ? ? ? 2.1 Vue 項(xiàng)目的創(chuàng)建
? ? ? ? 2.2 Vue 項(xiàng)目的結(jié)構(gòu)
? ? ? ? 2.3 Vue 項(xiàng)目的啟動
? ? ? ? 3.0 Element 概述
? ? ? ? 3.1 安裝 ElementUI 組件庫(在當(dāng)前工程的目錄下)并命令執(zhí)行指令
? ? ? ? 3.2 引入 ElementUI 組件庫
? ? ? ? 3.3 訪問 Element 官網(wǎng)、復(fù)制組件庫代碼并調(diào)整
? ? ? ? 3.4 Element 實(shí)踐
? ? ? ? 4.0 Vue 路由
? ? ? ? 4.1 配置 VueRouter
? ? ? ? 4.2 在每個文件中配置請求鏈接組件
? ? ? ? 4.3 配置 App.vue 文件
? ? ? ? 5.0 打包部署
????????5.1 打包項(xiàng)目
? ? ? ? 5.2 部署
? ? ? ? 5.3 注意事項(xiàng)
????????1.0 環(huán)境準(zhǔn)備
? ? ? ? Vue - cil 是vue 官方提供的一個腳手架，用于快速生成一個 Vue 的項(xiàng)目。
? ? ? ? Vue - cli 依賴環(huán)境為：NodeJs
? ? ? ? 1.1 安裝 NodeJs
????????
? ? ? ? 1.2 驗(yàn)證 NodeJs 環(huán)境變量
? ? ? ? NodeJs 安裝完畢后，會自動配置好環(huán)境變量，我們驗(yàn)證一下是否安裝成功，通過：node -v
Microsoft Windows [版本 10.0.22631.3296] (c) Microsoft Corporation。保留所有權(quán)利。C:\Windows\System32>node -v v20.11.1C:\Windows\System32>? ? ? ? 出現(xiàn)了相對應(yīng)的版本就配置成功了。
? ? ? ? 1.3 配置 npm 的全局安裝路徑
????????使用管理員身份運(yùn)行命令行，在命令行中，執(zhí)行如下指令：
npm config set prefix "注意：這里填寫的是你自己的 NodeJs 的安裝目錄"比如說: npm config set prefix "E:\develop\NodeJs"
????????1.4?切換 npm 的淘寶鏡像( npm 使用國內(nèi)淘寶鏡像的方法(最新) )
? ? ? ? 使用管理員身份運(yùn)行命名行，在命令行中，執(zhí)行如下指令：
//舊 npm config set registry https://registry.npm.taobao.org/ //新 npm config set registry https://registry.npmmirror.com? ? ? ? 選擇最新的指令即可，因?yàn)榕f的已經(jīng)過期了，無法使用了。
? ? ? ? 1.5 查看鏡像是否配置成功
? ? ? ? 使用管理員身份運(yùn)行命令，在命令行中，執(zhí)行如下指令：
C:\Windows\System32>npm config get registry https://registry.npmmirror.comC:\Windows\System32>? ? ? ? 這樣就大致配置成功了。
? ? ? ? 1.6 安裝 Vue - cli
? ? ? ? 使用管理員身份運(yùn)行命令行，在命令中，執(zhí)行如下指令：
npm install -g @vue/cli這個過程中，會聯(lián)網(wǎng)下載，可能會耗時幾分鐘，耐心等待。
? ? ? ? 就像這樣就代表 Vue - cli 配置成功了。
? ? ? ? 1.7 查看 Vue - cli 是否配置成功
? ? ? ? 用管理員身份來執(zhí)行以下指令：
C:\Windows\System32>vue --version @vue/cli 5.0.8C:\Windows\System32>? ? ? ? 出現(xiàn)對應(yīng)的版本就代表安裝成功了。
? ? ? ? 2.0 Vue 項(xiàng)目
? ? ? ? 2.1 Vue 項(xiàng)目的創(chuàng)建
? ? ? ? 用圖像化界面創(chuàng)建項(xiàng)目，在 cmd 中運(yùn)行以下代碼：
回車之后會下面的界面：
將 Git 按鍵設(shè)置為：無
選擇手動配置項(xiàng)目：
額外再多選一個Router 功能
選擇 vue 的版本和語法監(jiān)測規(guī)范：
最后：
? ? ? ? 可以看到創(chuàng)建的新的文件夾，即為成功創(chuàng)建了 Vue 項(xiàng)目了。
接著用 VS 打開這個文件：
? ? ? ? 2.2 Vue 項(xiàng)目的結(jié)構(gòu)
? ? ? ? 基于 Vue 腳手架創(chuàng)建出來的工程，有標(biāo)準(zhǔn)的目錄結(jié)構(gòu)。如下：
? ? ? ? 2.3 Vue 項(xiàng)目的啟動
? ? ? ? 方式一：圖形化界面啟動
????????
????????直接按下三角符號即可。
運(yùn)行結(jié)果：
? ? ? ? 方式二：命令行
? ? ? ? 在當(dāng)前創(chuàng)建好 vue 項(xiàng)目的目錄上運(yùn)行以下指令：
npm run serve
? ? ? ? 3.0 Element 概述
? ? ? ? Element 是餓了么團(tuán)隊(duì)研發(fā)的，一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫。
? ? ? ? 組成：組成網(wǎng)頁的部件，例如 超鏈接、按鈕、圖片、表格、表單、分頁條等等。
? ? ? ? 官網(wǎng)：組件 | Element
? ? ? ? 3.1 安裝 ElementUI 組件庫(在當(dāng)前工程的目錄下)并命令執(zhí)行指令
npm install --legacy-peer-deps element-ui --sava
? ? ? ? 3.2 引入 ElementUI 組件庫
? ? ? ? main.js 中引入組件庫
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);完整的 main.js 文件：
? ? ? ? 3.3 訪問 Element 官網(wǎng)、復(fù)制組件庫代碼并調(diào)整
? ? ? ? 首先，在 views?中創(chuàng)建一個 .vue 文件。主要有三大部分：template、script、style
//簡單認(rèn)為，這里是 HTML 網(wǎng)頁展示出來畫面 <template><div></div> </template>//創(chuàng)建了 vue 核心對象，存放著數(shù)據(jù)、方法 <script> export default {} </script>//這里存放 css 樣式代碼 <style></style>
? ? ? ? 3.4 Element 實(shí)踐
先找 Element 中找到自己喜歡的組件，比如說：按鈕組件
接著找到之后，將起代碼復(fù)制，粘貼到 template 標(biāo)簽中：
再接著，在 App.vue 中引用當(dāng)前的 .vue 文件：
最后啟動，運(yùn)行結(jié)果如下：
? ? ? ? 4.0 Vue 路由
????????Vue Router 是 Vue 的官方路由。
組成：
? ? ? ? 1）VueRouter：路由器類，根據(jù)路由請求在視圖中動態(tài)渲染選中的組件。
? ? ? ? 2）<router-link to="">：請求鏈接組件，瀏覽器會解析成超鏈接 <a> 。
? ? ? ? 3）<router-view>：動態(tài)視圖組件，用來渲染展示與路由器對應(yīng)的組件。
舉個例子：
? ? ? ? 4.1 配置 VueRouter
接著配置兩個文件的路徑、名字等信息：
? ? ? ? 4.2 在每個文件中配置請求鏈接組件
????????<router-link to="">：請求鏈接組件
第一個文件：
第二個文件：
? ? ? ? 4.3 配置 App.vue 文件
????????將其設(shè)置為?<router-view>
?補(bǔ)充：在啟動運(yùn)行的時候，很有可能會報錯以下的錯誤：
解決方案：
? ? ? ? 第一步：選擇 vue.config,js 文件
? ? ? ? 第二步：添加以下代碼（添加紅方框中的代碼即可）
最終的運(yùn)行結(jié)果：
? ? ? ? 有兩個超鏈接：一個是文件 emp ，另一個是文件 ele 。
當(dāng)點(diǎn)擊另一個文件時，會自動跳轉(zhuǎn)到另一個文件：
? ? ? ? 5.0 打包部署
????????要對前端項(xiàng)目進(jìn)行打包并部署，通常需要遵循以下步驟：
????????5.1 打包項(xiàng)目
????????運(yùn)行打包命令，具體命令取決于你使用的前端構(gòu)建工具。打包完成后，會生成一個用于部署的靜態(tài)文件夾（通常是 dist 文件夾）。
演示：
接著會自動生成 dist 文件夾：
dist 文件夾下的文件：?這就是打包后的文件
? ? ? ? 5.2 部署
? ? ? ? 將打包好的文件可以部署在 Nginx 服務(wù)器上。
? ? ? ? Nginx 是一款輕量級的 web 服務(wù)器/反向代理服務(wù)器及電子郵件代理服務(wù)器。其特點(diǎn)是占有內(nèi)存少，并發(fā)能力強(qiáng)，在各大型互聯(lián)網(wǎng)公司都有非常廣泛的使用。
安裝官網(wǎng)：nginx: download
? ? ? ? 把打包好的文件放到 html 文件中，通過 nginx.exe 可執(zhí)行程序運(yùn)行起來。
部署：將打包好的 dist 目錄下的文件，復(fù)制到 nginx 安裝目錄的 html 目錄下。
啟動：雙擊 nginx 文件即可，Nginx 服務(wù)器默認(rèn)占用 80 端口號。
? ? ? ? 打開瀏覽器，通過??? ????localhost:80 就可以訪問到所部署在 web 服務(wù)器上的前端工程。
? ? ? ? 5.3 注意事項(xiàng)
? ? ? ? 1】Nginx 默認(rèn)占用 80 端口號，如果 80 端口號被占用，可以在 nginx.conf 中修改端口號。
?
? ? ? ? 如果 80 端口號被占用了，就可以通過該方式去修改默認(rèn)的端口號了。
????????2】查找端口號的方法
? ? ? ? 通過命令行執(zhí)行以下指令，可以查看那個進(jìn)程占用端口號，比如：
netstat -ano | findStr 80
? ? ? ? 可以知道端口號 80 是被進(jìn)程 PID 為：11772 進(jìn)程占用，通過任務(wù)管理器來查看具體的進(jìn)程。
? ? ? ? 正是 Nginx 占用，因?yàn)橹耙呀?jīng)啟動了該進(jìn)程了，所以到目前為止由 Nginx 占用該端口號。
