Vue-第七天 学习与相关问题总结
Vue 學習 第七天
?
1.。Mint UI 學習,提供了各種各樣的組件。http://mint-ui.github.io/docs/#/
第一步，安裝包， npm i mint-ui -S
第二步，引入，
第三步，使用
第四步，學習看官網使用步驟。
下面是關于Toast 的使用，
其中主要學習了模擬定時器的作用，初始化調用動畫，應對時間以后動畫消失，setTimeout()的使用，其中還有第二種形式
setTimeOut(()=>{
//作用域問題，得這樣寫，
},3000)
【
created(){
this.getList(); //組件一創建，立即獲取數據，調用getList ,跳出那個彈窗，提示正在加載數據，
//三秒過后，數據獲取回來了，就把那個移除，
},
?
?
getList?(){ //模擬獲取列表的ajax 方法
//上來就設置一個延時三秒的延時器，當列表數據獲取回來以后再消失，
this.show(); //數據獲取之前，彈出，三秒以后消失
// setTimeout(function(){
// //內部,每當獲取list 就彈出那個框，獲取到以后就消失
// this.toastInstace.close();
// },3000); //三秒之后，數據回來了，
// this.show();
setTimeout?(() =>?{
this.toastInstace.close();
},3000);
},
show() {
this.toastInstace?= Toast({ //要想訪問，就得定義
message :?'正在獲取數據', //當請求的數據獲取完畢以后才消失該動畫
duration :-1, //如果是-1 則彈出之后不消失，
position :'top',
iconClass:?'glyphicon glyphicon-star',
className :?'mytoast'?//自定義Toas 樣式
?
});
}
?
】
?
2. 按需導入 Mint-UI 的組件內容、減少項目體積，
第一步，裝包 npm i?--save?babel-plugin-transform-runtime -D
npm i babel-preset-env?babel-preset-stage-0 -D
npm i babel-loader -D
npm i babel-plugin-component -D
第二步，配置組件，。babelrc 中配置規則
["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]
?
?
//按需導入Mint-UI 的組件
import?{Button} from?'mint-ui'
//使用vue.component 注冊組件
Vue.component(Button.name,Button);
?
?
3.MUI 片段學習
MUI并不能使用npm 下載，需要手動從github上下載，解壓，手動放到項目中，
第一步，下載包
第二步，import
第三步，復制使用。
?
4.項目開發。。先整理出一個模板項目目錄。
1.分析項目的劃分，相關組件的工作原理
2.劃分區域，并且初步布局，三個div，底部tabbar實現
3.錯誤總結一下，導包的時候報錯。
使用MUI 進行項目開發的時候，無法解析字體，報錯，是因為前期視頻學習漏掉一個知識點url-loader?的學習和使用
?
解決方法：
cnpm i --save-dev url-loader
在webpack.config.js里module.rules:??【配置】--跟其他css-loader 一樣進行配置
??????{
????????test: /\.(eot|svg|ttf|woff|woff2)$/,
????????loader:"url-loader",
????????options: {
??????????name: '[name].[ext]?[hash]'
????????}
??????}
重啟?npm run dev。
4.先開發頭部，借鑒Mint組件
4.1
import?{Header} from?'mint-ui'?
import?'mint-ui/lib/style.css'?//按需倒入
//導入以后就是注冊
Vue.component(Header.name,Header);
4.2
<!--header 區域-->
<mt-header?fixed?title="黑馬程序員Vue項目學習"></mt-header>
?
?
5.開發底部，借鑒MUI ，復制過來，
5.1
//導入MUI 的樣式
import?'./lib/mui/css/mui.min.css'
5.2
<!--bottom 底部區域-->
<nav?class="mui-bar mui-bar-tab">
????????????<a?class="mui-tab-item mui-active"?href="#tabbar">
????????????????<span?class="mui-icon mui-icon-home"></span>
????????????????<span?class="mui-tab-label">首頁</span>
????????????</a>
????????????<a?class="mui-tab-item"?href="#tabbar-with-chat">
????????????????<span?class="mui-icon mui-icon-email"><span?class="mui-badge">9</span></span>
????????????????<span?class="mui-tab-label">消息</span>
????????????</a>
????????????<a?class="mui-tab-item"?href="#tabbar-with-contact">
????????????????<span?class="mui-icon mui-icon-contact"></span>
????????????????<span?class="mui-tab-label">通訊錄</span>
????????????</a>
????????????<a?class="mui-tab-item"?href="#tabbar-with-map">
????????????????<span?class="mui-icon mui-icon-gear"></span>
????????????????<span?class="mui-tab-label">設置</span>
????????????</a>
????????</nav>
?
?
5.3項目-把本地項目托管到碼云中。使用Git源代碼管理工具，GIT或者SVN
1.建立. .gitignore 這個叫做忽略文件。
2.建立 README.md
3.開源協議。license ?， MIT開源協議
4. 創建本地 倉管
1。下載Git https://pan.baidu.com/s/1kU5OCOB#list/path=%2Fpub%2Fgit
2. 安裝
3.
4.
【git ?命令使用】
【
1. git init 初始化該項目
2. git status ?查看狀態
3.git add . ?把所有的提交上去。
4.git commit --m "init my project" ?提交消息
5.
】
[碼云的使用]
【第一步 。碼云注冊，2XXXXXX4@qq.com??
地址：https://gitee.com/lXXXXX
密碼：1XXXXXX
?
?
】
【第二步。配置SSH。在GIT下面生成。
參考官網資料http://git.mydoc.io/?t=154712
$ ssh-keygen -t rsa -C "2XXXXXXX4@qq.com"?然后按三次enter
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/asus1/.ssh/id_rsa):
Created directory '/c/Users/asus1/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/asus1/.ssh/id_rsa.
Your public key has been saved in /c/Users/asus1/.ssh/id_rsa.pub.
The key fingerprint is:
SXXXXXXXXXXXXX@qq.com
The key's randomart image is:
?
】
【第三步，查看我的公鑰 --C:\Users\asus1\.ssh 只有把自己的公鑰上傳上去，才能管理自己的代碼
ssh-rsa AAAAAAAAAAAAAAAAAA@qq.com
】
【第四步。配置公鑰。必須配置才能使用】
【第五步。添加項目，配置項目。配置完以后，會獲得一些命令。
5.1
?
5.2
?
?
】
【第六步。全局設置。在cmd 命令行下，運行這兩個全局命令。
git config --global user.name "劉送杰"
git config --global user.email "252404494@qq.com"
?
】
?
6.指令 git remote add origin ?URL 。將本地項目與遠程倉庫做關聯
git push -u origin master 將代碼push 上去。
?
【回到視頻學習當中。】
第一、來到項目的目錄下，想執行以下操作
git remote add origin
https://gitee.com/liusongjie-1/Vue-study-20180708.git
fatal: remote origin already exists.
原因是前面有相關操作，建立了這個地址，
解決方法：$ git remote rm origin
第二、再添加遠程 Git 倉庫
$ git remote add origin git@github.com:FBing/java-code-generator（這個是地址）做遠程關聯。
第三、刷新剛才的項目目錄。
https://gitee.com/liusongjie-1/Vue-study-20180708，就會看到新的內容。
第四、push 上去。
?
?
7。將修改的代碼進行提交。
##用傳統的方式上傳到碼云
1.?git add .
2.?git commit -m "XX" 給一個提交信息
3.?git push
?
##vscode 的方式。可視化工具進行，
?
?
8.底部實現
8.1 自作底部路由切換功能區域
2.制作底部Tabbar 區域，使用MUI的Tabbar.html
[在制作購物車操作的時候，首先借鑒MUI的相關做法，找圖標，然后引用，報錯是因為相關的CSS和tff沒有引入]
[制作購物車圖標時，先把擴展圖標的css 樣式拷貝進去，然后拷貝擴展字體庫文件，保障項目正常運行，]
[mui-icon mui-icon-extra mui-icon-extra-cart]
?
8.2底部路由設置。
1.導包，//1.1導入路由的包， --底部路由學習
import?VueRouter?from?'vue-router'
//1.2安裝路由模塊，--底部路由學習
Vue.use(VueRouter);
2.引入自定義路由組件和掛載，
//1.3導入自己定義的路由模塊router.js--底部路由學習
import?router?from?'./router.js'
//1.4 掛載路由對象 ----底部路由學習
router
vscode ?批量替換快捷鍵：CTRL + D，然后換掉，
3.改造路由鏈接
<router-link?class="mui-tab-item mui-active"?href="#tabbar">
????????????????<span?class="mui-icon mui-icon-home"></span>
????????????????<span?class="mui-tab-label">首頁</span>
????????????</router-link>
?
?
<nav?class="mui-bar mui-bar-tab">
????????????<router-link?class="mui-tab-item mui-active"?to="/home">
????????????????<span?class="mui-icon mui-icon-home"></span>
????????????????<span?class="mui-tab-label">首頁</span>
????????????</router-link>
????????????<router-link?class="mui-tab-item"?to="/member">
????????????????<span?class="mui-icon mui-icon-contact"></span>
????????????????<span?class="mui-tab-label">會員</span>
????????????</router-link>
????????????<router-link?class="mui-tab-item"?to="/shopcar">
????????????????<span?class="mui-icon mui-icon-extra mui-icon-extra-cart"><span?class="mui-badge">0</span></span>
????????????????<span?class="mui-tab-label">購物車</span>
????????????</router-link>
????????????<router-link?class="mui-tab-item"?to="/search">
????????????????<span?class="mui-icon mui-icon-search"></span>
????????????????<span?class="mui-tab-label">搜索</span>
????????????</router-link>
????????</nav>
?
改造完成以后效果圖：http://localhost:3000/#/shopcar
?
4.選中路由高亮設置。
在router.js ?中設置
linkActiveClass :?' mui-active'?//覆蓋默認路由，實現選中以后高亮，
?
5.創建路由組件
先創建文件夾，在建立相關vue ,然后掛載到routes 中，我的失敗了，
失敗一、文件夾建立不合理，不全面。
??---》》》
失敗二、沒有生效。可能是忘記放坑了。經過驗證，果真如此。
?
?
9.輪播圖實現。借鑒Mint -UI
9.1 按需導入組件。import?{Header,Swipe, SwipeItem} from?'mint-ui'?
?
9.2
//注冊
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
?
9.3
【設置背景報錯
第一、<style?lang="scss"?scoped>
.mint-swipe{
height:?200px;
.mint-swipe-items-wrap{
background-color:red;
}
}
</style>
Can't resolve 'scss-loader'
解決方法：改成 lang=”sass”?不報錯，但是沒有效果
】
一直無法解決的問題解決了。關于無法加載sass 模塊問題。是配置文件不對。
?
?
10.項目-完成首頁中輪播圖數據的加載
1.安裝數據加載 cnpm i vue-resource -S
2.//2.1 導入 vue-resource
import?VueResource?from?'vue-resource'
//2.2 安裝vue-resource
vue.use(VueResource);
?
3. ?發送數據請求，一進來就需要，那么就是掛載在created函數中
export?default?{
data(){
return?{};
},
created(){
this.getLunbotu();
},
methods:{
getLunbotu?(){ //獲取輪播圖數據的方法。
this.$http.get("http://vue.study.io/api/getlunbo").then(result?=>{
console.log(result.body);
})
?
}
}
}
?
4.將數據保存到data 當中，對獲取的異常也要處理好。
5.在組件區域實現，v-for 綁定到item 中，
6.對展示的異常沒想過寬高要處理一下。
?
?
11.項目-完成首頁中九宮格改造工程--參考MUI 的九宮格
1.
?
?
12.動畫特效
?
13.提交到git
?
總結
以上是生活随笔為你收集整理的Vue-第七天 学习与相关问题总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： u盘怎么进入隐藏文件 如何查看U盘中的隐
- 下一篇： 买免漆板有哪些牌子可以选？大家熟悉不？