vue專案搭建流程

一.專案初始化

1.全域性安裝vue-cli cnpm install -global vue-cli 2.初始化基於webpak的專案模版說明：vue build ==> 打包方式，回車即可； install vue-router ==> 是否要安裝 vue-router，專案中肯定要使用到所以y 回車； use eslint to lint your code ==> 是否需要 js 語法檢測目前我們不需要所以 n 回車； set up unit tests ==> 是否安裝單元測試工具目前我們不需要所以 n 回車； setup e2e tests with nightwatch ==> 是否需要端到端測試工具目前我們不需要所以 n 回車； 4.安裝依賴 cnpm i 5.執行專案

npm run dev

二.專案詳解

1.build：構建指令碼目錄 1）build.js ==> 生產環境構建指令碼； 2）check-versions.js ==> 檢查npm，node.js版本； 3）utils.js ==> 構建相關工具方法； 4）vue-loader.conf.js ==> 配置了css載入器以及編譯css之後自動新增字首； 5）webpack.base.conf.js ==> webpack基本配置； 6）webpack.dev.conf.js ==> webpack開發環境配置； 7）webpack.prod.conf.js ==> webpack生產環境配置； 2.config：專案配置 1）dev.env.js ==> 開發環境變數； 2）index.js ==> 專案配置檔案； 3）prod.env.js ==> 生產環境變數； 3、node_modules：npm 載入的專案依賴模組 4、src：這裡是我們要開發的目錄，基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案： 2）components：元件目錄，我們寫的元件就放在這個目錄裡面； 3）router：前端路由，我們需要配置的路由路徑寫在index.js裡面； 5）main.js：入口js檔案； 6、index.html：首頁入口檔案，可以新增一些 meta 資訊等 7、package.json：npm包配置檔案，定義了專案的npm指令碼，依賴包等資訊 8、readme.md：專案的說明文件，markdown 格式

9、.***x檔案：這些是一些配置檔案，包括語法配置，git配置等

例如：

cnpm i axios -s

四.封裝api

一.安裝axios
npm install axios; // 安裝axios
二.在src目錄下新建request資料夾，然後在新建http.js和一api.js。
http.js檔案用來封裝我們的axios，api.js用來統一管理我們的介面。
// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import qs from 'qs'; // 引入qs模組，用來序列化post型別的資料，後面會提到
// vant的toast提示框元件，大家可根據自己的ui元件更改。
import  from 'vant'; 
//import  from 'element-ui';//這是element-ui的提示框
三.環境切換
我們的專案環境可能有開發環境、測試環境和生產環境。
我們通過node的環境變數來匹配我們的預設的介面url字首。
axios.defaults.baseurl可以設定axios的預設請求位址就不多說了。
// 環境的切換
if (process.env.node_env == 'development')  
else if (process.env.node_env == 'debug')  
else if (process.env.node_env == 'production') 
//設定請求超時
axios.defaults.timeout = 10000;
//post請求頭的設定
//請求攔截
// 先導入vuex,因為我們要使用到裡面的狀態物件
// vuex的路徑根據自己的路徑去寫
import store from '@/store/index';
// 請求***axios.interceptors.request.use(    
config => ,    
error => )

響應攔截

// 響應***
axios.interceptors.response.use(    
response =>  else     
},    
// 伺服器狀態碼不是2開頭的的情況
// 這裡可以跟你們的後台開發人員協商好統一的錯誤狀態碼    
// 然後根據返回的狀態碼進行一些操作，例如登入過期提示，錯誤提示等等
// 下面列舉幾個常見的操作，其他需求可自行擴充套件
error => 
});break;
// 403 token過期
// 登入過期對使用者進行提示
// 清除本地token和清空vuex中token物件
// 跳轉登入頁面                
case 403:
toast();
// 清除token
localstorage.removeitem('token');
store.commit('loginsuccess', null);
// 跳轉登入頁面，並將要瀏覽的頁面fullpath傳過去，登入成功後跳轉需要訪問的頁面 
settimeout(() =>                         
});                    
}, 1000);                    
break; 
// 404請求不存在
case 404:
toast();
break;
// 其他錯誤，直接丟擲錯誤提示
default:
toast();
}return promise.reject(error.response);
}}    
});

例外附上：

gulp安裝與使用

搭建基於webpack的vue環境

**vue專案優化心得

總結：搭建vue專案心得

總結：vue中axios的封裝-api介面的管理

vue專案搭建流程

webpack搭建vue專案流程以及打包發布流程

搭建乙個vue專案的流程

vue專案搭建

vue專案搭建流程

webpack搭建vue專案流程以及打包發布流程

搭建乙個vue專案的流程

vue專案搭建

相關推薦