软件安装说明：先安装node.js(node-v8.11.3-x64),再安装Git-2.18.0-64-bit，最后安装vscode。

  1. 安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)

  2. 基于node.js,利用淘宝npm镜像安装相关依赖

在cmd里直接输入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回车，等待安装…

  1. 安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

在cmd里

1) 输入：cnpm install -g vue-cli，回车，等待安装...

2) 输入：vue，回车，若出现vue信息说明表示成功
  1. 创建项目

在cmd里输入：vue init webpack vue_test(项目文件夹名)，回车，等待一小会儿，依次出现‘git’下的项，可按下图操作(图略)

5.安装依赖

在cmd里

1).输入：cd vue_test（项目名），回车，进入到具体项目文件夹

2).输入：cnpm install，回车，等待一小会儿

回到项目文件夹，会发现项目结构里，多了一个node_modules文件夹（该文件里的内容就是之前安装的依赖）

基于脚手架创建的默认项目结构如下图所示：（图略）

  1. 测试环境是否搭建成功

方法1：在cmd里输入：cnpm run dev

方法2：在浏览里输入：localhost:8080(默认端口为8080)

运行起来后的效果如下图所示：（图略）

**重点来了**

1.安装axios，vuex，

安装axios

 cnpm install axios --save

在main.js

import Axios from 'axios'
Vue.prototype.$axios = Axios
Axios.defaults.baseURL = 'http://172.16.128.3:8080';

// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // if (config.method === "post") {
  //   console.log("==============================")
  //   console.log(config.data)
  //   config.data = qs.stringify(config.data);
  // }

  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
Axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  if (response.status !== 200) {
    console.log(response)
    this.$message.error("请求失败")
    return;
  }
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

安装vuex

cnpm install vuex --save

import Vuex from 'vuex'
import store from './store/store'

在vue中引入

new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

2.安装dayjs

cnpm install dayjs --save

import dayjs from "dayjs"
Vue.prototype.dayjs = dayjs;//可以全局使用dayjs

页面调用：

 console.log(this.dayjs().format('YYYY-MM-DD')); //2020-06-30

教程：https://www.jianshu.com/p/15d6a9c1bf18

3. swipe组件的使用

（1）安装

npm install vue-awesome-swiper --save

（2）全局引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require stylesimport 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

（3）用法

<template>
  <swiper :options="swiperOption" ref="mySwiper">
    <!-- 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>
    <!-- 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>
</template>

-------------------scrip：Return --------------
swiperOption: {
pagination: '.swiper-pagination',
loop: true
}

（4）小白点颜色调整

.swiper-content >>> .swiper-pagination-bullet-active
background :#fff

（5）为了防止网速慢的时候先加载好的移动到上面，需要设置

Heigh：0
Padding-bottom=26.7%

4、拖动图标的实现

（1）用将icon包含，将每一页的内容用包含
在这里插入图片描述

（2）样式
在这里插入图片描述

（3）动态数据
（4）每一页8个图标，Math.fllor(index18)----向下取整

在这里插入图片描述

5. vuejs开发webapp中，1px边框问题

https://www.jianshu.com/p/2157210a93a5
首先说说，为什么会存在1px的问题，由于现在市场上的移动设备屏幕种类太多，dpr不同，设计师给的稿子，上面明明是1px的线，在高分辨率的屏幕下，可能显示成2px，甚至更大，然而对于有强迫症的设计师，这点是不能容忍的，所以就出现了1px的问题。

Index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>web03</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

在main.js中引入下面两个文件，重新设置边框

import ‘./assets/styles/border.css’
import ‘./assets/styles/reset.css’

6、使用 fastclick解决移动端click事件300毫秒延迟方法

判断，上下滑动，点击，放大事件

  1. 安装fastclick插件
npm install fastclick --save
  1. 安装完以后，可以在在main.js中全局引入，并绑定到body，全局生效。或者在单页面引入，只针对当前页面生效
import fastClick from 'fastclick'
fastClick.attach(document.body) // 插件绑定在页面上

7.mint ui

（1）、安装mint-ui：

npm intall mint-ui --save
1

（2）、 main.js 中引入：

import MintUI from ‘mint-ui’
import ‘mint-ui/lib/style.css’
Vue.use(MintUI)

# vue.js # javascript # node.js
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

带你 1 分钟玩转 AI 大模型微调推理，更有限时福利等你领

avatar 华为开发者空间
cover

共筑智能未来，培养创新人才，华为云 HCSD 校园沙龙走进北方工业大学！

avatar 华为开发者空间
cover

2024华为开发者大赛广东赛区佛山站

avatar 华为开发者空间