您的位置：首页 > Web前端 > Vue.js

Vue-第七天学习与相关问题总结

2018-07-09 19:26 253 查看

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.1import {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"> 首页 </a> <a class="mui-tab-item" href="#tabbar-with-chat"> 9 消息 </a> <a class="mui-tab-item" href="#tabbar-with-contact"> 通讯录 </a> <a class="mui-tab-item" href="#tabbar-with-map"> 设置 </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. 安装

【git 命令使用】

【

1. git init 初始化该项目

2. git status 查看状态

3.git add . 把所有的提交上去。

4.git commit --m "init my project" 提交消息

】

[码云的使用]

【第一步。码云注册，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"> 首页 </router-link>

改造完成以后效果图：http://localhost:3000/#/shopcar

4.选中路由高亮设置。

在router.js 中设置linkActiveClass : ' mui-active' //覆盖默认路由，实现选中以后高亮，

5.创建路由组件

先创建文件夹，在建立相关vue ,然后挂载到routes 中，我的失败了，

失败一、文件夹建立不合理，不全面。

---》》》

失败二、没有生效。可能是忘记放坑了。经过验证，果真如此。

9.轮播图实现。借鉴Mint -UI9.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 -S2.//2.1 导入 vue-resourceimport VueResource from 'vue-resource'//2.2 安装vue-resourcevue.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 的九宫格

12.动画特效

13.提交到git

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Vue-第七天 学习与相关问题总结

Vue-第七天学习与相关问题总结