Vue 学习第五天 学习笔记
Vue ??學習第五天 ??
?
?
1. keyup事件
<div?id="app">
<input?type="text"?v-model="firstName"@keyup="getFullname">
<input?type="button"?value="+">
<input?type="text"?v-model="lastName"?@keyup="getFullname">
<input?type="button"?value="=">
<input?type="text"?v-model="fullName"?@keyup="getFullname">
</div>
<script>
var?vm?= new?Vue({
el :?'#app',
data :?{
firstName :?'',
lastName :'',
fullName :?'',
?
},
methods :?{
getFullname?(){
this.fullName?= this.firstName?+ this.lastName;
}
}
});
</script>
?
2. watch ?屬性，監聽相關數據變化，用function 實現
watch : { ///其與methods ?平級 ?監聽firstame 的變化，
firstName : function(){
//優勢，監聽非DOM 元素的變化
}
}
// ?watch :{
'$route.path' (newVal,oldVal){
//console.log(newVal +'--'+oldVal);
if(newVal == '/login'){
}else{
}
?
?
<body>
<!--watch 監聽路由，
watch 監聽非DOM 元素的變化，
-->
????<div?id="app">
<router-link?to="/login">登錄</router-link>
<router-link?to="/register">注冊</router-link>
<router-view></router-view>?<!--展示的容器-->
</div>
<script>
//1. 創建子組件，
var?login?={
template :'<h1>這個是登錄子組件，劉送杰開發的</h1>'
};
var?register?={
template :'<h1>這個是注冊子組件，劉送杰開發的</h1>'
};
//創建路由對象，然后構造路由 規則
var?router?= new?VueRouter({
routes :[ //這個是一個路由規則數組
{path :'/',redirect :?'login'},
{path :?'/login',component:login},
{path :?'/register',component:register},
],
linkActiveClass :?'myactive'?//激活相關的類
?
});
var?vm?= new?Vue({
el :?'#app',
data :?{
},
methods :?{
},
router,
watch :{
'$route.path'?(newVal,oldVal){
//console.log(newVal +'--'+oldVal);
if(newVal?== '/login'){
}else{
}
}
}
});
?
3. computed ?計算屬性，重新求值，相當于監聽這個元素或者數學的變化
computed : {
fullName : fucntion(){
?
return ?value; ?//記得返回值
}
}
?
4. 工具nrm ?的使用
1.先安裝node.js ?然后就自帶了npm工具，
2. 然后安裝 nrm。安裝指令 npm - i nrm -g ?安裝為全局可用
[npm i ?****] ?安裝某個包
npm i ??jquery ?安裝jquery包
?
3. nrm ls ?查看，ls --->> list ?查看當前鏡像，
【
nrm use npm ?切換到相關鏡像
nrm use taobao
】
nrm ?是提供了幾個下載包的切換地址，為了方便切換，
下載包還是使用npm
5. webpack ?的學習與使用
5.1 ?網頁靜態資源： JS （.js ?.jsx ?.coffee ?.ts ），CSS ( .css ?.less ??.sass -->>.scss )， Images(.jpg ?.png ?.gif ?.bmp ?.ps ?.svg ?) ?，Fonts( .svg .ttf ?.woff ?.eot ) ,模板文件( .ejs ?.jade ?.vue(這個是在webpack中定義組件的方式，推薦這么用) ??)
?
5.2 網頁中，靜態資源多了以后，會有什么問題？？
1. 網頁加載速度慢，因為要發起很多二次請求，拿html 代碼,解析完畢以后，-->>拿 js/拿CSS ,大量的請求。
2.要處理錯綜復雜的包之間的依賴關系，
?
5.3如何解決上述問題？？
1. 合并、壓縮（圖片與js、css），精靈圖（合并圖片），圖片的Base64編碼，src= ‘XXXXX’?。等于一個字符串，圖片轉成字符串，
2.可以使用之前的 requireJS ?,和 webpack ,,利用它們去解決各個包之間的復雜依賴關系，
?
5.4 什么是webpack
5.4.1 webpack ?是一個前端項目構建工具，是基于node.js 開發出來的一個工具，必須安裝node.js。
5.4.2 如何完美的結局上述問題，
1.使用Gulp。基于任務task 的，（小）
2.使用webpack。 基于整個項目進行構建的。（大）
借助于webpack這個前端自動化構建工具，可以實現資源的合并、打包、壓縮、混淆等功能。
webpack 打包工作過程
6. webpack 安裝
第一種npm ?i ?webpack ??-g ?
第二種 npm i webpack --save-dev 安裝到項目跟目錄
如何查看webpack 是否安裝成功
（1）安裝完成以后報錯，
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
?
（2）選擇指令 ?webpack-cli 還是報錯，
然后選擇新的指令 ?npm i webpack-cli -g
安裝成功， 使用webpack -v 查看到版本信息號。
?
（3）webpack .\src\main.js ?.\dist\bundle.js 報錯
?
原因是版本太高 ，我安裝的是V4.14.0, ???V3.0以下的不會報錯
解決方法：web-pack>webpack .\src\main.js --output .\dist\bundle.js
中間加一個 ?--output 指令
【
Usage without config file: webpack <entry> [<entry>] --output [-o] <output>
Notice:?--output?need to be specified explicitly
webpack ./src/index.js --output ./dist/bundle.js --mode development
Add?--output?to it will be ok.
】
7. webpack ?初步熟悉使用
1. 建立項目文件夾 （文件夾或者名稱你可以自定義，但是盡量標準化）
2.建立項目目錄，必須目錄和必須文件，然后使用項目指令
（1.） ?dist ?--存放打包文件
（2.） src ?--存放文件
（3） src 下下面建立 ?css /js/images 文件
（4） 在src 目錄下，建立必備文件目錄，index.html ?main.js
?
3.整個部署于使用過程如下。
犯錯總結：index.html 中忘記引包了src="../dist/boudle.js"，所以沒有效果。。。。
<!doctype html>
<html?lang="en">
<head>
<meta?charset="UTF-8">
<meta?name="Generator"?content="EditPlus?">
<meta?name="Author"?content="">
<meta?name="Keywords"?content="">
<meta?name="Description"?content="">
<title>組件的開發</title>
<script?src="../dist/boudle.js"></script>
</head>
<!--
1.想要控制li,需要引入Jquery
2. 倒入Jquery包，使用 npm 指令，
3.初始化一下 npm init：這個命令用于創建一個package.json。 特別要注意路徑
npm init --yes或npm init -y:從當前目錄中提取的信息生成默認的package.json。創建過程中不會提問。
?
4. npm i jquery -s 安裝Jquery(倒入)jquery
5. 到main.js 中去編輯相關代碼和指令,
6.寫好以后，明知道不會兼容，因此需要webpack 打包一下，
7.webpack .\src\main.js --output .\dist\boudle.js
8.index.html 中忘記引包了src="../dist/boudle.js"，所以沒有效果。。。。
-->
<body>
<ul>
<li>111111</li>
<li>22222</li>
<li>1333</li>
<li>1333</li>
<li>13333</li>
<li>13333</li>
<li>1333</li>
<li>14444</li>
<li>14994</li>
<li666></li>
</ul>
</body>
</html>
?
webpack 4.14.0 版本太高，無法執行相關指令，指令不熟悉，高版本切換到低版本，
直接重新安裝就行，使用 npm i webpack@3.6.0?-g ?
8. ??[webpack.config.js]學習。鑒于每次修改配置文件，沒有立即生效，需要手動重新打包，指令過程的問題，
webpack .\src\main.js --output .\dist\boudle.js
因此，設置配置文件，webpack.config.js ?簡化打包指令。
【配置如下
const?path?= require('path');
//配置入口和出口文件..這個文件其實就是一個js 文件，通過Node 中的模塊操作，向外暴露一個配置對象
module.exports?= {
//在配置文件中，手動指定入口和出口文件，
//怎么配置呢？？
entry:?path.join(__dirname,'./src/main.js') , //入口，表示要使用webpack 打包哪個文件
output:{ //出口文件
path :?path.join(__dirname,'./dist'), //指定打包好的出口文件的存放目錄，
filename :?'bundle.js'?//指定輸出文件名稱
}
}
?
】
直接使用 webpack命令 ?就行。
他主要是做了以下工作：
1.webpack
?
9.想實現webpack 自動監聽代碼修改，就自動打包。
但是需要 webpack-dev-server 這個工具，來實現自動打包編譯的功能
1.運行 npm i webpack-dev-server -D ?把這個工具安裝到項目的本地，開發依賴，
2. 安裝完畢以后，這個工具的用法，和webpack 命令的用法完全一致，
webpack ??--->>> 要使用webpack-dev-server，需要在本項目中安裝 【具備webpack 】
3. 由于是在項目中本地安裝的dev-server ，所以無法把他當作全局腳本命令在powershell 終端中運行，只有那些安裝到全局，-g 中的才能在終端執行。
需要到 package.json 中去進行相關注冊。
安裝完畢以后，想運行 npm run dev ?，但是報錯。
?
，那么怎么辦呢？
就把\node_modules 刪掉，則需要重新安裝相關包。 npm i 安裝所有包，（一旦提示有什么包沒有安裝，則安裝一下）。
npm i webpack@3.6.0 -D ?（項目具備安裝）
npm i webpack-dev-server -D （項目局部安裝）
npm ?i ?報錯
?
webpack ?webpack-dev-server ?wepack-cli ?相關版本之間的兼容性
?
【版本兼容性問題錯誤總結，耽誤半天學習】
一定不要運行npm i ?XXX ?-g(-d) 一定要指定版本，盡量低版本，也不最新版本，會導致不兼容和指令不一樣的問題。
1.安裝webpack-dev-server 報錯，說需要webpack-cli，原因，這兩個之中某一個版本太高。，重新安裝低版本
2.安裝webpack-cli ，然后還是不能使用，
3. npm WARN webpack-cli@3.0.8 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.。。說明安裝的Webpack版本太高，切換到，---》》》》》》》》》"webpack": "^3.6.0",
4.最后安裝 "webpack-cli": "^3.0.0",?【局部安裝】
5.安裝"webpack-dev-server": "^2.9.1"??【局部安裝】
6.安裝webpack【局部安裝】
報錯總結：
【1】
npm WARN webpack-cli@3.0.8 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.
【2】
npm WARN webpack-dev-middleware@3.1.3 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.1.4 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.
【3】
C:\Apache24\htdocs\example\Aproject\test\first-day\Vue-study\02-day\web-pack
> webpack-dev-server
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
參考資料：
版本不兼容https://blog.csdn.net/weixin_39495540/article/details/79740790
https://www.cnblogs.com/carrotWu/p/8665720.html
https://www.npmjs.com/package/webpack-cli
?
?
10。npm ?run dev ?執行成功，托管如下
?
?
原來引用是 <script?src="../dist/bundle.js"></script>
現在引用是<script?src="../bundle.js"></script>
實現了自動打包，編譯，并且刷新頁面。
bundle.js ?看不到，因為放置在內存，所以訪問很快。
?
11. ?webpack-dev-server的常用命令參數。ctrl +ｃ 終止服務器。
第一種方式，推薦：在{package.json 中配置}
指令學習
--open
--port
--contentBase
--hot
?
前面的npm run dev 存在缺點，還是需要，打開服務器瀏覽器，
因此重新在里面配置
"dev": "webpack-dev-server --open --port 3000 --contentBase src"
－－open 自動打開瀏覽器，--port 3000 訪問端口為3000 ， --contentBase serc 自動訪問路徑為src .
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"?
實現瀏覽器的無刷新重載。減少不必要的刷新請求。
?
?
?
12. webpack-dev-server 的第二種配置方式，以配置文件的方式運行
在{webpack.config.js} 中運行。
要配置
const?webpack?= require('webpack');
?
//配置dev-server 的第二種方式，相對來說，麻煩一些，相關參數在這里配置，要實現以下功能，實現相關屬性
// "dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",
open :?true, //自動打開瀏覽器
port :?3000, //設置自動運行的端口
contentBase :?'src', //指定托管的目錄
hot :?true?//啟用熱啟動 .最開始是不能用的，需要繼續配置，瀏覽器會報錯。這個只是第一步，
//啟用熱更新的第二步，在最前面配置。const webpack = require('webpack');
//還有第三步。
},
plugins :[ //配置插件的節點
new?webpack.HotModuleReplacementPlugin() //new 一個熱更新的模塊對象，這個啟用熱更新
]
?
13.把頁面放到內存中去，生產內存中的那個頁面
1.先安裝：npm i html-webpack-plugin -D 這個
安裝完畢以后報錯，又是以為版本太高的原因。
?
2. 導包 ,const?htmlWebpackPlugin?= require('html-webpack-plugin');
?
3.new對象
new?htmlWebpackPlugin({ //創建一個在內存中生成html 的插件。
template :?path.join(__dirname,'./src/index.html'), //指定模板頁面，將會根據指定的路徑去在內存中生成頁面
filename :?'index.html'?//生成的html 名稱 123.html 也行
}),
?
?
14.針對CSS 的包裝與打包
1.參考倒入jquery,在main.js ?中引入css ，但是報錯,因為無法解析。需要下載相關解析加載器。
?
2.下載相關包。
注意，先查版本,下載包。
cnpm i style-loader@0.18.1???css-loader@0.28.3?-D
3.在webpack.config.js 配置文件中，新增一個節點，叫做module,這個是一個對象。
在module對象中，有一個rules屬性，rules 屬性是一個數組，存放所有第三方文件的匹配和處理規則。
module :{ //這個節點用于配置所有的第三方模塊加載器。
rules :[ //所有的第三方的 匹配規則。
{test :?/\.css$/,use :['style-loader','css-loader']} //配置處理。css文件的第三方loader規則
]
}
總結： 第一步，安裝相關loader
第二步，配置處理規則
15. .loader-配置處理less文件的loader
1.倒入以后報錯，import './css/index.less' //倒入less
2.需要安裝相關的解析包，
npm i less-loader@4.0.0 -D ???先查看版本，4.0.0 還是無法工作。版本太高
npm i less-loader@2.2.3 -D
還要安裝 ?npm i less@3.0.0-alpha.2?-D 先查看版本
npm i less@2.7.2 -D
3.webpack.config.js 中配置解析規則
16. loader處理。19.loader-配置處理scss文件的loader
1. 裝loader ，雖然后綴是index.scss ?但是解析器是sass-loader
2. 查看版本， 安裝npm i sass-loader@3.2.3 -D
?
但是他需要：安裝 node-sass ?npm i node-sass@3.4.2 -D ?但是安裝不成功。用轉換成 cnpm ?才行。nrm use cnpm ,
?
4.編寫規則
?
17.
?
?
18.
?
?
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的Vue 学习第五天 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用u盘前需要格式化该怎么处理 如何格式
- 下一篇： Vue 学习 第六天学习笔记