环境配置
-
首先安装 node.js 去官网安装
LTS
下的指定版本。- 查看是否安装Node.js 安装成功,打开cmd黑窗口, 输入
node -v
输出了版本号说明成功了。 - 输入
npm -v
查看是否有版本号。
- 查看是否安装Node.js 安装成功,打开cmd黑窗口, 输入
-
使用码云:来存储代码。
- 在码云中创建完项目目录后,生成公钥:
- 在本地的文件夹中 输入
ssh-keygen -t rsa -C '280773872@qq.com'
- 然后在提示的想对应目录中:找到
.ssh/id_rsa.pub
查看这个文件。把生成的私钥复制到码云对应公钥的上。
- 在本地的文件夹中 输入
- 切换到Travel目录上,点击
生成克隆/下载
点击ssh
到本地的文件夹中,输入git clone '复制的地址'
- 在码云中创建完项目目录后,生成公钥:
-
创建Vue项目:
- 1:首先全局安装
vue-cli
:npm install --global vue-cli
- 2:创建一个基于 webpack 模板的新项目:
vue init webpack Travel
(*注意码云生成的LICENSE文件跟README.md文件, 跟项目文件在同一个路径下) - 简单介绍一下项目于中目录文件:
- 1:README.md:说明文件
- 2:package.json:第三方依赖包
- 3:package-lock.json:锁文件,安装包的版本
- 4:LICENES:开源协议的说明
- 5:index.html:首页默认的模板文件
- 6:.postcssrc.js:css默认项
- 7:.gitnore:提交到git仓库时,可以忽略的后缀名文件
- 8:.eslintrc.js:代码的规范,才不会有警告的提示
- 9:.eslintignore:里面这些文件,是不会受
eslintrc
检测 - 10:.editorconfig:编辑器里面的语法
- 11:.babelrc:vue写的都是单文件组建,通过babelrc来进行语法的转换,转换成浏览器能执行编译的代码。
- 12:static:存放的是静态资源
- 13:node_modules:存放的是第三方依赖包
- 14:src:存放的是项目的源代码
- main.js:项目的入口文件
- App.vue:项目的根组件
- router:
- index.js 配置的路由
- components:存放的组件
- assets:项目中用到的资源
- 15:config:配置文件
- index.js:存放的是基础信息
- dev.env.js:存放的是开发环境信息
- prod.env.js:存放的是线上环境信息
- 16:build:项目打包
- 1:首先全局安装
-
解决移动端点击事件延迟300ms的问题:
- 移动端点击事件的时候, 会出现300ms延迟的情况, 需要引入第三方包,
npm install fastclick --save
(–save的意思是, 不管是开发环境中, 还是线上环境中都需要使用这个包) - 然后在main.js中引入第三方包:
import fastClick from 'fastclick'
- 在调用attach()这个方法:
- fastClick.attach(document.body)
- 移动端点击事件的时候, 会出现300ms延迟的情况, 需要引入第三方包,
-
移动端做适配的问题:
- 首先在项目中最外层的
index.html
文件中:- 找到< meta>标签:在content属性中, 继续写入
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no
:代表的是用户通过手指放大缩小屏幕尺寸都无效, 比列始终是1:1。 - 在src/assets/styles/文件夹中导入:
reset.css, border.css
。(网上很容易就能找到这文件)- reset.css: 导入的这个是关于适配的样式文件, 所有手机适配都能兼容, 在入口函数中将它引入。
- border.css: 移动端会出现1像素边框的问题, 根据每个手机的不同, 像素也不同。
在main.js
中引入这俩个文件:- import ‘styles/reset.css’
- import ‘styles/border.css’
- 找到< meta>标签:在content属性中, 继续写入
- 首先在项目中最外层的
-
< router-link > 标签的作用:
- 介绍一下 < router-link > 标签的作用:
<!--template: 模板中只能包裹一个标签, 所有每个template中直接包含一个div标签--> <template> <div> <div class="home">home</div> <!--router-link 相当于css中的a标签, to相当于 a标签中的href属性--> <router-link to="/list" class="home">列表页</router-link> </div> </template>
-
使用stylus来写css样式:
- css样式使用第三方依赖包:
stylus
npm install stylus --save
npm install stylus-loader --save
- css样式使用第三方依赖包:
-
使用阿里巴巴的 inconfont图标:
- 如何使用, inconfont: 打开网站(http://iconfont.cn/), 把选中的图标放到购物车中, 添加到注册的项目中, 下载下来, 然后将iconfont的4个`字体文件(后缀名.eot; .svg; .ttf; .woff:)导入到/assets/styles/iconfont/中, 把iconfont.css文件放到/assets/styles/目录中。
- 打开:styles目录中的, inconfont.css文件, 把导入的字体文件
url
进行修改。 - 然后在
main.js
中 引入iconfont:import './assets/styles/iconfont.css'
- 然后在相对应的组件中,使用iconfont:
- 写个< span class=‘iconfont’>xxx< /span> 标签 class=‘iconfont’ xxx:表示进入iconfont网站, 点击图标下面的复制代码, 粘贴到xxx的位置上就OK了。
- 打开:styles目录中的, inconfont.css文件, 把导入的字体文件
- 如何使用, inconfont: 打开网站(http://iconfont.cn/), 把选中的图标放到购物车中, 添加到注册的项目中, 下载下来, 然后将iconfont的4个`字体文件(后缀名.eot; .svg; .ttf; .woff:)导入到/assets/styles/iconfont/中, 把iconfont.css文件放到/assets/styles/目录中。
-
使用css代码中的样式, 把它作为常量,或者一个方法引入:
- 如何将css中颜色的样式代码进行优化:
- 在/assest/styles/ 文件中创建:
varibles.styl
文件 写入$bgColor = #00bcd4
等号前面是代码常量, 等号后面是颜色的样式。 - 然后在相对应的组件的< style>标签中引入
@import "~找到存放varibles.styl"文件路径
。 - 在css样式中就可以使用
background: $bgColor
这个常量来代表相对应的颜色。
- 在/assest/styles/ 文件中创建:
- 如何将css中颜色的样式代码进行优化:
-
使用自定义的名字来代替项目的文件夹所在的路径:
- 如何使用webpack来简化代码的路径的问题, 比如
@就代表的是src目录
。- 首先在项目中
build目录中找到
webpack.base.conf.js38行,
’@’: resolve(‘src’),, 在它的下面写上,
‘代替的名字’: resolve(‘相对应的路径’)`。 - 在修改了
webpack.base.conf.js
文件后, 需要重新启动该服务器。
- 首先在项目中
- 如何使用webpack来简化代码的路径的问题, 比如
-
使用第三方包, 完成轮播图:
-
首先安装轮播图第三方包的依赖:
-
vue-awesome-swiper@2.6.7 --save
@后面可以指定版本号。 -
在main.js中:
import VueAwesomeSwiper from 'vue-awesome-swiper'
导入插件。import 'swiper/dist/css/swiper.css'
把样式也引入进来。Vue.use(VueAwesomeSwiper)
使用这个插件。
-
在相对应的组件中:
- 在< template>标签中, 引入下面这段代码:
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <!-- slides --> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> <swiper-slide>I'm Slide 3</swiper-slide> <swiper-slide>I'm Slide 4</swiper-slide> <swiper-slide>I'm Slide 5</swiper-slide> <swiper-slide>I'm Slide 6</swiper-slide> <swiper-slide>I'm Slide 7</swiper-slide> <!-- Optional controls --> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper>
- 在data函数中 返回一个对象:
swiperOption
。
-
在轮播图上面, 显示白色的小圆圈(默认颜色是蓝色, 通过穿透来改变小圆圈的颜色):
pagination: '.swiper-pagination',
-
让轮播图进行循环操作:
loop: true
-
定义在swiperOption对象中:
swiperOption: { // 给轮播图添加, 图片下面的小点, 默认的颜色是蓝色 pagination: '.swiper-pagination', // 开启轮播图循环 loop: true },
-
-
-
如何在当前组件中修改其他组件中的样式:
-
1:首先在创建一个< div>标签 把外部传入的组件包裹里面, 自定义class=‘xxx’。
-
2:找到外部组件中的class=‘xxx’
-
3:使用
div标签定义的class >>> 到外部组件的 class
, 接的在下面写要修改的样式, 就可以了。 -
.wrapper 就是div(class), .swiper-pagination-bullet-active(外部组件的class)
.wrapper >>> .swiper-pagination-bullet-active background: #fff
-
-
使用axios发送 ajax 请求:
-
1:首先安装依赖:
npm install axios --save
-
2:在主组件中导入:
import axios from 'axios'
methods: { getHomeInfo () { axios.get('/api/index.json') .then(this.getHomeInfoSucc) }, getHomeInfoSucc (res) { console.log(res) } }, mounted () { this.getHomeInfo() }
-
3: axios.get(‘url’)就发起了请求。(上面的url, 在config目录下的/index.js 里面,进行了简单的配置, 让它请求的是项目中,static目录下的index.json文件)
proxyTable: { '/api': { target: 'http://localhost:8080', pathRewrite: { '^/api': '/static/mock/' } } },
-
-
父子组件传值:
-
1:首先在父组件中通过
axios.get()
获取到后端传递过来的数据, 然后赋值给data函数中的返回值。 -
2:在子组件标签中,绑定传入的值,
:list='xxxlist'
。 -
3:在子组件中, 使用
props:{ list:Array}
来进行接收。 -
4:将list传入到指令
v-for='item of list'
中。// 发起axios请求后端的数据 getHomeInfo () { axios.get('/api/index.json') .then(this.getHomeInfoSucc) }, // 首先在父组件中, 通过axios获取值得 getHomeInfoSucc (res) { console.log(res) res = res.data if (res.ret && res.data) { const data = res.data this.city = data.city this.swiperList = data.swiperList this.iconList = data.iconList this.recommendList = data.recommendList this.weekendList = data.weekendList } // 接收到的值,赋值给data函数 data () { return { city: '', swiperList: [], iconList: [], recommendList: [], weekendList: [] } }, // 将data函数的返回值, 绑定到子组件中, 进行传递给子组件 <home-header :city="city"></home-header> <home-swiper :list="swiperList"></home-swiper> <home-icons :list="iconList"></home-icons> <home-recommend :list="recommendList"></home-recommend> <home-weekend :list="weekendList"></home-weekend> // 以上操作都是在父组件中完成的 // 使用props 来接收父组件传递过来的数据 } props: { list: Array }, // 在你使用v-for循环的时候传入list <li class="item border-bottom" v-for="item of list" :key="item.id">
-
-
路由跳转:
-
< router-link to='/xxx'>< /router-link>
标签是跳转到to=’/xxx’指定的路由.-
你可能会发现,当你标签包含的这个样式,文字颜色会变,需要改动一下, 把css的color:设置为#fff:
-
<router-link to="/city"> <div class="header-right"> {{this.city}} <span class="iconfont arrow-icon"></span> </div> </router-link>
-
-
-
better-scroll的使用:
-
首先安装包
npm install better-scroll --save
-
看better-scroll的结构(新增一条div标签)
-
在最外层的div标签中:
<div class="list" ref="wrapper">
绑定wrapper -
在项目的组件中导入:
import Bscroll from 'better-scroll'
-
接下来在:
// 生命周期函数, 函数挂载之后加载 mounted () { this.scroll = new Bscroll(this.$refs.wrapper) }
-
-
实现
Vuex
实现数据共享:-
Vuex是什么?
- 项目中多个组件进行传值,如何把一个公用的数据放到一个公共的存储空间,某个组件改变数据,其他的组件都能感觉到。
-
State:
存储公用数据
。 -
Actions:
组件(Vue Components)改数据
必须调用(Dispatch方法来进行调用)
Actions,做一些异步处理。 -
Mutations:Actions调用
(Commit方法来进行调用)
Mutations, 才可以改变多用数据的值
。 -
有的时候也可以
略过Actions
, 让组件(Vue Components)
直接调用Mutations
,让Mutations直接修改State的数据。 -
流程图如下:
-
安装Vuex:
- 执行命令:
npm install vuex --save
- 执行命令:
-
再项目src目录下创建文件夹
store
:-
1:引入:
import Vue from 'vue'
和import Vuex from 'vuex'
-
2:使用Vuex:
Vue.use(Vuex)
-
3:创建Vuex 仓库:
export default new Vuex.Store({})
-
state: 存储数据, 再使用的时候直接再组件中
{{this.$store.state.city}}
就OK。 -
actions:当点击事件触发的时候
vue组件调用
,this.$store.dispatch('changeCity', city)
再组件中操作,dispatch方法,进行传值,actions
来接收进行处理, changeCity (ctx, city) {ctx.commit('changeCity', city)
}, 传入两个参数
,第一个参数ctx
(上下文, 进行commit时候使用),第二个参数city
就是dispatch
总组件中获取到的。 -
mutations:根据上面的commit(‘changeCity’, city)
changeCity进行命名,传递两个参数
,第一个是state, 第二个参数是city。然后进行赋值给state.city,就改变了公用的存储数据
。 -
栗子如下(再src/store/index.js):
// 引入vuex import Vue from 'vue' import Vuex from 'vuex' // 使用Vuex Vue.use(Vuex) // 创建Vuex 仓库 export default new Vuex.Store({ // 存放公用的数据 state: { city: '上海' }, actions: { changeCity (ctx, city) { ctx.commit('changeCity', city) } }, mutations: { changeCity (state, city) { state.city = city } } })
-
-
-
再
main.js
中创建Vuex的根实例
: -
第一步: 首先引入:
import store from './store'
-
第二部: 直接创建:
new Vue({ el: '#app', router, // 创建Vuex 根实例 store, components: { App }, template: '<App/>' })
-
-
编程式导航
vue-router
:-
this.$router.push('/')
: 来进行页面中的跳转('/')代表的是路径
。 -
该方法的参数可以是一个
字符串路径
,或者一个描述地址的对象
。比如:// 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
-
8.9