vue2中创建项目以及使用各种第三方插件库

目录

temptery报错：

使用vue-router: 

取消eslint格式校验：

使用element组件

使用axios：

使用less：

使用nprogress:

使用axios：

使用vuex：

使用mock.js:

使用图片懒加载：

npm i vue-lazyload -S

使用echarts：

---

 以下内容均为已经下载好了node.js和准备好了脚手架的基础上进行的操作，写这篇也只是为了自己创建新项目时知道步骤，可能对新手不太友好。。。。

win+r导出命令服务后敲入cmd命令,下载：vue create 文件名

temptery报错：

在jsconfig.json中加入："jsx": "preserve",

使用vue-router: 

 npm i vue-router@3 --save          注意：(vue2使用三版本的)

 在src中创建一个router文件夹，再在router文件夹中创建一个index.js文件

完成后找到main.js

加入：

 就可以使用vue-router了

再找到vue-config.js

取消eslint格式校验：

加入下面代码就可取消eslint的格式校验

lintOnSave:false 

使用element组件

npm i element-ui -S

使用axios：

npm i axios -S

报错：

Failed to resolve loader: sass-loader You may need to install it. ERROR in ./src/plugins/element.js 3:0-35 Module not found: Error: Can't resolve 'sass-loader' in 'D:\vscode_packge\vue-ego'  @ ./src/main.js 5:0-30

 解决方法：第一步： npm install sass-loader --save-dev

因为一般下载第二个总是不能成功，使用国内淘宝镜像的

第二步：
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

使用less：

npm install less less-loader@5 --save-dev

使用nprogress:

就是在进行网络请求时页面的进度条

 npm install --save nprogress

使用axios：

npm i axios -S

使用vuex：

npm i vuex@3.6.2

• 在src文件夹中新建一个store文件夹
• 在store文件夹中建一个index.js文件

 index.js文件夹内容：

import Vue from "vue";
import Vuex from "vuex";

// state:仓库，存储数据的地方
const state = {};
//  mutation:修改数据的地方(唯一手段)
const mutation = {};
// actions：操作数据的地方,使用dispatch方法分发数据,可以书写自己的业务逻辑，可以处理异步
const actions = {};
//getters：可以理解为计算属性，用于简化仓库数据，让组件获取数据更加便捷
const getters = {};
Vue.use(Vuex);
export default new Vuex.Store({
  state,
  mutation,
  actions,
  getters,
});

之后再在main.js 中引入：import store from '@/store'

 在new Vue()里面使用store

 如果哪一个组件要使用state中的数据，只需要引入：

import {mapState} from 'vuex';

之后在计算属性中：

computed：{

...mapState(['count'])

}

这样就可以拿到count的值了。

如果你想要改变它，比如你给一个button绑定了一个add事件，那么在methods中的add方法中

methods:{
       add(){
    this.$store.dispatch(add)  //dispatch这个方法
    }

}

 但是相对应的你也要子你的store文件夹中的index.js中的action{}中添加这个add方法，

然后你再在actions中提交这个方法到mutations中去，因为mutations才是唯一可以修改数据的地方

使用mock.js:

1. npm install mockjs --save-dev

使用qrcode:用于将链接转为二维码

npm i qrcode --save

组件中引入：

import QRCode from 'qrcode'

使用：得到一个图片src

 let url = await QRCode.toDataURL(this.payInfo.codeUrl)

使用图片懒加载：

npm i vue-lazyload -S

使用echarts：

npm i echarts

状态条：

npm i nprogress