vue項目總結心得

一、vue項目架構

1.1 文件分析

1.1.1 index.html文件（有時會在public文件夾下）

• 是用戶看到的頁面，也就是根組件要掛載的元素所在的組件app
• 通常在里面要進行一些關於viewport的初始化

1.1.2 src/main.js文件

• 整個vue項目的入口文件
• 這個文件回要引入全局的文件（包括但不限於）：
  • 全局css文件
  • 全局使用的庫文件
  • vue-router文件
  • store（vuex）入口文件
• 定義根組件，要use vue的一些功能(如vuex和vue-router)，並且將根組件掛載到index.html的id為app的dom上

1.1.3 src/App.vue文件

• 這里面就是App根組件，也就是要掛載到index.html上的組件，顯示內容就是它
• 通常里面就一個內容，router-view，用來顯示當前url對應的頁面（也就是利用路由）

1.1.4 src/views文件夾

• 頁面文件，里面都是vue的組件，每個組件就是一個頁面，由當前輸入的url決定通過路由顯示哪個頁面
• 這里的頁面又可以分為好幾個組成部分 也就是好幾個子組件，所以這里的組件實際上是用來將某一頁面上的一些小組件整合起來的東西
  • 比如電子書的書城頁面和書架頁面就是兩個不同的頁面，所以在views文件夾下就有store.vue和shelf.vue兩個頁面
  • 這兩個頁面里又包含有其他小組件，store.vue中有 StoreHeader.vue、StoreFooter.vue、Storexxx.vue等，store.vue就引入這些組件並展示在頁面中（這些個小組件就放在src/components/store文件夾下）

1.1.5 src/components文件夾

• 組件文件，這個文件夾下還可以繼續有文件夾，代表着不同頁面下的小組件，比如上面的例子，src/views下有store.vue文件代表書城頁面，src/components文件夾下就有store文件夾來存放這個頁面中的小組件

1.1.6 src/router文件夾

• vue-router相關文件
• 下面的index.js中，通過引用vue-router中的方法來創建router對象，里面的routes就存放着路由
• 路由 根據url的不同，顯示不同的頁面

1.1.7 src/assets文件夾

• 存放樣式文件（字體也可）
• 下面可以有styles來專門放全局樣式，或者是某一部分的樣式，到時候在要使用的地方就直接引入即可

1.1.8 src/store文件夾

• vuex相關文件