搭建Vue Cli 檔案架構

上次在面試時候要用vue cli寫個小練習，因為只有過乙個cli專案，之後一直work on專案上於是許久沒有從頭建立vue cli，當時還是面試官幫忙搭了個環境，太尷尬

此文章以window環境為範例

npm install -g @vue/cli //全域性安裝

// 檢視全域性安裝路徑  

npm root -g  
// 檢視npm的基礎設定  
npm config ls  
// 檢視安裝目錄路徑  
npm config get prefix  
//設定全域性包目錄
npm config set prefix 「c
:\nodejs\node_global」 //預設位址
//設定快取目錄
npm config set cache 「c
:\nodejs\node_cache」

vue create vue-test

接下來整理下自已通常會建立的資料夾

兩個資料夾主要用來放置axios相關檔案。

api放置所有相關的呼叫介面程式碼，而utils可以放置通用的應用程式碼，如 : 可以重複使用的函式也可以存為js檔案匯出，這樣就可以在別的地方重複使用

在utils中存放的檔案中引入axios並在此引入攔截器，如下 :

import axios from

'axios'
;const
baseurl
= process.env.
node_env
==='production'?''
:'/userapi/users'
;//建立 axios,賦給變數service
const service = axios.
create()
;// 新增請求***
service.interceptors.request.
use(
function
(config)
,function
(error));
// 新增響應***
service.interceptors.response.
use(
function
(response)
,function
(error));
export
default service;

import service from

'@/utils/user_request.js'
;export
function
deposit
(data)})
;}

import store from

'./store/index'
;//runtime執行模式
store用來存放vuex管理的檔案，而modules用來存放不同型別的vuex，再透過index.js匯出。
import vue from

'vue'
;import vuex from
'vuex'
;vue.
use(vuex);;
import userdata from
'./modules/userdata.js'
;export
default
newvuex.store()
;
最後別忘記從main.js全域性引入，讓它掛載在vue下此後我們就可以透過root.$router.***使用了

import router from

'./router/index'
;//runtime執行模式
newvue()
.$mount()
;
其他的就如同檔名一樣沒有特別之處就不另外介紹了。

以上!!!
				
Vue Cli 目錄架構
api 放置與後台 api 相關的檔案。這裡面有 axios 庫的例項配置檔案 使用配置的 axios 例項接入 api 獲取資料的函式的集合的檔案 assets 放置靜態資源，包括公共的 css 檔案 js 檔案 iconfont 字型檔案 img 檔案 以及其他資源類檔案。之所以強調是公共的 c...
				
vue cli  專案搭建
1 因為之前已經安裝過node.js和git，所以直接用npm 2 吶吶吶npm速度慢是一定的了，所以用 映象，將npm cnpm 這裡寫 片3 開啟cmd，進入想要建立專案的目錄下，輸入 vue init webpack projectname4 安裝提示選擇 project name 專案名稱 ...
				
vue cli搭建專案
一 安裝node 不做詳述 我的node安裝位置d program files 安裝檔案包名是nodejs 即 d program files nodejs 如果是直接在d盤的node資料夾 那就是d node 配置環境變數 我的電腦 計算機右鍵 高階系統設定 環境變數 系統變數中 path 追加 ...