Vue框架—项目部署与实践

环境配置

首先安装 node.js 去官网安装 LTS 下的指定版本。
- 查看是否安装Node.js 安装成功，打开cmd黑窗口，输入node -v 输出了版本号说明成功了。
- 输入npm -v 查看是否有版本号。
使用码云：来存储代码。
- 在码云中创建完项目目录后，生成公钥：
  - 在本地的文件夹中输入ssh-keygen -t rsa -C '[email protected]'
  - 然后在提示的想对应目录中：找到.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：项目打包
解决移动端点击事件延迟300ms的问题：
- 移动端点击事件的时候, 会出现300ms延迟的情况, 需要引入第三方包, npm install fastclick --save （–save的意思是, 不管是开发环境中, 还是线上环境中都需要使用这个包）
- 然后在main.js中引入第三方包：
  - import fastClick from 'fastclick'
  - 在调用attach()这个方法：
    - fastClick.attach(document.body)
移动端做适配的问题：
- 首先在项目中最外层的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’

< 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
使用阿里巴巴的 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了。
使用css代码中的样式, 把它作为常量,或者一个方法引入：
- 如何将css中颜色的样式代码进行优化：
  - 在/assest/styles/ 文件中创建：varibles.styl 文件写入$bgColor = #00bcd4 等号前面是代码常量, 等号后面是颜色的样式。
  - 然后在相对应的组件的< style>标签中引入 @import "~找到存放varibles.styl"文件路径 。
  - 在css样式中就可以使用background: $bgColor 这个常量来代表相对应的颜色。
使用自定义的名字来代替项目的文件夹所在的路径：
- 如何使用webpack来简化代码的路径的问题, 比如@就代表的是src目录。
  - 首先在项目中build目录中找到webpack.base.conf.js38行,’@’: resolve(‘src’),, 在它的下面写上,‘代替的名字’: resolve(‘相对应的路径’)`。
  - 在修改了webpack.base.conf.js文件后, 需要重新启动该服务器。

使用第三方包, 完成轮播图：

首先安装轮播图第三方包的依赖：

[email protected] --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">&#xe64a;</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

Vue框架—项目部署与实践

环境配置

猜你喜欢