Vue學(xué)習(xí)記錄第六天

這一部分聽(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的版本差異

  1. 新建一個(gè)文件webpack.config.js
  2. 在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
  1. 將之前的模塊放在新建的src文件夾中


    image.png
  2. 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文件夾里
  1. npm run build
  2. 形成一個(gè)dist文件夾耕渴,里面有一個(gè)bundle.js文件,將commonjs文件轉(zhuǎn)換為瀏覽器能夠識(shí)別使用的js文件
  3. 多入口打包齿兔,就在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
  1. 報(bào)錯(cuò) 反正我報(bào)了
    Cannot find module '@babel/core'
    然后我
npm un babel-core
npm install --save-dev @babel/core
  1. 重新npm run build
  2. 完成
  3. 但是我們發(fā)現(xiàn)依然使用的let(ES6專用變量),需要再安一個(gè)插件
    讓翻譯官擁有解析ES6語(yǔ)法的功能慰技,babel/preset-es2015已經(jīng)不用了椭盏,我用了總是報(bào)錯(cuò)
npm install @babel/preset-env --save-dev
  1. 新建文件.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
  1. 引入Vue
    使用import, 在main.js中
import Vue from 'vue'

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

  1. 萬(wàn)能代碼
new Vue(
{
el:"#app"蹬癌,
template:'<div>hello</div>
})
  1. 出問(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)
    }
  })
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鸽心,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子居暖,更是在濱河造成了極大的恐慌顽频,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件太闺,死亡現(xiàn)場(chǎng)離奇詭異糯景,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)省骂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門蟀淮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人钞澳,你說(shuō)我怎么就攤上這事怠惶。” “怎么了轧粟?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵策治,是天一觀的道長(zhǎng)脓魏。 經(jīng)常有香客問(wèn)我,道長(zhǎng)通惫,這世上最難降的妖魔是什么茂翔? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮履腋,結(jié)果婚禮上珊燎,老公的妹妹穿的比我還像新娘。我一直安慰自己府树,他們只是感情好俐末,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著奄侠,像睡著了一般卓箫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上垄潮,一...
    開(kāi)封第一講書(shū)人閱讀 52,821評(píng)論 1 314
  • 那天烹卒,我揣著相機(jī)與錄音,去河邊找鬼弯洗。 笑死旅急,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的牡整。 我是一名探鬼主播藐吮,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼逃贝!你這毒婦竟也來(lái)了谣辞?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤沐扳,失蹤者是張志新(化名)和其女友劉穎泥从,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體沪摄,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡躯嫉,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了杨拐。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片祈餐。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖哄陶,靈堂內(nèi)的尸體忽然破棺而出昼弟,到底是詐尸還是另有隱情,我是刑警寧澤奕筐,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布舱痘,位于F島的核電站,受9級(jí)特大地震影響离赫,放射性物質(zhì)發(fā)生泄漏芭逝。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一渊胸、第九天 我趴在偏房一處隱蔽的房頂上張望旬盯。 院中可真熱鬧,春花似錦翎猛、人聲如沸胖翰。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)萨咳。三九已至,卻和暖如春疫稿,著一層夾襖步出監(jiān)牢的瞬間培他,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工遗座, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留舀凛,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓途蒋,卻偏偏與公主長(zhǎng)得像猛遍,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子号坡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容