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 上去。

?

【回到視頻學習當中?！?/span>

第一、來到項目的目錄下，想執行以下操作

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 的方式?？梢暬ぞ哌M行，

?

?

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 中，我的失敗了，

失敗一、文件夾建立不合理，不全面。

??---》》》

失敗二、沒有生效?？赡苁峭浄趴恿恕?span style="color:rgb(255,0,0);">經過驗證，果真如此。

?

?

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-第七天 学习与相关问题总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。