Vue-Cli

官方网站

vue-cli是一个辅助开发工具=> 代码编译 + 样式 + 语法校验 + 输出设置 + 其他 …

作用: 可以为开发者提供一个**标准的项目开发结构** 和配置 开发者不需要再关注

安装 vue-cli

解决powershell禁止运行脚本

1
set-ExecutionPolicy RemoteSigned

采用 npm 的方式安装

1
npm i -g @vue/cli

采用 cmpn 的方式安装

cnpm 官网

1
2
3
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm i -g @vue/cli

查看安装版本号

1
2
3
vue -V
//或者
vue --version

vue-cli 2.0 补丁

1
npm install -g @vue/cli-init

初始化项目

创建 2.0 项目

1
2
3
4
5
6
7
8
#  heroes 创建的项目名称
vue  init webpack-simple 项目名称
# 切换到当前目录
cd  heroes
# 安装依赖
npm install
# 在开发模式下 启动运行项目
npm run dev

创建 4.0 项目

1
2
3
4
5
6
# 4.0下创建项目
vue create 项目名称 // create(创建) 为关键字
# 切换到当前目录
cd  heroes
# 在开发模式下 启动运行项目
npm run serve

在 src 目录创建文件夹

1
2
3
4
5
6
7
8
9
10
11
├─api #接口
├─assets #静态资源
├─components #公用组件
├─directive #指令
├─filter #过滤器
├─router #路由
├─utils #工具函数
├─styles #全局样式
└─views # 路由级别组件
└─App.vue # 根组件
└─main.js # 入口文件

以上结构参考

常用 NPM 插件

NPM 官网

导航

Element-UI

官方网站

安装

1
npm i element-ui -S

导入

在main.js 中写入以下内容：

1
2
3
4
5
...
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
...
Vue.use(ElementUI);

使用

参考官方文档

Vant

官方网站

安装

1
npm i vant -S

导入

在main.js中导入

1
2
3
4
5
...
import Vant from 'vant';
import 'vant/lib/index.css';
...
Vue.use(Vant);

使用

参考官方文档

安装 rem 适配插件

1
npm install postcss-pxtorem --save-dev
1
npm i -S amfe-flexible

在postcss.config.js中写入如下代码

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
  plugins: {
    autoprefixer: {},
    // 配置计算rem值得插件
    "postcss-pxtorem": {
      // 按照37.5的基准值来换算rem单位
      // vat默认最佳显示状态在iphone 6  宽度375px
      rootValue: 37.5,
      propList: ["*"],
    },
  },
};

在main.js中写入

1
import "amfe-flexible";

Vue-Router

官方网站

实现原理: vue-router通过hash与History interface两种方式实现前端路由

安装

1
npm install vue-router

导入

在src/router/index.js中写入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);
const router = new VueRouter({
  routes: [
    {
      path: "",
      component: null,
    },
  ],
});

export default router;

在main.js中写入以下内容：

1
2
3
4
5
6
7
8
...
import router from '@/router'
...
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

使用

推荐使用路由懒加载方式导入

 

参考笔记

路由懒加载

1
const xxx = () => import("@/views/xxx");

导航守卫

官方文档

使用场景:

  • 前置守卫

    • 判断用户是否达到某些条件,不满足条件强制重定向到一个指定的地址

  • 后置守卫

    • 待编辑
前置守卫

在src/router/index.js中写入以下内容：

1
2
3
4
5
6
7
8
...
router.beforeEach((to, from, next) => {
    // to 跳转目标路由对象
    // from 从哪里跳过来的路由对象
    // next() 放行  next('地址') 拦截到哪里
    next()
})
...
后置守卫
1
2
3
4
5
...
router.afterEach((to, from) => {
  // ...
})
...

VueX

官方网站

安装

1
npm i vuex

导入和使用

查看专栏

Axios

参考文档

实现原理:XMLHttpRequest对象

优点:

  • 支持 promise
  • 能拦截请求和响应
  • 能转换请求和响应数据
  • 自动转换 JSON 数据
  • 能取消请求

Axios 源码深度剖析

安装

1
npm install axios

导入

在src/api/index.js中写入以下内容

1
2
import axios from "axios";
export default axios;

在main.js中写入以下内容

1
2
3
4
...
import axios from '@/api'
Vue.prototype.$axios = axios
...

使用

设置基准地址

1
axios.defaults.baseURL = "http://ttapi.research.itcast.cn/mp/v1_0/";

处理数字最大安全值

使用 JSON-bigint 解决,使用方法

请求拦截器

1
2
3
4
5
6
7
8
9
10
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

响应拦截器

1
2
3
4
5
6
7
8
9
10
axios.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

Echarts

官方文档

安装

1
npm install echarts

导入与使用

在要使用的vue文件中写入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div>
    <!--  2.准备DOM容器，具备高宽  -->
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
  //1.导入echarts
  import echarts from "echarts";
  export default {
    mounted() {
      //3.初始化echarts
      const dom = this.$refs.dom;
      const myEcharts = echarts.init(dom);
      //4.配置和数据
      const option = {};
      //5.使用
      myEcharts.setOption(option);
    },
  };
</script>

<style></style>

使用

option的属性产考此页

jsonp

官方网站

安装

1
npm i jsonp

导入与使用

1
2
3
import jsonp from "jsonp";

jsonp("", (err, data) => {});

qs

官方网站

安装

1
npm i qs

导入和使用

1
2
3
import qs from "qs";

var str = qs.stringify(obj);

json-bigint

官方网站

安装

1
npm i json-bigint

导入与使用

在负责axios的 js 文件中写入以下内容

1
import axios from "axios";
1
2
3
4
5
6
7
8
9
axios.defaults.transformResponse = [
  (data) => {
    try {
      return JSONBIG.parse(data);
    } catch (e) {
      return data;
    }
  },
];

moment

官方网站

安装

1
npm i moment

导入与使用

dayjs

官方网站

安装

1
npm i dayjs

导入与使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/zh-cn";
dayjs.extend(relativeTime);

const relTime = (time) => {
  return dayjs().locale("zh-cn").from(time);
};

export default {
  install(Vue) {
    Vue.filter("relTime", relTime);
  },
};

生成文件

在根目录创建vue.config.js

1
2
3
module.exports = {
  publicPath: "./",
};