Vue 學習 第六天學習筆記
Vue 學習 第六天學習筆記
1.webpack 使用複習
第一步：先建立資料夾。
第二步，用webpack將其初始化，建立管理。npm 的包管理工具管理起來，
npm init -y .注意{檢視自己敲命令時所在的目錄，是不是這個工作目錄}
第三步，建立資料夾和初始化檔案
dist
src ( css js , images , index.html , main.js ).然後在裡面寫入一下測試內容
第四步，進行打包 webpack .\src\main.js .\dist\bundle.js
第五步，以為手動打包麻煩，因此需要進行相關配置，webpack-dev-server
那麼就需要安裝相關的包。【注意版本】
npm i [email protected] -D
但是需要本地安裝webpack
第六步。建立一個配置檔案，webpack.config.js
第七步，專案本地安裝wepack. npm i [email protected] -D
第八步，配置相關檔案，
var path = require(‘path’);
module.exports = {
entry : path.join(__dirname,’./src/main.js’), //入口檔案
output : //出口檔案
{
path: path.join(__dirname,’./dist’),
filename: ‘bundle.js’
}
}
第九步：配置html-webpack-plugin 記憶體頁面
2. 樣式引入處理
2.1先編寫樣式檔案，
3.bable 學習
1.新增包
2. 新增規則
3. 在專案根目錄下，加一個.babelrc 的babel 配置檔案
//在webpack 中，只能處理一部分的ES6 語法，有些處理不了，需要藉助第三方 loader,b幫助webpack來處理
//第三方loader 將高階語言轉換成地級語法，交給webpack 去處理，
//通過Babel ，可以將高階語法轉換成地級語法來處理，
//1.在webpack 中，可以執行如下兩套命令，安裝兩套包去實現Babel 的相關loader 功能，
//第一套，npm i babel-core babel-loader babel-plugin-transform-runtime
-D 起到轉換工具的作用
//第二套，npm i babel-preset-env babel-preset-stage-0 -D 起到語法解析的作用
//2. 在webpack,config.js 配置檔案中，在module 節點下的rules 陣列中，新增一個新的匹配規則，
//2.1 {test :/.js$/,use :'babel-loader',exclude:/node_modules/ } //exclude排除,意思就是/node_modules 中的不處理
//2.2.1· 如果不排除node_modules 中的相關檔案，會把裡面所有的檔案都打包編譯，會非常慢
//2.2.2 就算轉換了，也無法正常執行，
//3. 在專案根目錄下面建立一個.babelrc 的配置檔案，是json 格式，因此.babelrc 中必須符合json 語法規則。不能寫註釋，字串
//必須是雙引號包裹，
//3.1 在.babelrc 寫如下配置：
/*
{
"presets" :["env","stage-0"],
"plugins" :["transform-runtime"]
}
*/
npm install --save babel-loader babel-core babel-preset-env webpack
npm i--save babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D
4. render函式
<body>
<divid="app">
<!--Vue 例項控制的元素，-->
<h1>123</h1>
</div>
<script>
//第一步
varlogin ={
template :'<h1>這個是一個元件，通過render實現</h1>'
}
varvm = newVue({
el :'#app',
data :{
},
methods:{
},
//第二步，
render :function(createElements){ //createElements 是一個方法，呼叫他進行渲染,渲染為html結構，
returncreateElements(login);
//retrun 的結果會替換頁面中指定的容器 ，比如app，並且把其內部的內容也替換掉,好像v-text功能
}
})
5. vue 結合Webpack使用，
1.從前面複製一個完整的VUE含有很多包的專案過來
2.安裝vue npm i [email protected] -S //安裝為專案依賴 npm i [email protected] -S
3.login.vue 的解析和使用
安裝 npm i vue-loader vue-template-compiler -D
"vue-loader": "^10.2.4",
"vue-template-compiler": "^2.5.16",
[
]
//在配置檔案中新增配置項。
{test : /\.vue$/, use : ‘vue-loader’}
錯誤總結：
1.問題。ERROR in ./src/login.vue
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
@ ./src/main.js 22:0-31
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/main.js
2. 分析. Vue-loader在15.*之後的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,
3.降低版本 [email protected]
總結： 梳理哦
webpack中如何使用vue
第一步，安裝vue 的包，npm i vue -S
第二步，由於在webpack中，推薦使用 .vue 這種模板元件定義元件，因此需要安裝能解析編譯這種檔案的loader ，npm i vue-loader vue-template-compiler -D 注意版本
第三步，在main.js 中倒入vue模組，import Vue from ‘vue’
第四步，定義一個.vue結尾的元件， 元件主要包含三個部分,template script style
第五步，匯入該元件 import login from ‘’
第六步，建立vm 例項，var vm = new Vue({
el : ‘app’,
render : c => c(login),
})
第七步，在頁面中建立id=app 的元素，然後作為vm 的控制區域，
6. Vue 檔案中定義資料和使用方法，--
使用 ES 6 規範或者node規範，成套使用。
1.//Es 6 中也通過規範，定義了匯入、匯出模組
//倒入 import XXX from '' import 模組名稱 from '識別符號'
//在ES 6 中，使用 export default 和export 向外暴露成員，
//在node 中，使用 var 名稱 = requires('模組識別符號'); 匯入
// 使用mudule.exports = {} exports 向外暴露。
暴露：
使用export default { //物件。
}
//第一，暴露形式
//Es 6 中也通過規範，定義了匯入、匯出模組
//倒入 import XXX from '' import 模組名稱 from '識別符號'
//在ES 6 中，使用 export default 和export 向外暴露成員，
//在node 中，使用 var 名稱 = requires('模組識別符號'); 匯入
// 使用mudule.exports = {} exports 向外暴露。
//第二。暴露形式
//node 中向外暴露成員的形式，
// export default{
// name : 'zhangsan',
// age : 20 ,
// sex :'男'
// }
//第二種形式，
varinfo ={
name :'zhangsan',
age :20 ,
sex :'男'
}
exportdefaultinfo
// export default {
// address :'北京'
// }
//在一個模組中，export default 只能向外暴露一次，
//第三，暴露的不同方法，
exportvartitle ='小星星'
//在一個模組中，可以同時使用export default 和 export
//使用export 這種形式，只能使用{} 來使用，叫做 【按需匯出】
//export default 智慧暴露一個，export 可以暴露多個，
//然後根據import 按需倒入匯出，
//嚴格使用 {} 來接收
//使用export 匯出的成員，在import 中可以使用as 來其別名，
//第四，就是import 那邊的接收形式。
exportvarsb ='lsj'
exportvarwiner = 'lsj+1'
使用：接收
//接收
importm122 ,{titleastitle123,sb,winer} from'./test.js'
console.log(m122);
console.log(title123);
console.log(sb);
console.log(winer);
7. webpack 在vue 中使用路由router
第一步，安裝vue-router .。npm i [email protected] -D
第二步，手動安裝 importVueRouterfrom'vue-router'
第三步,建立建立 Vue.use(VueRouter);
importVuefrom'vue'
// ，第一步裝包，
importVueRouterfrom'vue-router'//第二步，引入相關Vue包檔案
Vue.use(VueRouter) //第三步，建立Vue與vueRouter 之間的關係，手動的安裝，如果是引入script 則不需要，
//重要的一部沒有來
importappfrom'./App.vue'
//第四步，引入相關的元件
importAccountfrom'./main/Account.vue'
importGoodlistsfrom'./main/GoodList.vue'
//第五步，建立路由物件
varrouterObj = newVueRouter({
routes :[
// accounts goodlists
{path :'/account' ,component:Account},
{path :'/goodlist',component :Goodlists}
]
});
//第六步，掛載到App.vue 中，不然放哪呢？
varvm = newVue({
el :'#app',
render :c=>c(app), //render把所有東西都佔據和清空了，所以沒有顯示，
//所以不要把router-link 和router-view 的內容放在這裡，
router :routerObj//第四步，掛載到vm 上
});
[
/*
webpack 中如何使用Vue ，
1.安裝包 ，npm i vue -S
2.由於在webpack 中，需要安裝能解析這種檔案的loader，npm i vue-loader vue-template-compiler -D
3. 在main.js 中倒入模組，import Vue from 'vue'
4. 定義一個以.vue 結尾的元件
5. 引入該元件 import VueRouter from 'App.vue'
6..建立 vm 例項， var vm= new Vue({
el : '#app'
render : c=> c(app)
})
7.在頁面中建立id= app 的元素，作為控制區域，
*/
]
8. 建立子路由，路由巢狀，
varrouterObj = newVueRouter({
routes :[
// accounts goodlists
{path :'/account' ,
component:Account,
children :[
{path :'login',component :login},
{path :'register',component :register}
]
},
{path :'/goodlist',
component :Goodlists,
}
]
});
9. scoped lang 屬性，為style指定自己內部私有的css 樣式，
lang= “scss” scoped
10.
11.
12.
相關推薦
Vue 學習 第六天學習筆記
Vue 學習 第六天學習筆記 1.webpack 使用複習第一步：先建立資料夾。第二步，用webpack將其初始化，建立管理。npm 的包管理工具管理起來，npm init -y .注意{檢視自己敲命令時所在的目錄，是不是這個工作目錄}第三步，建立資料夾和初始化檔案dis
學習html5的第六天課堂筆記
回顧總結 1.字型規則 1）color 2）cursor 3）font-family 1. 常規字型 2. 常用字型 3. 字型棧 4. webfont 5. 字型圖示（第一個框架） fon
python基礎學習第六天
py 學習 6.1內置函數 6.1.1 filter函數 6.1.2 map函數 6.1.3 reduce函數 6.1.1：filter (函數名字, 序列) 過濾器對象 filter()函數是 Python 內置的另一個有用的高階函數，filter()函數接收一個函數 f
linux系統學習第六天
linux管理員技術 linux工程師技術 linux雲計算 深圳雲計算王森 雲計算運維工程師 配置server的Yum倉庫 [root@server0 ~]# rm -rf /etc/yum.repos.d/* [root@server0 ~]# vim /etc/yum.repos.d
python第六天學習總結
學習總結 繼承 self. 自己的 .... fun lse pre nic 1.遞歸函數：自己調用自己count = 0def func():global countcount += 1print(count)func() func() #默認遞歸深度998，可通過s
pyhon學習第六天 代碼塊,小數據池(緩存機制,駐留機制),is == id =,字符編碼
以及 復制代碼 賦值 查看 他會 數字 tool 優化 itl 1.代碼塊 能夠實現某項功能的:模塊,函數,類,文件 ##在python的交互模式下,一行代碼就是一個代碼塊分別儲存在不同文件中 2. id is ==和= =是賦值 ==比較兩邊數據內容是
python學習第六天
ima 作業 17. img src pre 分享圖片 http 第六天 作業博客: python學習第六天
機器學習 | 吳恩達機器學習第六週學習筆記
課程視訊連結 第六週PPT 下載密碼:zgkq 本週主要講解了如何設計機器學習系統和如何改進機器學習系統，包括一些模型選擇的方法，模型效能的評價指標，模型改進的方法等。 目錄 一、應用機器學習建議 1.決定下一步做什麼 2.評估假設函式 3.模型選擇和訓練、驗
linuxC學習第六天
今天對於一個關於如何查詢1-N-1共N個數據的陣列中重複的資料進行了深入的瞭解和探討 以下是程式程式碼: 一、冒泡排列 #include <stdio.h> #define SIZE 10 void swap(int a[],int n) { int i, j
2018-11-21 python學習第六天
結合 break ESS erro 其他 字典 dig strong 。。 l=[‘a‘,‘b‘,‘c‘] print(len(l)) #顯示三個字符 i=0 while i<len(l): print(l[i]) i+=1 l=[‘a‘,‘b‘,‘c‘] for
python學習第六天：python基礎（條件判斷、迴圈）
條件判斷 格式 if <條件判斷1>: <執行1> elif <條件判斷2>: <執行2> elif <條件判斷3>: <執行3> else: <執行4&g
python學習第六天：python基礎（dict、set）
dict dict的支援，dict全稱dictionary，在其他語言中也稱為map，使用鍵-值（key-value）儲存，具有極快的查詢速度 建立&取值 為什麼dict查詢速度這麼快？ 因為dict的實現原理和查字典是
python自動化運維學習第六天--函式
函式 函式是完成特定功能的一個語句組，這組語句可以作為一個單位使用。 可以通過函式名在程式中不同地方多次執行（函式呼叫） 分為預定義函式和自定義函式 預定於函式可以直接使用 自定義函式需要自己編寫後才能使用 使用函式是為了提高應用的模組性和程式碼重用率 函式的定義和呼叫 def 函式名(
國嵌視訊學習第六天——多執行緒
執行緒 優點 使用多執行緒的理由之一是： 和程序相比，它是一種非常“節儉”的多工操作方式。在Linux系統下，啟動一個新的程序必須分配給它獨立的地址空間，建立眾多的資料表來維護它的程式碼段、堆疊段和資料段，這是一種“昂貴”的多工工作方式 運行於一個程序中的多個執行緒，它們之間使用相同的地址空間，而且執行緒
linux學習第六天
> +檔案 =cat /dev/null > +檔案 可以將檔案清空ctrl +d 退出登入chattr +i /etc/passwd 鎖定系統檔案（鎖定後root賬戶也不能修改，除非先解鎖，解鎖-i）tree 顯示目錄結構 -L 層數；-d
C#學習第六天
C#中陣列：（陣列長度為0並不代表陣列為null） c#中的陣列初始化（賦值）方式有2種。動態初始化、靜態初始化。 動態初始化：指定長度，元素初始值由編譯器指定（0 false null）。 例如：int[] arrint = new int[10];指定陣列有10個元素
ReactNative學習第六天 專案底部TabBar和Icon自定義庫
昨天我們學了 專案Header+頂部滑動切換 今天剛開始的時候看到了一個庫:react-native-vector-icons 自定義向量圖。我研究了一上午,但整體流程還跑不通,無奈先暫時放著,等
Linux 學習第六天
等號 字符 等等 數字運算 .com 例如 linu 而且 操作 一、VIM 1、VIM編輯器 1.1、VIM工作模式 1.1.1、命令模式：復制、剪切、粘貼、搜索等等 1.1.2、輸入模式：隨意對文件進行內容編輯 1.1.3、末行模式（：）：保存退出，編輯環境設
第六天學習
方法 pre tro 額外 長度 ring 字符串拼接 學習 .get java哈希表 註意創建哈希表時候的鍵值的數據類型，在取值和插入的時候也要用相同的數據類型，不然會操作失敗 HashMap <String,Integer> map =new HashMap
JavaScript基礎學習第六天
目標： 能夠使用物件的方式處理資料 ☞ 程式碼預解析： 1. 變數提升 ：當程式中遇到定義變數後，就會將該變數的定義提升到當前作用域的開始位置，不包括變數的賦值 2. 函式提升：當程式中遇到函式的宣告時，那麼會將函式的宣告提升到當前作用域的開始位置，不包括函式的呼叫 &nbs