Vue-cli 工具 / 通過 Vue-cli 工具重構 todoList

evenyao發表於2018-09-08
Vue

本博文歸納在 Vue 學習過程中， Vue-cli 工具的使用說明。除此之外還通過 Vue-cli 工具將之前 Vuejs 基本語法當中實現的 todoList 進行重構。

安裝

npm install --global vue-cli

 

建立

建立一個基於 webpack 模板的新專案，在此之前，先 cd Desktop 到桌面路徑

vue init webpack todolist
 

各選項簡介

? Project name //todolist 專案名
? Project description //A Vue.js project 專案的描述
? Author //evenyao <invictus@vip.qq.com> 專案的作者
? Vue build //standalone  如何構建專案 Runtime + Compiler
? Install vue-router?  //No 是否安裝 vue-router 路由
? Use ESLint to lint your code? //Yes 是否用ESLint 規範程式碼
? Pick an ESLint preset // 使用標準的 ESLint 的語法檢測 Standard
? Set up unit tests //自動化測試工具 No
? Setup e2e tests with Nightwatch? //自動化測試工具 No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm  //包和依賴的安裝 NPM

 

安裝完畢之後使用 cd todolist 、npm run dev 啟動專案

 

專案啟動成功，可以通過 http://localhost:8080 開啟

 

 

專案檔案

開啟 todolist 專案檔案，檢視各個資料夾目錄

 
  • build: 放置專案的 webpack 配置檔案
  • config: 針對於開發環境與線上環境的配置檔案
  • node_modules: 專案的依賴
  • src: 原始碼所放置的目錄
  • static: 放置靜態的資源

其他：

  • babelrc: babel的編譯
  • editorconfig: 瀏覽器的配置
  • eslint: eslint檢測規則說明

 

單檔案元件

在進行工程化開發時，主要編寫 src 目錄下的程式碼，開啟 src 看到 App.vue

 

在腳手架中，使用單檔案元件的編碼方式。即檔案中包含了元件的所有內容（模板、邏輯、樣式）。即一個檔案就是一個元件，進行了很好的封裝。

使用 Vue-cli 工具 開發 todoList

在 main.js 中將 TodoList 元件引入

 

 

 

Vue-cli 中的 data

在 Vue-cli 中，data 不再是一個物件，而是一個函式 function，return 返回值是他的具體資料。

export default {
  data: function(){
    return {
      
    }
  }
}

 

 

Vue-cli 的拆分元件

每一個 ul 裡面的標籤都做成一個小元件，這是之前的做法。在 Vue-cli 中找到 componens 資料夾。新增 TodoItem.vue 元件，先寫好它的模板。

 

然後在 TodoList.vue 中通過 import 引用該元件。並進行 components 宣告。

import TodoItem from `./components/TodoItem`
 

傳遞引數

父元件通過屬性的方式，向子元件傳值，該例項通過 content 傳給子元件。

 

 

 

子元件在 props 裡定義宣告，接收 content 這個資料。然後在模板裡面通過插值表示式直接使用 content。

 

 

刪除功能

跟之前 Vuejs 實現簡易 todoList 功能 與 元件 所提到的一樣，在子元件的模板中定義事件 @click="handleDelete"，並在props 中定義傳遞引數index。在methods 中定義事件函式，呼叫 this.$emit 向外觸發事件。

 

然後父元件通過 @delete="handleDelete" 監聽該事件，handleDelete 定義在父元件的 methods 中。

 

這樣就通過 Vue-cli 實現了最簡易的 todoList 功能

相關文章