1. 程式人生 > 其它 >個人自學前端34-Vue11-Vue腳手架

個人自學前端34-Vue11-Vue腳手架

目錄

一. 為什麼要腳手架

為什麼要腳手架 => 為了實現模組化專案
模組化專案 => 提高開發效率,減少維護成本

模組化 => 把本來寫在一起的程式碼分成很多個檔案來寫.每個檔案是一個模組.
模組化帶來的新問題 => 模組化之間需要匯入和匯出.

匯入:import 變數名 from 某個檔案地址
匯出:export default 匯出的東西

二. 單檔案元件.vue

vue腳手架 => 專門有一個種專門用來寫元件的檔案字尾 => .vue
.vue => 單檔案元件

.vue單檔案元件有3個組成部分

  1. template (元件的檢視)
  2. script (元件的資料和邏輯)
    在這裡需要匯出元件選項.這個元件選項內,不用寫template
  3. style (元件的樣式)

三. vue腳手架路徑寫法

  1. 原始檔路徑.(原始檔都放在node_modules) => 直接寫原始檔名字
  2. 當前資料夾. => ./
  3. 上一級. => ../
  4. @ => src資料夾(絕對路徑)
  5. index.js可以直接省略
  6. .js和.vue和.json檔案的字尾可以省略

四. use

腳手架中,Vue的外掛匯入後,都需要使用use處理一次.
不是vue的外掛不需要使用use,比如axios.
VueRouter和Vuex都是Vue的外掛.

    Vue.use(VueRouter);
    Vue.use(Vuex);