.代碼打包

當(dāng)我們完成一個(gè)項(xiàng)目開(kāi)發(fā)的時(shí)候，下一步肯定會(huì)要把這個(gè)項(xiàng)目放到互聯(lián)網(wǎng)上進(jìn)行發(fā)布，此時(shí)我們就得先通過(guò)打包命令npm run build來(lái)對(duì)項(xiàng)目進(jìn)行打包。

在命令行工具中運(yùn)行（需進(jìn)入項(xiàng)目路徑）：

npm run build

稍等片刻后如果提示如下信息則表示打包成功：

打包成功后會(huì)在當(dāng)前項(xiàng)目目錄下多出一個(gè)dist目錄：

在打包之前一定要將之前開(kāi)發(fā)過(guò)程中使用反向代理的操作給去除掉，一上線代理就失效了。同時(shí)需要注意解決數(shù)據(jù)接口的跨域請(qǐng)求問(wèn)題。

注意：打包之后得到的這些文件都是經(jīng)過(guò)壓縮處理的，如果需要更改原先JavaScript、css等文件的內(nèi)容，請(qǐng)?jiān)陂_(kāi)發(fā)環(huán)境中去修改，然后重新打包生成。

2.上線部署

項(xiàng)目上線部署需要有服務(wù)器，此處我們以已經(jīng)購(gòu)買好的阿里云ECS（CentOS 7.9版本操作系統(tǒng)）為例。

后續(xù)操作會(huì)用到不少相對(duì)路徑，為了保證大家的操作正確，此處統(tǒng)一先切換當(dāng)前工作路徑：

cd /usr/local/src
# 該地址是已經(jīng)存在的，不需要自己創(chuàng)建

①如果項(xiàng)目中使用到了mongoDB，則需要先安裝mongoDB

下載地址：https://www.mongodb.com/try/download/community

可以選擇Copy Link隨后去服務(wù)器中對(duì)應(yīng)的目錄執(zhí)行命令下載：

wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.4.1.tgz
# 或
curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.4.1.tgz

也可以直接用今日docs目錄下已經(jīng)下載好的壓縮包，使用FileZilla進(jìn)行上傳到服務(wù)器的/usr/local/src目錄。

.tgz格式文件是壓縮包文件格式的一種，需要使用其中的內(nèi)容得先解壓，解壓命令為：

tar -zxvf mongodb-linux-x86_64-rhel70-4.4.1.tgz
# 或
tar -xvf mongodb-linux-x86_64-rhel70-4.4.1.tgz

# -z：表示指定解壓縮所使用的方式，表示使用gz格式進(jìn)行解壓
# 如果不指定使用什么方式解壓，則tar會(huì)自己判斷

解壓后會(huì)得到mongoDB的解壓目錄：

Linux系統(tǒng)下對(duì)于第三方軟件的安裝一般存放在/usr/local下，此處建議將解壓后得到的目錄中的bin目錄進(jìn)行轉(zhuǎn)移，轉(zhuǎn)移的同時(shí)需要?jiǎng)?chuàng)建mongoDB的數(shù)據(jù)文件夾和日志文件夾，命令如下：

mkdir -p /usr/local/mongodb/data
mkdir /usr/local/mongodb/log
cp -r /usr/local/src/mongodb-linux-x86_64-rhel70-4.4.1/bin /usr/local/mongodb/
# 建立mongodb需要使用的日志文件
touch /usr/local/mongodb/log/logfile

上述指令執(zhí)行完畢后可以通過(guò)ls進(jìn)行列出檢查，查看是否有以下文檔結(jié)構(gòu)：

ls /usr/local/mongodb/

隨后，就可以通過(guò)以下命令去啟動(dòng)mongoDB了：

需要注意，此種方式的mongoDB為綠色軟件，默認(rèn)不會(huì)開(kāi)機(jī)自動(dòng)啟動(dòng)，不再需要使用的時(shí)候直接刪除/usr/local/mongodb目錄即可卸載軟件。

/usr/local/mongodb/bin/mongod --dbpath=/usr/local/mongodb/data --logpath=/usr/local/mongodb/log/logfile --bind_ip=127.0.0.1 --fork
# --dbpath：指定數(shù)據(jù)庫(kù)文件夾位置
# --logpath：指定日志文件位置
# --bind_ip：綁定監(jiān)聽(tīng)的網(wǎng)卡ip地址
# --fork：以后臺(tái)服務(wù)的形式運(yùn)行

注意：logpath配置項(xiàng)的值一定是一個(gè)文件（可以不存在），不能是文件夾。

至此，mongoDB已經(jīng)可以使用了，可以通過(guò)運(yùn)行mongoDB連接工具進(jìn)行測(cè)試，如果有以下輸出則一切正常：

此時(shí)可以在其中創(chuàng)建好maizuo數(shù)據(jù)庫(kù)，以及往庫(kù)中寫(xiě)入users表中的數(shù)據(jù)了。

②安裝nodejs

文檔地址：https://github.com/nodesource/distributions/blob/master/README.md

復(fù)制好對(duì)應(yīng)的指令后在終端中去執(zhí)行（這個(gè)命令會(huì)在我們服務(wù)器上安裝一個(gè)nodejs的鏡像源以告訴包管理工具去哪里下載nodejs）：

curl -sL https://rpm.nodesource.com/setup_14.x | bash -

隨后運(yùn)行以下命令安裝nodejs：

sudo yum install -y nodejs

使用sudo開(kāi)頭的命令可能會(huì)提示讓輸入密碼，如果有則輸入當(dāng)前用戶的密碼即可。

安裝好nodejs后，可以通過(guò)命令測(cè)試是否安裝成功nodejs：

node -v

最后，可以繼續(xù)安裝一些可選的全局包以方便后面使用：

# 安裝nrm，并切換npm鏡像源為淘寶
npm i -g nrm
nrm use taobao

# 安裝nodemon
npm i -g nodemon

# 安裝pm2（讓node在后端運(yùn)行的工具，這樣可以在配置完畢之后關(guān)閉終端窗口）
npm i -g pm2

到此，nodejs環(huán)境安裝完畢！

③安裝nginx

Nginx是一款輕量級(jí)服務(wù)器/反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器，其特點(diǎn)是占有內(nèi)存少，并發(fā)能力強(qiáng)，事實(shí)上nginx的并發(fā)能力在同類型的網(wǎng)頁(yè)服務(wù)器中表現(xiàn)較好，中國(guó)大陸使用nginx網(wǎng)站用戶有：百度、京東、新浪、網(wǎng)易、騰訊、淘寶等。

軟件官網(wǎng)：https://nginx.org/

傻瓜式包管理工具安裝方式說(shuō)明參考地址：https://nginx.org/en/linux_packages.html#RHEL-CentOS

按照上述提示，在服務(wù)器上指定的位置/etc/yum.repos.d/nginx.repo新建一個(gè)文件，文件內(nèi)容如下：

[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

對(duì)于文件的創(chuàng)建和修改，可以考慮咋windows上進(jìn)行，寫(xiě)完畢之后再通過(guò)文件傳輸工具，將文件上傳到指定的位置即可。

隨后運(yùn)行nginx的安裝命令：

sudo yum install -y nginx

在nginx完成安裝后，可以通過(guò)以下幾個(gè)命令來(lái)管理nginx服務(wù)：

# 啟動(dòng)nginx
systemctl start nginx

# 停止nginx
systemctl stop nginx

# 重啟nginx
systemctl restart nginx

# 設(shè)置nginx開(kāi)機(jī)自啟動(dòng)
systemctl enable nginx

# 設(shè)置nginx開(kāi)機(jī)不自啟動(dòng)
systemctl disable nginx

接下來(lái)啟動(dòng)nginx：

systemctl start nginx

請(qǐng)注意，后續(xù)每次修改了nginx的配置文件都需要對(duì)nginx服務(wù)進(jìn)行重啟，否則新的配置不會(huì)生效。
nginx相關(guān)的目錄位置：

• 配置文件
• 主配置文件nginx.conf：/etc/nginx/nginx.conf
• 從配置文件‘*.conf’：可以是任意位置，以主配置文件聲明為準(zhǔn)，比較常用針對(duì)站點(diǎn)的從配置文件在/etc/nginx/conf.d/目錄下
• 默認(rèn)站點(diǎn)目錄
• /usr/share/nginx/html（等于PHPstudy中的WWW目錄，回頭代碼得放到這個(gè)里面去）

④域名解析（如果有域名的話）

如果是大陸服務(wù)器使用，則域名一定要通過(guò)了ICP備案才可以

以阿里云為例，先進(jìn)入域名控制臺(tái)，在需要使用的域名后面點(diǎn)擊解析按鈕進(jìn)入解析頁(yè)面，隨后點(diǎn)擊添加記錄按鈕并按照自身需求填寫(xiě)解析信息：

設(shè)置完成后一般1分鐘內(nèi)即可生效，可以在本機(jī)windows上通過(guò)ping命令進(jìn)行測(cè)試：

# 以剛才設(shè)置的域名為例（請(qǐng)?zhí)鎿Q成自己的域名）
ping sh2008.lynnn.cn

⑤項(xiàng)目代碼部署

a. 將打包好的vue代碼上傳到Nginx默認(rèn)的站點(diǎn)下，目錄地址為/usr/share/nginx/html

b. 啟動(dòng)node服務(wù)端為項(xiàng)目提供數(shù)據(jù)訪問(wèn)服務(wù)

如果出現(xiàn)無(wú)法訪問(wèn)的情況，請(qǐng)注意防火墻與云安全組的設(shè)置。

上傳node服務(wù)端的代碼到遠(yuǎn)程服務(wù)器，位置可以隨意（因?yàn)榇a是node運(yùn)行的，不是nginx）：

接下來(lái)進(jìn)入node代碼的目錄/usr/local/src/http，運(yùn)行安裝所需模塊的指令：

npm install

此時(shí)即便運(yùn)行了node服務(wù)器，也會(huì)出現(xiàn)無(wú)法訪問(wèn)的情況，需進(jìn)入阿里云的控制臺(tái)添加允許3000端口通過(guò)。

最后，讓node在后臺(tái)執(zhí)行http.js文件（根據(jù)需要換成自己的文件名），此處需要用到前面安裝的pm2工具：

# 先進(jìn)入項(xiàng)目目錄
pm2 start http.js

## 重啟
pm2 restart http.js
## 停止
pm2 stop http.js

如果成功，則會(huì)看到如下效果：

c. 解決nginx下，路由模式history失效的問(wèn)題

方案1：不使用history模式的路由

不使用istory模式，則得用hash模式，該模式下地址欄會(huì)有#

方案2：配置nginx，讓nginx支持history模式的路由

try_files $uri $uri/ /index.html;

將上述的代碼放到/etc/nginx/conf.d/default.conf中

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    # 以下是新增的一行
    try_files $uri $uri/ /index.html;
}

隨后重啟nginx：

systemctl restart nginx

重啟之后新的配置將會(huì)生效，項(xiàng)目到這里也就可以通過(guò)域名或者ip地址進(jìn)行訪問(wèn)了。

命令行打開(kāi) WebStorm 中的任意文件或文件夾，可選擇指定打開(kāi)后插入符號(hào)的位置。

WebStorm官方最新版免費(fèi)下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)

Windows

可以在bin下的安裝目錄中找到運(yùn)行 WebStorm 的可執(zhí)行文件。要將此可執(zhí)行文件用作命令行啟動(dòng)器，請(qǐng)按照命令行界面中的說(shuō)明將其添加到您的PATH系統(tǒng)中。

句法

webstorm64.exe [--line <number>] [--column <number>] <path ...>

例子

打開(kāi)一個(gè)項(xiàng)目：

webstorm64.exe C:\MyProject

打開(kāi)第 42 行的特定文件：

webstorm64.exe --line 42 C:\MyProject\scripts\numbers.js

macOS

句法

webstorm --line <number> <path>

例子

打開(kāi)一個(gè)項(xiàng)目：

webstorm ~/MyProject

打開(kāi)第 42 行的特定文件：

webstorm --line 42 ~/MyProject/scripts/numbers.js

Linux

可以在bin下的安裝目錄中找到運(yùn)行 WebStorm 的腳本。要將此腳本用作命令行啟動(dòng)器，請(qǐng)按照命令行界面中的說(shuō)明將其添加到您的PATH系統(tǒng)中。

句法

webstorm.sh --line <number> <path>

例子

打開(kāi)一個(gè)項(xiàng)目：

webstorm.sh ~/MyProject

打開(kāi)第 42 行的特定文件：

webstorm.sh --line 42 ~/MyProject/scripts/numbers.js

當(dāng)指定文件的路徑時(shí)，前端開(kāi)發(fā)工具WebStorm 會(huì)以LightEdit 模式打開(kāi)它，除非它屬于已經(jīng)打開(kāi)的項(xiàng)目或有特殊邏輯自動(dòng)打開(kāi)或創(chuàng)建項(xiàng)目（例如，在 Maven 或 Gradle 文件的情況下） 。 如果指定包含現(xiàn)有項(xiàng)目的目錄，WebStorm 將打開(kāi)此項(xiàng)目。如果打開(kāi)一個(gè)不屬于項(xiàng)目的目錄，WebStorm 會(huì)將.idea目錄添加到其中，使其成為一個(gè)項(xiàng)目。

以上就是有關(guān)在WebStorm從命令行打開(kāi)文件的教程，更多關(guān)于WebStorm購(gòu)買信息可進(jìn)入慧都官網(wǎng)查看。

WebStorm已更新至V2022.1，歡迎下載WebStorm最新版本試用。

WebStorm官方最新版免費(fèi)下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)

WebStorm是一個(gè)針對(duì)JavaScript和相關(guān)技術(shù)的集成開(kāi)發(fā)環(huán)境。像其他JetBrains IDE一樣，它使你的開(kāi)發(fā)體驗(yàn)更加愉快，使日常工作自動(dòng)化，并幫助你輕松處理復(fù)雜的任務(wù)。

今天我們一起來(lái)了解下HTML，

首先HTmL包含三層結(jié)構(gòu)，分別是結(jié)構(gòu)層，表現(xiàn)層，行為層。

結(jié)構(gòu)層：html=> 網(wǎng)頁(yè)上有什么，比如說(shuō)文字啊、按鈕啊、圖片啊等等。

表現(xiàn)層：css=> 顯示成什么樣子，比如說(shuō)文字的大小啊，位置啊，顏色啊等等。

行為層：JavaScript=> 具體怎么操作，比如說(shuō)點(diǎn)擊按鈕讓圖片放大縮小等等。

===============================

在了解了html的三層結(jié)構(gòu)之后，我們來(lái)學(xué)習(xí)如何寫(xiě)html。html不是編程語(yǔ)言，它是一套標(biāo)簽。最簡(jiǎn)單的html文本是下圖1這個(gè)樣子。我們可以在電腦桌面上新建一個(gè)記事本文件，然后把后綴名改一下（.txt=>.html），把這段標(biāo)簽代碼粘貼到html文件里，這樣一個(gè)空白的網(wǎng)頁(yè)就做成了。如果需要在網(wǎng)頁(yè)上添加內(nèi)容，我們只需要在第10行的位置添加各種各樣的標(biāo)簽即可。比如我在圖二添加了一個(gè)按鈕標(biāo)簽和一段文字標(biāo)簽，雙擊html文件，頁(yè)面上就從左到右，從上到下顯示對(duì)應(yīng)的內(nèi)容。是不是很簡(jiǎn)單。我們?nèi)粘g覽的網(wǎng)頁(yè)都是這樣一個(gè)標(biāo)簽一個(gè)標(biāo)簽畫(huà)上去的。

我給大家總結(jié)了一張圖，基本上覆蓋了工作中常用的知識(shí)點(diǎn)。同時(shí)分享幾個(gè)小技巧。

1.最簡(jiǎn)單的網(wǎng)頁(yè)寫(xiě)成什么樣子，也就是html模板不需要記憶，下圖也說(shuō)了，去百度下載一個(gè)VSCode軟件（類似于記事本，是現(xiàn)在主流的前端代碼編輯器），用它打開(kāi)我們的html文件，輸入英文嘆號(hào)回車就自動(dòng)生成了，學(xué)編程不要死記硬背。

2.控件的標(biāo)簽不需要記憶，直接百度html XXX標(biāo)簽，例如：百度搜“html按鈕標(biāo)簽”，他就會(huì)告訴我們是<button>，用的時(shí)間長(zhǎng)了自然就記住了。是不是省力。

3.標(biāo)簽的屬性很重要，可以不去記他的寫(xiě)法，因?yàn)閷?xiě)可以百度，重要的是你需要記住標(biāo)簽有什么屬性，下圖的屬性記住足矣。為什么要記呢，因?yàn)楣ぷ髦校械臅r(shí)候會(huì)遇到這樣一種情況，明明設(shè)置一個(gè)屬性可以完成的功能，我們不知道，花費(fèi)了大力氣用css和js去實(shí)現(xiàn)，結(jié)果還存在著特定場(chǎng)合的bug，讓人很無(wú)奈。

4.對(duì)于html還有兩個(gè)標(biāo)簽<canvas>和<svg>，他們是用來(lái)繪圖的，做特殊效果的。我們可以先跳過(guò)，等框架啥的都學(xué)完了，有興趣，學(xué)習(xí)一下。

5.給大家推薦一個(gè)小白學(xué)習(xí)html的網(wǎng)站，w3cschool，圖里不明白的可以去上邊學(xué)學(xué)練練。

6.如果覺(jué)得一個(gè)人學(xué)習(xí)前端有難度，我建了一個(gè)小白前端學(xué)習(xí)交流群，可以私聊我，大家在群里多多交流，我會(huì)經(jīng)常給大家答疑，組織大家練習(xí)，一起做小項(xiàng)目。有方向，少走彎路。