【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（注意是大寫）
使用

創建專案： vue create projectName
編譯和熱更新：npm run serve
編譯并壓縮： 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 服務器，反向代理后端服務器的請求

優點

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

缺點

增加復雜性，但這個在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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/45553.html

標籤：Html/Css

上一篇：12.居中總結

下一篇：13.制作一個直角三角形