【Vue】搭建開發環境

學習一個新東西的時候，先要把開發環境搭起來，最近想學學前端技術，vue的開發環境搭建還是比較簡單，這裡簡單記錄一下

搭建環境

1. 開發工具

• VSCode
• VSCode插件 - vue（語法高亮）

2. 運行環境

• 安裝Node.js
• 查看版本信息 node -v

3. 包管理工具

•  npm（國外源）

　　隨node.js安裝，查看版本信息npm -v

• cnpm（淘寶源）

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安裝包

npm install -g @vue/cli

• 卸載包

npm uninstall vue-cli -g

4. 打包工具

•  安裝webpack

npm install webpack -g

5. 安裝vue-cli（腳手架）

 vue-cli 4.0+已改成@vue/cli，若安裝舊版先卸載

• 安裝

npm install -g @vue/cli

• 卸載舊版vue-cli

npm uninstall vue-cli -g

•  查看版本信息
  vue -V（註意是大寫）
• 使用

1. 創建項目： vue create projectName
2. 編譯和熱更新：npm run serve
3. 編譯並壓縮： npm run build

實踐

創建項目

 cmd 到要創建項目的文件夾

1. 腳手架創建項目

1.1. 腳手架創建 vue create my-project 註：項目名稱不能有大寫
1.2. 選擇配置（預設/手動），通過上下鍵選擇，這裡就選預設
1.3. 選擇完成回車等待創建完成
1.4 創建完成會生成一個項目名稱一樣的文件夾

2. 通過ui創建

vue ui

會打開一個創建頁面，可以在上面創建項目，啟動調試，編譯生成等，ui很簡單，就不介紹。

調試運行

cmd到項目文件夾（不是上面創建的文件夾，而是通過腳手架/ui創建的項目名稱文件夾），執行

npm run serve

每次運行都必須定位到對應文件夾，這個比較繁瑣，下麵介紹幾個使用技巧

若VSCode開發，直接在終端執行

2. 通過Powershell執行，打開對應文件夾，shift+滑鼠右鍵，然後選擇在此處打開Powershell

3. 在文件夾路徑前加cmd 空格 ，直接定位到對應的文件夾

編譯生成

cmd執行

npm run build

在項目文件生成dist文件夾

部署前端文件

1. 跟後臺伺服器（IIS,tomcat）一起發佈

把生成資源文件拷貝到後臺伺服器靜態資源文件夾，後臺伺服器設置啟動頁

• 優點
  1. 簡單，不需要部署多台伺服器
• 缺點
  1. 前端人員需要和後端人員配合
  2. 發佈後有調試問題還是需要基於後端伺服器

2. 前端獨立部署

nginx做前端資源的web 伺服器，反向代理後端伺服器的請求

• 優點

1. 前後端單獨部署，方便各自排查文檔
2. 前後端人員減少溝通成本
3. 可以在nginx解決跨域問題，不需要後臺伺服器處理

• 缺點

1. 增加複雜性，但這個在nginx里算不上什麼

nginx 配置文件

    server {
        listen       80;
        server_name  localhost;

       
        location / {
            root   F:\Codes\Vue\my-project\dist;
            index  index.html index.htm;
        }

        location /api {
            proxy_pass   http://127.0.0.1:8080;
        }
}

轉發請標明出處：https://www.cnblogs.com/WilsonPan/p/12719082.html