2019-10-1 Vue项目开始

今天的主要内容：接触mui  mint-ui  还有一个vue-resourse

 

npm i  

把所有依赖包都装上

 

要知道webpack搭建的项目目录

要知道如何获取代码段，从

MUI Mint-UI  加到自己Vue项目中

 

项目环境搭建好了，然后公共的部分也做了一些

然后呢！如何管理我们的代码

然后在这个项目中好像是要放到码云中去的

 

如何使用

1.我们创建一个项目忽略文件直接.gitignore

像node_modules这个文件不需要上传到git的

.idea  这个是webstorm的

 

 

 2.readme.md 文件

项目的一些详细信息的

3.开源项目添加LICENSE文件

什么是开源软件？
　　开源软件是所有人都可以修改和补充的软件，因为开源软件的 license 协议允许这样做。
　　Git版本控制系统就是开源的软件。
　　实际上开源软件的一个重要组成部分就是添加 license 文本文件， license 告诉我们如何使用我们编写的代码。

 

4.然后创建本地的git仓库   git init

要在项目的文件目录下  git init  然后就会有一个隐藏的文件 .git  出现

命令：git  status  所有文件的状态

这个应该是添加到仓库  git add .      这后面有个点的啊  别看不见

然后就提交了  git commit -m "init my project"

以上只是提交到本地的而已

然后要上传到服务器：这里用的是码云；

然后也要在本地配置公钥，放到码云中

 

在码云中创建一个空仓储，然后把本地的

仓库上传到这里来

创建完之后得到这个

 

 将项目添加到码云中

 

 这个码云加gitee，和github一样的吧。

界面都是一样的

 

使用Vs code 默认集成的git工具快速提交代码

如果修改过文件，在git status  查看状态就会看到modefied 

文件已被修改

 

 只要我们修改删除，Vs code 都会有记录的

 

 这个工具好像是vs code 本来就有的   不是我们装的插件

提交代码的可视化工具  不用我们在输入命令行的模式

 

扩展图表的样式也要导入

也要清楚的知道如何去找到关联的文件样式

 

 

router-link 有默认的高亮，但是它只设置了本来的一个，

不像我们导入的mui底栏，已经是设置好了的的跳转active高亮

 

创建一个component组件文件

Mint-UI  轮播图 

Mint-UI 的按需导入的规则是这个吗

 

没有默认的高度吗这swipe  你这样会害死人了

还是因为，我们直接引用没有图片

我们要回找原因，找标签，找元素，看是否加载进来

之类的

 

 这个是css3新增的选择器吧

 

 

 这个又是啥，sacc

 

完成首页中轮播图的数据加载

1.获取数据，使用vue-resourse 

 

 我要发送请求

加载数据这个地方有点像小程序的接口

就是啊，一模一样。 然后要知道Vue中是怎么使用这个接口的

使用数据的，要bind的才能使用vue提供的数据

要分析请求过来的数据，知道数据在哪里在哪里 格式

 

又用sacc写样式

丢  我又不会  哈哈哈

 

 

完成组件切换时候的动画效果

1.发现问题：滑动导航底部会跑掉，还有

滑动过来的页面不正，还要滚动条

overflow-x：hidden；  这是隐藏x轴的滚动条，不能是overflow-y：hidden；

这样y轴会别隐藏就不能实现下滑了

 

实现左消失，左进入。

 

 

 

 

 

 

 

今天视频结束

 

 

vuex最后一天也就是十一天会讲到

vuex：https://blog.csdn.net/weixin_44811417/article/details/90766421

 

 

下午敲的代码

1.项目目录已经搭建好了
2.首先是Vue.js的基础语法
3.用webpack搭建项目
4.从一开始的只有index.html到引入js文件,然后创建了main.js文件
然后在main导入import各种文件js,CSS.也是方便包的管理,还有
第二次请求才这么做的,目的是这引入一个包就好了main.js
然后再在index.js文件中引入main.js文件就可以了

但是运行的时候发现了一个问题,就是浏览器他不认识高级语法
ES6 import,
解决的方法是 通过webpack一键打包 生成浏览器认识的
main.js 经过webpack打包生成的新的文件名叫bundle.js

需要转换的格式有很多,我们都要在webpack的配置文件中
配置,webpack.config

此时的webpack环境就已经搭建好了

那么项目就可以开始了
首先创建index.html文件

div id="app"
这是我们控制和书写的区域
将组件渲染到这个地方来

此时肯定是要创建Vue实例关联
index id的区域
创建Vue得先引入包
App.vue 中包括三层
template script style

import Vue from "vue"
//导入App跟组件
import app from "./App.vue"
var vm = new Vue({
el:#app,
render: c=>c(app)
})

.app-container {
padding-top:40px;
overflow-x:hidden;
}

transition 过渡,转换
router-Link
router-View

import Vuerouter from 'vue-router'
Vue.use(VueRouter)
挂载路由对象到VM实例上

我还要声明自己的路由规则的
还要吧路由抽离出来
router.js
import VueRouter from 'vue-router'
导入对应的路由组件

这部分就相当于与我在main.js中写的
创建路由对象
var router = new VueRouter({
router: [
{path:'/',redirect:'/home'},
{path:'/home',component:HomeContainer}
]
})
我创建了路由对象,那我就应该有
router-Link
router-view

.v-enter
opacity:0;
transform:translateX(100%)
.v-leave-to

.v-enter-active,
.v-leave-active{
transition:all 0.5s ease;
}

回来记得搞轮播图
resourse
手敲一遍

mt-swipe :auto="4000",
mt-swipe-item v-for="item in lunbotuList" :key = "item.url",
img :src="item.img",

export default{
data(){
return{
lunbotuList:[],//保存轮播图的数据
}
},
create(){
this.getLunbotu();
},
methods:{
getLunbotu(){
this.$http.get("http://vue.study.io").then(result => {
if(result.body.status ===0){
this.lunbotuList = result.body.message;
}
else{
Toast("加载轮播图失败。。。");
}
})
}
}
}

.mint-swipe {
height:200px;

.mint-swipe-item{
&:nth-child(1){}red;
}
img{
width:100%;
height:100%;
}
}

转载于:https://www.cnblogs.com/Py-king/p/11615383.html