這一部分聽(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)文件
下載與配置
- 下載
npm init -y
npm install webpack --save-dev
安裝webpack最好不要安裝全局讳侨,否則可能導(dǎo)致webpack的版本差異
- 新建一個(gè)文件webpack.config.js
- 在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è)
-
將之前的模塊放在新建的src文件夾中
image.png 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文件夾里
- npm run build
- 形成一個(gè)dist文件夾耕渴,里面有一個(gè)bundle.js文件,將commonjs文件轉(zhuǎn)換為瀏覽器能夠識(shí)別使用的js文件
- 多入口打包齿兔,就在entry里多寫(xiě)幾個(gè)就好了橱脸,然后將file那么改為'[name].js'
babel轉(zhuǎn)譯ES6
npm install babel-core babel-loader --save-dev
- node_modules不是我們編的础米,所以不進(jìn)行轉(zhuǎn)譯
- -js pipei所有的js 用babel-loader進(jìn)行轉(zhuǎn)譯
- 給webpack添加新的屬性
module:{
rules:[
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
]
}
npm run build
- 報(bào)錯(cuò) 反正我報(bào)了
Cannot find module '@babel/core'
然后我
npm un babel-core
npm install --save-dev @babel/core
- 重新npm run build
- 完成
- 但是我們發(fā)現(xiàn)依然使用的let(ES6專用變量),需要再安一個(gè)插件
讓翻譯官擁有解析ES6語(yǔ)法的功能慰技,babel/preset-es2015已經(jīng)不用了椭盏,我用了總是報(bào)錯(cuò)
npm install @babel/preset-env --save-dev
- 新建文件.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
10.npm run build
解析樣式和圖片
寫(xiě)了這么多,大概了解了webpack解析的基本步驟
- 下載需要的解析包
- 再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í)例
- 安裝Vue
npm install vue
- 引入Vue
使用import, 在main.js中
import Vue from 'vue'
- 使用了沒(méi)有./的形式,所以是第三方模塊
- 這樣引用直接引用Vue冰垄,引用的并不是vue.js,引用的是Vue的runtime
- vue=compiler+runtime(compiler可以編譯模板)
- 萬(wàn)能代碼
new Vue(
{
el:"#app"蹬癌,
template:'<div>hello</div>
})
- 出問(wèn)題了
因?yàn)橛玫氖莚untime, 無(wú)法使用template,有兩種解決辦法- 使用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ù)
- 標(biāo)簽
- 數(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í)組件都有什么
- template
- data(){}
- methods:{}
4.computed:{}
5.components:{}
.vue需要新加的幾點(diǎn)
- 在模塊化中缘琅,想要導(dǎo)出粘都,必須要export
- 為每個(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)
}
})