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

<mt-header fixed title="黑马程序员Vue项目学习">mt-header>

 

 

5.开发底部，借鉴MUI ，复制过来，

5.1

//导入MUI 的样式

import './lib/mui/css/mui.min.css'

5.2

<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">9span>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.

】

[码云的使用]

【第一步 。码云注册，[email protected]  

地址：https://gitee.com/lXXXXX

密码：1XXXXXX

 

 

】

【第二步。配置SSH。在GIT下面生成。

参考官网资料http://git.mydoc.io/?t=154712

$ ssh-keygen -t rsa -C "[email protected]" 然后按三次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:

[email protected]

The key's randomart image is:

 

】

【第三步，查看我的公钥 --C:\Users\asus1\.ssh 只有把自己的公钥上传上去，才能管理自己的代码

ssh-rsa [email protected]

】

【第四步。配置公钥。必须配置才能使用】

【第五步。添加项目，配置项目。配置完以后，会获得一些命令。

5.1

 

5.2

 

 

】

【第六步。全局设置。在cmd 命令行下，运行这两个全局命令。

git config --global user.name "刘送杰"

git config --global user.email "[email protected]"

 

】

 

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 [email protected]: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">0span>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