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 webpack-dev-server@2.9.1 -D
但是需要本地安裝webpack
?
第六步。建立一個配置文件，webpack.config.js
第七步，項目本地安裝wepack. npm i webpack@3.6.0?-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先編寫樣式文件，
2.2 倒入相關包 npm i style-loader@0.18.1?-D ??npm i css-loader@0.28.3?-D?
?
?
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>
????
????<div?id="app">?
<!--Vue 實例控制的元素，-->
<h1>123</h1>
????</div>
????<script>
//第一步
????????var?login?={
template :?'<h1>這個是一個組件，通過render實現</h1>'
}
????????var?vm?= new?Vue({
????????????el :?'#app',
????????????data :{
????????????????????????
????????????},
????????????methods:{
?
},
//第二步，
render?:function(createElements){ //createElements 是一個方法，調用他進行渲染,渲染為html結構，
return?createElements(login);
//retrun 的結果會替換頁面中指定的容器 ，比如app，并且把其內部的內容也替換掉,好像v-text功能
}
????????})
?
5. vue 結合Webpack使用，
1.從前面復制一個完整的VUE含有很多包的項目過來
2.安裝vue ?npm i vue@2.5.2 -S ?//安裝為項目依賴 npm i vue@2.5.2 ?-S
3.login.vue 的解析和使用 ?
安裝 npm i vue-loader vue-template-compiler -D
"vue-loader": "^10.2.4",
"vue-template-compiler": "^2.5.16",
[
vue-template-compiler@2.5.16
+ vue-loader@10.2.4
]
//在配置文件中新增配置項。
{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.降低版本 ?vue-loader@10.2.4
?總結： 梳理哦
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 :'男'
// }
//第二種形式，
var?info?={
name :?'zhangsan',
age :?20?,
sex :'男'
?
}
?
export?default?info
?
// export default {
// address :'北京'
// }
//在一個模塊中，export default 只能向外暴露一次，
//第三，暴露的不同方法，
export?var?title?='小星星'
//在一個模塊中，可以同時使用export default 和 export
//使用export 這種形式，只能使用{} 來使用，叫做 【按需導出】
//export default 智能暴露一個，export 可以暴露多個，
//然后根據import 按需倒入導出，
//嚴格使用 {} 來接收
//使用export 導出的成員，在import 中可以使用as 來其別名，
//第四，就是import 那邊的接收形式。
export?var?sb?='lsj'
export?var?winer?= 'lsj+1'
?
使用：接收
//接收
import?m122?,{title?as?title123,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 vue-router@2.4.0 -D
第二步，手動安裝 import?VueRouter?from?'vue-router'
第三步,建立建立 Vue.use(VueRouter);
import?Vue?from?'vue'
// ，第一步裝包，
import?VueRouter?from?'vue-router'?//第二步，引入相關Vue包文件
Vue.use(VueRouter) //第三步，建立Vue與vueRouter 之間的關系，手動的安裝，如果是引入script 則不需要，
//重要的一部沒有來
import?app?from?'./App.vue'
//第四步，引入相關的組件
import?Account?from?'./main/Account.vue'
import?Goodlists?from?'./main/GoodList.vue'
?
//第五步，創建路由對象
var?routerObj?= new?VueRouter({
routes :[
// accounts goodlists
{path :'/account'?,component:?Account},
{path :'/goodlist',component :?Goodlists}
]
});
//第六步，掛載到App.vue 中，不然放哪呢？
?
var?vm?= new?Vue({
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. 創建子路由，路由嵌套，
var?routerObj?= new?VueRouter({
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 学习 第六天学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎么卸掉原来显卡驱动 “卸载旧显卡驱动方
- 下一篇： ie停止工作怎么办 IE故障排除：解决I