搭建環(huán)境
1. 開發(fā)工具
- VSCode
- VSCode插件 - vue（語法高亮）
2. 運行環(huán)境
- 安裝Node.js
- 查看版本信息 node -v
3. 包管理工具
npm（國外源）
隨node.js安裝田篇，查看版本信息npm -vcnpm（淘寶源）
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（注意是大寫） - 使用
- 創(chuàng)建項目：
vue create projectName - 編譯和熱更新：
npm run serve - 編譯并壓縮：
npm run build
- 創(chuàng)建項目：
實踐
創(chuàng)建項目
cmd 到要創(chuàng)建項目的文件夾
腳手架創(chuàng)建項目
1.1. 腳手架創(chuàng)建vue create my-project注：項目名稱不能有大寫
1.2. 選擇配置（默認/手動），通過上下鍵選擇斯辰，這里就選默認
1.3. 選擇完成回車等待創(chuàng)建完成
1.4 創(chuàng)建完成會生成一個項目名稱一樣的文件夾通過ui創(chuàng)建
vue ui
會打開一個創(chuàng)建頁面舶担，可以在上面創(chuàng)建項目，啟動調(diào)試彬呻，編譯生成等衣陶，ui很簡單，就不介紹闸氮。
調(diào)試運行
cmd到項目文件夾（不是上面創(chuàng)建的文件夾剪况，而是通過腳手架/ui創(chuàng)建的項目名稱文件夾）
npm run serve
每次運行都必須定位到對應文件夾，這個比較繁瑣蒲跨，下面介紹幾個使用技巧
- 若VSCode開發(fā)译断，直接在終端執(zhí)行
- 通過Powershell執(zhí)行，打開對應文件夾或悲，shift+鼠標右鍵孙咪，然后選擇在此處打開Powershell
-
在文件夾路徑前加cmd空格堪唐，直接定位到對應文件夾
注意cmd后面有空格
編譯生成
npm run build
在項目文件生成dist文件夾
部署前端文件
- 跟后臺服務器（IIS,tomcat）一起發(fā)布
把生成資源文件拷貝到后臺服務器靜態(tài)資源文件夾，后臺服務器設置啟動頁
- 優(yōu)點
- 簡單翎蹈，不需要部署多臺服務器
- 缺點
- 前端人員需要和后端人員配合
- 發(fā)布后有調(diào)試問題還是需要基于后端服務器
- 前端獨立部署
- nginx做前端資源的web 服務器淮菠，
- 反向代理后端服務器的請求
- 優(yōu)點
- 前后端單獨部署，方便各自排查文檔
- 前后端人員減少溝通成本
- 可以在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;
}
}
