搭建環境

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

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

1. 若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;
        }
}