VUE快速入門與實踐（下）

這一部分主要講的是vue的模塊化開發

模塊

• node模塊的規範commonjs
• js模塊cmd(seajs) ，amd(require)
• umd 爲了上面兩種做兼容處理
• esmodule
  • 如何定義模塊（一個js就是一個模塊）
  • 如何導出模塊（export）
  • 如何使用模塊（import）

如何分模塊開發

假設我們有兩個js文件: index.js和content.js,現在我們想要在index.js中使用content.js返回的結果，我們要怎麼做呢？

1. 第一種：require.js
2. 第二種：CommonJS
3. 第三種：ES6

依次來看怎麼使用？
一、require.js

//content.js
define('content.js', function(){
    return 'A cat';
})

//index.js
require(['./content.js'], function(animal){
    console.log(animal);   //A cat
})

二、CommonJS

//content.js
module.exports = 'A cat'

//index.js
var animal = require('./content.js')

三、ES6

//content.js
export default 'A cat'

//index.js
import animal from './content'

如何使用webpack

下載webpack

npm init -y
//全局安裝
npm install webpack -g
//安裝到你的項目目錄
npm install webpack --save-dev
//運行
npm run build

注：

• 安裝webpack或者less最好不要安裝全局的，否則可能導致webpack的版本差異
• webpack必須採用commonjs寫法
• 在package.js中配置一個腳本，這個腳本用的命令是webpack，會去當前的node_modules下找bin對應的webpack名字讓其執行，執行的就是bin/webpack.js，webpack.js需要當前目錄下有個名字叫webpack.config.js的文件，我們通過npm run build執行的目錄是當前文件的目錄，所以會去當前目錄下查找。
  
  

babel轉化es6->es5

安裝babel

npm install babel-core --save-dev
npm install babel-loader --save-dev

讓babel擁有es6語法的功能

npm install babel-preset-es2015 --save-dev

解析更高級語法

npm install babel-preset-stage-0 --save-dev

解析樣式

• css-loader將css解析成模板，將解析的內容插入到style標籤內（style-loader）

npm install css-loader style-loader --save-dev

less,sass,stylus(預處理語言)

• less-loader less css-loader style-loader
• sass-loader less css-loader style-loader
• stylus-loader less css-loader style-loader

解析圖片

-file-loader
-url-loader(依賴於file-loader)

需要解析html插件

• 插件的作用是以我們自己的html爲模板，將打包後的結果自動引入到html中產出的dist目錄下

npm install html-webpack-plugin --save-dev

webpack-dev-server

• 這裏內置了服務，可以幫我們啓動一個端口號，當代碼更細時，可以自動打包（在內存中打包），代碼的變化就重新執行。這樣做防止一更新代碼，就得執行npm run build，只需要執行一次npm run dev即可。

npm install webpack-dev-server --save-dev

運行

npm run dev

安裝vue-loader vue-template-compiler

• vue-loader 是用來解析.vue文件的，vue會自動的調用vue-template-compiler
• vue-template-compiler用來解析vue模板的
  
  靜態頁引用的js文件

//引入Vue後在node_modules文件夾下中的vue文件夾中的package.json文件中的main對應的文件dist/vue.runtime.common.js，即爲要引入的文件。node_modules->vue->package.json->main
//這樣直接引用vue，引用的並不是vue.js，引用的時vue的runtime
//vue=compiler+runtime(compiler可以編譯模板)
//爲什麼不引用compiler呢？因爲compiler有6k,當不引用模板時就不需要引用compiler
import Vue from 'vue';
import App from './App.vue'
new Vue({
    //當不引用compiler時，可以使用render
    //render函數的作用是將虛擬dom渲染成真實的dom
    //createElement返回的是虛擬的dom
    // render:(createElement)=>{
    //     return createElement('h1',[
    //         'hello',createElement('span','一則頭條')
    //     ])
    // }

    //當引入compiler後，可以這樣寫
    render:(h)=>h(App)
}).$mount('#app');

準備工作

• 安裝必要的文件
• 下載一個全局生成vue項目的腳手架

npm install vue-cli -g
vue init webpack 項目名字
cd 項目名
npm install 
npm run dev