vue組件續和前端工程化

1.3 插槽 slot

template: ` <button> <slot></slot> </button> ` <my-button>內容</my-button》 

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

//調用組件 <base-layout> <template slot="header"> <h1>Here might be a page title</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <p slot="footer">Here's some contact info</p> </base-layout> 

1.4 動態組件

<component is="組件"></component> <keep-alive> <component is="組件"></component> </keep-alive> 

1.5 組件注意事項

<table>
	<tr is="組件名"></tr> </table> 給組件標籤 設置的class和style 會自動添加到 組件模板的根元素上 在組件標籤上添加原生事件 <my-component @click.native=""> 實現prop的雙向數據綁定 :屬性名.sync 子組件要配合, this.$emit('update:屬性名', 新值) 

2 前端工程化

2.1 支持環境 Node

node.js JavaScript的解釋器 用於後端開發 做爲前端工具的支持環境 

2.2 NPM 包管理工具

包管理工具 集成在node.js中，不須要單獨下載 前端的一切資源均可以都過npm下載 包括 各類前端工具(webpack\grunt...) 各類前端資源(jquery\bootstrap...) 

npm install 包名 本地安裝（本項目目錄） （資源類） npm install -g 包名 全局安裝（命令行工具） npm uninstall 包名 刪掉本地的包 npm uninstall 包名 -g 刪除全局安裝的包 

#項目初始化 npm init 建立一個package.json 裏面是對項目的描述，指定依賴 

項目中的node_moudules 目錄 不須要上傳 運行 npm install 自動安裝項目全部的依賴（存在package.json） 

npm install 包 --save 下載包的同時，加入到package.json中的 `dependencies` npm install 包 --save-dev 下載包的同時，加入到package.json中的 `devDependencies` 開發階段的依賴 

2.3 模塊化工具

• webpack
• Browserify

把前端全部的資源當作模塊，向引入模塊同樣去使用

2.4 自動化工具

集成各類應用：代碼壓縮、圖片壓縮、編譯sass....

• grunt
• gulp
• webpack

3 Vue生成器

集成了webpack、以及其餘各類須要的工具

3.1 安裝

npm install -g @vue/cli   安裝3.x npm install -g vue/cli 安裝的2.x 

3.2 使用

vue create 項目名稱 自動生成項目的目錄 

3.3 包含的東西

webpack  
babel   把ES6編譯成ES5 eslint 代碼語法規範 TypeScript 負責把TypeScript編譯成JavaScript Router(vue-router Vue全家桶成員) 路由 Vuex(Vue全家桶成員) vue狀態管理 CSS Pre-processors CSS預處理 會讓你再次選擇器(SASS、LESS、Stylus...) Linter / Formatter 語法檢查 Unit Testing 單元測試 E2E Testing 端到端測試 

2.4 命令

npm run serve 臨時編譯，建立臨時服務器 loacalhost:8080 npm run build 編譯，生成dist目錄 

4. 前端的集成環境 WebStorm

5 項目目錄結構

|- node_modules |- public |- index.html |- assets 靜態文件 圖片、字體 |- src |- components 普通組件(局部) |- HelloWorld.vue |- views 頁面組件 |- Home.vue |- About.vue |- main.js 入口 |- App.vue 整體結構組件 |- router.js 路由設置 |- store.js 狀態管理 |- package.json 

6 Vue全家桶

vue 自己 vue-router 路由 vuex 狀態管理 vue-ssr 服務端渲染 element-ui vue樣式組件庫