vue前端隨記

環境準備

1. 下載并安裝 Node.js

2. 安裝vue 環境

   # 安裝淘寶npm
   npm install -g cnpm --registry=https://registry.npm.taobao.org
   # vue-cli 安裝依賴包
   cnpm install --g vue-cli
   

3. 新建項目

   # 打開vue的可視化管理工具界面
   vue ui	# 注意,要vue3.X 及以上版本,此命令才會生效
   

   運行vue ui之后，會為我們打開一個 http://localhost:8080 的頁面.

4. 安裝element-ui

   # 切換到項目根目錄
   cd vueblog-vue
   # 安裝element-ui
   cnpm install element-ui --save
   

   然后我們打開項目src目錄下的main.js，引入element-ui依賴。

   import Element from 'element-ui'
   import "element-ui/lib/theme-chalk/index.css"
   Vue.use(Element)
   

5. 安裝axios

   cnpm install axios --save
   

   然后同樣我們在main.js中全局引入axios。

   import axios from 'axios'
   Vue.prototype.$axios = axios 
   

vue中設置height:100%無效的問題及解決方法

這時候設置height: 100%;是無效的，在chrome的Elements中發現height仍然是0px.

設置高度100%時，div的高度會等同于其父元素的高度。而上面中id為app的div（vue掛載的div）的父節點是body標簽，body標簽的父節點是html標簽。在默認情況下html和body標簽的高度為auto，而瀏覽器是不會自動給標簽添加高度的，所以html和body標簽就為0，自然子div的高度設置為100%就不起作用了。

此時應該在App.vue文件style中添加如下代碼：

html,body,#app{

  height:100%;

}

vue 打包部署 Nginx 步驟

1. 項目的根目錄下創建 vue.config.js 文件

vue.config.js

module.exports={
    publicPath: '/'
}

2. 在控制臺執行 npm run build 命令

3. 將生成的文件夾 dist 里面的文件拷貝到 Nginx html 文件夾下面.

4. 修改 Nginx 配置文件.

   nginx.conf

   server {
    listen 80;
    server_name 120.77 .158 .169;
    # 指定允許跨域的方法， * 代表所有
    add_header Access - Control - Allow - Methods * ;
    # 預檢命令的緩存， 如果不緩存每次會發送兩次請求
    add_header Access - Control - Max - Age 3600;
    # 不帶cookie請求， 并設置為false
    add_header Access - Control - Allow - Credentials false;
    # 表示允許這個域跨域調用（ 客戶端發送請求的域名和端口）
    # $http_origin動態獲取請求客戶端請求的域 不用 * 的原因是帶cookie的請求不支持 * 號
    add_header Access - Control - Allow - Origin $http_origin;
    # 表示請求頭的字段 動態獲取
    add_header Access - Control - Allow - Headers
    $http_access_control_request_headers;
    # OPTIONS預檢命令， 預檢命令通過時才發送請求
    # 檢查請求的類型是不是預檢命令
    if ($request_method = OPTIONS) {
        return 200;
    }
    #charset koi8 - r;
    #access_log logs / host.access.log main;
    location / {
            root / www / server / nginx / html;
            try_files $uri $uri / /index.html last;
            index / index.htm;
   
            #配置跨域請求
            location /sku {
                proxy_pass http: //39.98.123.211:8216/;
            }
   

5. 啟動Nginx, 測試訪問即可.

Linux 下安裝Nginx 服務

1. 去官網下載安裝包 http://nginx.org/en/download.html nginx-1.21.3.tar.gz, 解壓后上傳到 Linux 服務器上.

2. 進入Nginx 文件夾下, 執行配置命令:

   ./configure --prefix=/usr/local/nginx
   

   當報錯 : Permission denied 拒絕訪問的時候, 執行下面命令

   chmod +x ./configure
   

   然后重試

   ./configure --prefix=/usr/local/nginx
   

   配置的時候可能會出現類似這樣的信息

   ./configure: error: the HTTP rewrite module requires the PCRE library.
   You can either disable the module by using --without-http_rewrite_module
   option, or install the PCRE library into the system, or build the PCRE library
   statically from the source with nginx by using --with-pcre=<path> option. 
   

   安裝pcre-devel解決問題

   yum -y install pcre-devel
   

   安裝完成后再執行

   ./configure --prefix=/usr/local/nginx
   

   執行完后還有可能會出現這樣的問題：

   checking for PCRE JIT support ... not found
   checking for system md library ... not found
   checking for system md5 library ... not found
   checking for OpenSSL md5 crypto library ... not found
   checking for sha1 in system md library ... not found
   checking for OpenSSL sha1 crypto library ... not found
   checking for zlib library ... found
   

   解決辦法：

   yum -y install openssl openssl-devel
   

   安裝完成后再執行

   ./configure --prefix=/usr/local/nginx
   

   出現這個說明, 說明配置成功

   Configuration summary
     + using system PCRE library
     + OpenSSL library is not used
     + using system zlib library
   
     nginx path prefix: "/usr/local/nginx"
     nginx binary file: "/usr/local/nginx/sbin/nginx"
     nginx modules path: "/usr/local/nginx/modules"
     nginx configuration prefix: "/usr/local/nginx/conf"
     nginx configuration file: "/usr/local/nginx/conf/nginx.conf"
     nginx pid file: "/usr/local/nginx/logs/nginx.pid"
     nginx error log file: "/usr/local/nginx/logs/error.log"
     nginx http access log file: "/usr/local/nginx/logs/access.log"
     nginx http client request body temporary files: "client_body_temp"
     nginx http proxy temporary files: "proxy_temp"
     nginx http fastcgi temporary files: "fastcgi_temp"
     nginx http uwsgi temporary files: "uwsgi_temp"
     nginx http scgi temporary files: "scgi_temp"
   
   

3. 執行安裝命令

   make && make install
   

   出現類似這種說明, 就表示安裝成功了.

   cp conf/nginx.conf '/usr/local/nginx/conf/nginx.conf.default'
   test -d '/usr/local/nginx/logs' \
   	|| mkdir -p '/usr/local/nginx/logs'
   test -d '/usr/local/nginx/logs' \
   	|| mkdir -p '/usr/local/nginx/logs'
   test -d '/usr/local/nginx/html' \
   	|| cp -R html '/usr/local/nginx'
   test -d '/usr/local/nginx/logs' \
   	|| mkdir -p '/usr/local/nginx/logs'
   	
   make[1]: Leaving directory '/myweb/nginx-1.21.3'
   
   

   安裝完后/usr/local/nginx 后出現幾個文件夾conf、html、logs、sbin

4. 啟動Nginx

   ./usr/nginx/sbin/nginx
   

   此時,訪問 Nginx 默認的 80 端口, 就會出現成功的頁面

停止nginx
 
nginx -s stop
 
重啟nginx
 
nginx -s reload
 
 
總結：在linux下安裝nginx，首先需要安裝 gcc-c++編譯器。然后安裝nginx依賴的pcre和zlib包。最后安裝nginx即可。

vue啟動項目命令

在控制臺輸入: npm run serve

D:\ideaProject\web\vueadmin-vue> npm run serve