精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

學(xué)習(xí)一個(gè)新東西的時(shí)候，先要把開(kāi)發(fā)環(huán)境搭起來(lái)，最近想學(xué)學(xué)前端技術(shù)，vue的開(kāi)發(fā)環(huán)境搭建還是比較簡(jiǎn)單，這里簡(jiǎn)單記錄一下

1. 開(kāi)發(fā)工具

• VSCode
• VSCode插件 - vue（語(yǔ)法高亮）

2. 運(yùn)行環(huán)境

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

3. 包管理工具

•  npm（國(guó)外源）

　　隨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. 創(chuàng)建項(xiàng)目： vue create projectName
2. 編譯和熱更新：npm run serve
3. 編譯并壓縮： npm run build

創(chuàng)建項(xiàng)目

 cmd 到要?jiǎng)?chuàng)建項(xiàng)目的文件夾

1. 腳手架創(chuàng)建項(xiàng)目

1.1. 腳手架創(chuàng)建 vue create my-project 注：項(xiàng)目名稱不能有大寫
1.2. 選擇配置（默認(rèn)/手動(dòng)），通過(guò)上下鍵選擇，這里就選默認(rèn)
1.3. 選擇完成回車等待創(chuàng)建完成
1.4 創(chuàng)建完成會(huì)生成一個(gè)項(xiàng)目名稱一樣的文件夾

2. 通過(guò)ui創(chuàng)建

vue ui

會(huì)打開(kāi)一個(gè)創(chuàng)建頁(yè)面，可以在上面創(chuàng)建項(xiàng)目，啟動(dòng)調(diào)試，編譯生成等，ui很簡(jiǎn)單，就不介紹。

調(diào)試運(yùn)行

cmd到項(xiàng)目文件夾（不是上面創(chuàng)建的文件夾，而是通過(guò)腳手架/ui創(chuàng)建的項(xiàng)目名稱文件夾），執(zhí)行

npm run serve

每次運(yùn)行都必須定位到對(duì)應(yīng)文件夾，這個(gè)比較繁瑣，下面介紹幾個(gè)使用技巧

若VSCode開(kāi)發(fā)，直接在終端執(zhí)行

2. 通過(guò)Powershell執(zhí)行，打開(kāi)對(duì)應(yīng)文件夾，shift+鼠標(biāo)右鍵，然后選擇在此處打開(kāi)Powershell

3. 在文件夾路徑前加cmd 空格 ，直接定位到對(duì)應(yīng)的文件夾

編譯生成

cmd執(zhí)行

npm run build

在項(xiàng)目文件生成dist文件夾

部署前端文件

1. 跟后臺(tái)服務(wù)器（IIS,tomcat）一起發(fā)布

把生成資源文件拷貝到后臺(tái)服務(wù)器靜態(tài)資源文件夾，后臺(tái)服務(wù)器設(shè)置啟動(dòng)頁(yè)

• 優(yōu)點(diǎn)
  1. 簡(jiǎn)單，不需要部署多臺(tái)服務(wù)器
• 缺點(diǎn)
  1. 前端人員需要和后端人員配合
  2. 發(fā)布后有調(diào)試問(wèn)題還是需要基于后端服務(wù)器

2. 前端獨(dú)立部署

nginx做前端資源的web 服務(wù)器，反向代理后端服務(wù)器的請(qǐng)求

• 優(yōu)點(diǎn)

1. 前后端單獨(dú)部署，方便各自排查文檔
2. 前后端人員減少溝通成本
3. 可以在nginx解決跨域問(wèn)題，不需要后臺(tái)服務(wù)器處理

• 缺點(diǎn)

1. 增加復(fù)雜性，但這個(gè)在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;
        }
}