這一部分聽(tīng)的我迷迷糊糊的做鹰，安裝了一萬(wàn)個(gè)包

vue-cli

Vue項(xiàng)目的腳手架,幫我們生成vue的工具

npm install vue-cli -g
vue init webpack <項(xiàng)目名字>
cd 項(xiàng)目名字
npm install
npm run dev

彈出Your application is running here: http://localhost:8080，打開(kāi)這個(gè)網(wǎng)址网梢，Welcome to Your Vue.js App继找，就成功了
反正這個(gè)隨便查都有，我以前安完了

模塊

node.js中有個(gè)require，前端并不支持

規(guī)范：

• node模塊的規(guī)范commonjs
• cmd seajs amd require
• umd 為了做兼容處理的
• esmodule
  • 如何定義模塊（一個(gè)js就是一個(gè)模塊）
  • 如何導(dǎo)出模塊 （export）
  • 如何使用模塊（import）

export

一個(gè)模塊就是一個(gè)獨(dú)立的文件反粥，該文件內(nèi)部的所有變量，外部無(wú)法獲取疲迂。如果希望外部能夠讀取模塊內(nèi)的某個(gè)變量需要使用export輸出該變量才顿。

export let str1="大白熊";
export let str2="小熊";

這個(gè)js文件會(huì)將str和str2放在一個(gè)對(duì)象中導(dǎo)出 {str1:"大白熊"，str2:"小熊"}

import

其他JS文件可以通過(guò)import命令加載定義好的文件尤蒿。
變量的引入與ES6結(jié)構(gòu)賦值相似郑气，形式要與輸出的相同都是對(duì)象

import {str1,str2} from "./a.js"

1. 在另一個(gè)文件中將內(nèi)容解構(gòu)出來(lái)才能用
2. 不能再次聲明str1和str2 import擁有聲明功能
3. import會(huì)被提升到頂部執(zhí)行

由于如果模塊中有多少對(duì)象就import出來(lái)多少實(shí)在比較麻煩，所以使用以下方法導(dǎo)出

import * as b from './a.js'
console.log(b.str1,b.str2);

注意要使用變量的時(shí)候不能直接使用str1和str2

或者使用default
導(dǎo)出時(shí)腰池，將變量放在 export default里尾组，引入時(shí)使用

export default {a:1，b:2};

default為對(duì)象形式

引入時(shí)

import x from './b.js'

x代表的是default后的結(jié)果

webpack

webpack是一塊模塊加載器兼打包工具示弓，最終打包為靜態(tài)文件

下載與配置

1. 下載

npm init -y
npm install webpack  --save-dev

安裝webpack最好不要安裝全局讳侨，否則可能導(dǎo)致webpack的版本差異

2. 新建一個(gè)文件webpack.config.js
3. 在package.json中配置一個(gè)腳本，這個(gè)腳本用的命令是webpack奏属】缈纾回去當(dāng)前的node_moudules下找bin對(duì)應(yīng)的webpack名字讓其執(zhí)行，執(zhí)行的就是bin/webpack.js囱皿，webpack.js需要當(dāng)前目錄下有個(gè)名字叫webpack.config.js的文件勇婴。我們通過(guò)npm run build執(zhí)行的目錄是當(dāng)前文件的目錄.

總之就是這個(gè)

image.png

4. 將之前的模塊放在新建的src文件夾中

   
   
   image.png

5. webpack.config.js
   webpack必須采用commonjs的寫(xiě)法

let path=require('path')
//node.js中專門處理路徑用的
module.exports={
  entry:"./src/main.js",
  //打包的入口文件，webpack會(huì)自動(dòng)查找相關(guān)的以來(lái)進(jìn)行打包
  output:{
    filename:'bundle.js',
    //打包后的名字
    path:path.resolve('./dist')
    //解析路徑嘱腥，以當(dāng)前路徑解析一個(gè)絕對(duì)路徑
    //必須是一個(gè)絕對(duì)路徑
   //或者path=__dirname+'dist'
  }
}
//把main打包放在bundle.js然后再放到dist文件夾里

6. npm run build
7. 形成一個(gè)dist文件夾耕渴，里面有一個(gè)bundle.js文件，將commonjs文件轉(zhuǎn)換為瀏覽器能夠識(shí)別使用的js文件
8. 多入口打包齿兔，就在entry里多寫(xiě)幾個(gè)就好了橱脸，然后將file那么改為'[name].js'

babel轉(zhuǎn)譯ES6

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

1. node_modules不是我們編的础米，所以不進(jìn)行轉(zhuǎn)譯
2. -js pipei所有的js 用babel-loader進(jìn)行轉(zhuǎn)譯
3. 給webpack添加新的屬性

  module:{
    rules:[
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
    ]
  }

npm run build

5. 報(bào)錯(cuò) 反正我報(bào)了
   Cannot find module '@babel/core'
   然后我

npm un babel-core
npm install --save-dev @babel/core

6. 重新npm run build
7. 完成
8. 但是我們發(fā)現(xiàn)依然使用的let（ES6專用變量），需要再安一個(gè)插件
   讓翻譯官擁有解析ES6語(yǔ)法的功能慰技，babel/preset-es2015已經(jīng)不用了椭盏，我用了總是報(bào)錯(cuò)

npm install @babel/preset-env --save-dev

9. 新建文件.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

10.npm run build

解析樣式和圖片

寫(xiě)了這么多，大概了解了webpack解析的基本步驟

1. 下載需要的解析包
2. 再webpack配置文件中告訴它吻商，某一種文件要用哪一種方式進(jìn)行解析
   3.main.js中引入

css-loader將css解析為模塊掏颊，將解析內(nèi)容插入style標(biāo)簽內(nèi)（style-loader）

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

webpack配置文件中添加

  module:{
    rules:[
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      {test:/\.css$/,use:['style-loader','css-loader']}]}

main.js中

import './index.css'

使用的時(shí)候是從右往左的，兩個(gè)loader的順序不能改變

less,sass,stylus（css云處理語(yǔ)言艾帐，增加了變量乌叶，混合，函數(shù)柒爸，運(yùn)算等)

• less-loader less css-loader style-loader
• sass-loader
• stylus-loader
  我們用less

npm install less less-loader --save-dev

webpack配置文件中添加

  module:{
    rules:[
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      {test:/\.css$/,use:['style-loader','css-loader']},
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    ]
  }

main.js

import './style.less'

圖片解析

• file-loader
• url-loader 依賴于file-loader,所以改配置文件的時(shí)候只需要寫(xiě)url-loader即可

npm install url-loader file-loader --save-dev

webpack配置

  module:{
    rules:[
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      {test:/\.css$/,use:['style-loader','css-loader']},
      //使用的時(shí)候是從右往左的准浴，兩個(gè)loader的順序不能改變
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
      {test:/\.(jpg|png|gif)$/,use:'url-loader'}
    ]
  }

我們會(huì)發(fā)現(xiàn)buddle.js中有超級(jí)長(zhǎng)的一段，那就是圖片的解析捎稚，但是這樣會(huì)使得js太大乐横，所以我們讓bas24只在8K以下轉(zhuǎn)化，其他情況下輸出圖片

  module:{
    rules:[
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      {test:/\.css$/,use:['style-loader','css-loader']},
      //使用的時(shí)候是從右往左的今野，兩個(gè)loader的順序不能改變
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
      {test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'}
    ]
  }

引入圖片

webpack不會(huì)進(jìn)行查找葡公，所以再main.js中寫(xiě)以下代碼并沒(méi)有作用

let img=new Image()
img.src='./2.jpg'

因?yàn)榇虬胶竺嬷螅瑄rl并沒(méi)有改条霜，在dick文件夾催什，它并不存在
webpack引入圖片需要import,或者線上路徑"

import page from './2.jpg'

page就是打包后的圖片路徑

html插件解析

用一個(gè)插件，將我們自己的html為模板將打包后的結(jié)果宰睡，自動(dòng)引入到html中產(chǎn)出到dist目錄下

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

webpage的更改

let path=require('path')
let HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
  entry:"./src/main.js",
  output: {
    filename: 'bundle.js',
    path: path.resolve('./dist'),
  module:{
    rules:[
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      {test:/\.css$/,use:['style-loader','css-loader']},
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
      {test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'}
    ]
  },
  plugins:[
    [new HtmlWebpackPlugin({
      template:'./src/index.html'
    })]
]
}

1. new HtmlWebpackPlugin方法會(huì)自動(dòng)產(chǎn)生html文件并且放入disk文件夾中
2. template是我們使用的模板
3. 產(chǎn)出的名字默認(rèn)與模板相同蒲凶，如果在模板下加filename:'login.html'就可以產(chǎn)出不同名字的html
4. 模板什么也不必寫(xiě)，插件會(huì)自動(dòng)將解析的內(nèi)容放在body的最下方

webpack-dev-server

這里面內(nèi)置了服務(wù)拆内，可以幫我們啟動(dòng)一個(gè)端口號(hào)旋圆，當(dāng)代碼更新時(shí)，可以自動(dòng)打包（內(nèi)存中打包）矛纹，代碼有變化就重新執(zhí)行

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

然后在package.json中的腳本改為

  "scripts": {
    "build": "webpack",
    "dev":"webpack-dev-server"
  }

端口號(hào)默認(rèn)為8080*

npm run dev

打開(kāi)http://localhost:8080/臂聋，就是我們的網(wǎng)頁(yè)
改變之前寫(xiě)下的內(nèi)容，實(shí)時(shí)網(wǎng)頁(yè)變化

在模塊中用Vue

現(xiàn)在開(kāi)始不再html中寫(xiě)Vue了或南，我好戀戀不舍啊，但是模板中最重要的就是div艾君，通過(guò)div的id采够，綁定Vue實(shí)例

1. 安裝Vue

npm install vue

2. 引入Vue
   使用import, 在main.js中

import Vue from 'vue'

- 使用了沒(méi)有./的形式，所以是第三方模塊
- 這樣引用直接引用Vue冰垄，引用的并不是vue.js,引用的是Vue的runtime
- vue=compiler+runtime（compiler可以編譯模板）

3. 萬(wàn)能代碼

new Vue(
{
el:"#app"蹬癌，
template:'<div>hello</div>
})

4. 出問(wèn)題了
   因?yàn)橛玫氖莚untime, 無(wú)法使用template，有兩種解決辦法
   1. 使用complier，將import部分改為

import Vue from 'vue/dist/vue.js';

但是complier有6K逝薪，浪費(fèi)空間隅要，所以可以選擇使用其他的方法
2. 把模板放在render函數(shù)中

new Vue(
{
el:"#app"，
    render:function(createElement){
      return createElement('h1','hello')
    }
})

render有一個(gè)參數(shù)createElement

createElement

參數(shù)

1. 標(biāo)簽
2. 數(shù)組董济，在這個(gè)數(shù)組中步清，先是第一個(gè)標(biāo)簽內(nèi)的內(nèi)容，然后重新寫(xiě)createElement()創(chuàng)建新的內(nèi)容虏肾，由此可以推斷這個(gè)數(shù)組就是第一個(gè)標(biāo)簽包含的內(nèi)容

import Vue from 'vue/dist/vue.js';
//這樣引用直接引用Vue廓啊，引用的并不是vue.js,引用的是Vue的runtime
//vue=compiler+runtime（compiler可以編譯模板）
new Vue(
  {
    el:"#app",
    render:function(createElement){
      //返回什么創(chuàng)建什么，只有兩個(gè)參數(shù)的情況下封豪，第一個(gè)參數(shù)是標(biāo)簽谴轮，第二個(gè)是內(nèi)容，
      // 如果有三個(gè)吹埠，第三個(gè)是子組件第步，是一個(gè)數(shù)組，然后在里面重新寫(xiě)createElement()
      return createElement('h1',['hello',createElement('span','大白熊')])
    }
  })

render函數(shù)的作用是將虛擬DOM渲染成真實(shí)的dom
createElement返回的是虛擬的dom

組件

現(xiàn)在組件是.vue格式的文件

先來(lái)復(fù)習(xí)組件都有什么

1. template
2. data(){}
3. methods:{}
   4.computed:{}
   5.components:{}

.vue需要新加的幾點(diǎn)

1. 在模塊化中缘琅，想要導(dǎo)出粘都，必須要export
2. 為每個(gè)組件自己定義一個(gè)style，利用html提供的scoped可以做到

<template>
<div>
<h1>hello</h1>
</div>
</template>
<script>
  export default{
    data() {
      return
    },
    methods:{

    },
    computed:{

    },
    components:{

    },
  }
</script>
<style scoped>
  </style>

vue-loader vue-template-compiler

• vue-loader解析.vue文件
• vue-template-compiler 解析vue模板
  vue會(huì)自動(dòng)調(diào)用vue-compiler胯杭，用的時(shí)候只用vue-loader
  loader會(huì)遲到驯杜，但不會(huì)缺席

VueLoaderPlugin

Vue-loader在15.0.0之后有問(wèn)題，需要在配置文件中添加一些東西
首先做个，在module.export外添加

let VueLoaderPlugin=require('vue-loader/lib/plugin')

然后在plugins部分添加

 new VueLoaderPlugin()

渲染組件

將createElement的參數(shù)改為APP

import Vue from 'vue/dist/vue.js';
import App from './App.vue';
new Vue(
  {
    el:"#app",
    render:function(createElement){
      return createElement(App)
    }
  })