Vue 搭建一个新项目

项目搭建

npm install vue-cli -g

npm install webpack -g

vue init webpack project

npm install

npm run dev

webpack 会帮忙打包上线

npm run dev 打包好的文件会放在内存中

src中写代码

gitHub

• 创建项目
• 邀请组员
• clone git clone http://ffffsdfsdf

1. 创建功能分支
2. 在本地切换到创建的分支 git checkout
3. 把功能分支拉到本地 git pull
4. 编写代码
5. 将本地的修改提交到线上 git add . ,git commit -m'',git push
6. 前端leader会帮忙做的review
7. QA会帮助你做测试
8. 如果没有问题，代码上线
9. 让master分支合并当前的分支

命令

git clone

git status

git checkout ---- 丢弃更改

在GitHub创建一个新分支

git checkout 分支名

meta 标签

viewport

reset.css

html : font-size:50px

---

在各个模块中引入css

<style>
    @import './css/reset.css' 引入css
</style>

轮播图

home.vue中 Header.vue,Swiper.vue

在GitHub中搜索awesome-vue 找到swiper插件 可以在vue使用swiper插件（因为原swiper是操作DOM的）

单页应用

首先讲awesome-vue 中的swiper插件内容粘贴到页面中

把swiper引入 import {swiper,swiperSlide} from 'vue-awesome-swiper'

注册其中的模块

components{

}

修改/删除配置

占位防抖动

避免屏幕抖动（小圆点） 图片宽高比自适应

在图片image外层包裹一个div 加padding-bottom变成 高/宽*100%

.swiper-img-con{ overflow:hidden; width：100%； height:0; padding-bottom:31.25%; } .swiper-img{ wifth:100%; }

scoped

<style scoped>
    ...
</style>

让当前模块的样式只作用于当前模块不会影响其他的模块样式

vue-iscroll

useragent

判断用户系统设备

多页应用、单页应用

jQuery主要用于开发多页应用

vue angular react主要用于开发单页应用

路由前端来做 --> 单页应用

路由后端来做 --> 多页应用

多页应用：跳转一个链接 会重新请求一个新的index.html 用a跳转

单页应用：跳转一个链接 不会重新请求一个新的index.html vue中用一个标签<router-link>