当前位置：凯发k8官方网 > 前端技术 > vue >内容正文

vue

vue-凯发k8官方网

发布时间：2024/10/8 vue 28 豆豆

凯发k8官方网收集整理的这篇文章主要介绍了 vue-第七天学习与相关问题总结小编觉得挺不错的,现在分享给大家,帮大家做个参考.

vue 学习第七天

1.。mint ui 学习,提供了各种各样的组件。http://mint-ui.github.io/docs/#/

第一步，安装包， npm i mint-ui -s

第二步，引入，

第三步，使用

第四步，学习看凯发k8官方网官网使用步骤。

下面是关于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

span>

凯发k8官方网首页span>

9span>span>

消息span>

span>

通讯录span>

span>

设置span>

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=/pub/git

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下面生成。

参考凯发k8官方网官网资料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>

凯发k8官方网首页span>

router-link>

<router-link class="mui-tab-item mui-active" to="/home">

span>

凯发k8官方网首页span>

router-link>

<router-link class="mui-tab-item" to="/member">

span>

会员span>

router-link>

<router-link class="mui-tab-item" to="/shopcar">

0span>span>

购物车span>

router-link>

<router-link class="mui-tab-item" to="/search">

span>

搜索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.项目-完成凯发k8官方网首页中轮播图数据的加载

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.项目-完成凯发k8官方网首页中九宫格改造工程--参考mui 的九宫格

12.动画特效

13.提交到git

总结

以上是凯发k8官方网为你收集整理的vue-第七天学习与相关问题总结的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。