您的位置:首页 > Web前端 > Vue.js

vue——常用的第三方插件安装合集(可详细了!持续更新)

2020-03-28 20:13 1586 查看

前言:
本文将会给各位客官列出vue常用的一些第三方插件推荐和安装方法及项目中的调用及使用方法,如果有遗漏没有写的好用的插件欢迎各位客官评论,本文将持续更新

插件序列表:

  1. Axios(官方推荐的ajax数据请求的插件)
  2. Vue-Router(vue路由管理插件)
  3. Vuex(vue数据中心化状态管理插件)
  4. Less(css预处理插件)
  5. Sass(css预处理插件)
  6. Element-Ui(饿了么ui插件)
  7. Mint-ui(移动端ui插件)

插件安装及使用方法:

  1. Axios(官方推荐的ajax数据请求的插件):
    在需要添加axios的项目中打开终端工具,输入以下命令(如果npm会失败报错可以使用cnpm):
npm install axios -S


安装完成以后打开项目根目录下的package.json文件,查看dependencies字段中是否存在了axios和对应的版本号,如果存在了就说明安装成功了:
在需要使用axios的页面的script标签中添加以下代码,然后就可以在当前页面中使用调用axios了:

<script>
import axios from 'axios';console.log(axios);//打印验证是否添加成功
</script>

但是以上的方法有一个弊端,就是我每一个页面如果都需要axios的话,每个页面都需要添加import axios from ‘axios’;,所以我们要能够让axios全局添加,所有页面都可以调用,axios是不能使用Vue.use(axios)来定义为全局可用的,所以我们可以将axios绑定到Vue.prototype原型链上,因为Vue是全局的:
首先打开src文件中的main.js,在main.js中进行引入axios,添加以下代码:

import axios from 'axios';


然后进行原型链方法绑定,在main.js中添加以下代码:

Vue.prototype.$axios=axios;

在其他页面可以直接通过this.$axios()进行调取:

<script>
export default {
data() {
return {};
},
created(){
this.$axios({
data:{

}
});
}
};
</script>
  1. Vue-Router(vue路由管理插件):
    Vue-Router插件一般在咱们创建vue init webpack 的时候是可以选择是否安装的,如果创建的时候选择了,会自动安装上Vue-Router插件,并且会自动在项目中建立好文件夹和相关配置,可以直接在src——router——index.js文件中进行路由管理开发。
    如果创建的时候没有选择或者忘记了选择安装Vue-Router插件的话,那就按照以下方法进行安装Vue-Router:
    打开终端工具,进入到项目文件路径中,输入以下命令:
npm install vue-router

然后安装成功以后,在项目文件的src文件下建立一个router文件夹,在router文件夹里建立一个index.js文件,在index.js文件中输入以下代码:

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/pages/login/index' //公用登录页

Vue.use(Router)

export default new Router({
mode: "history",
routes: [{
path: '/',
component: login
}]
})

然后在App.vue文件中添加router-view标签,添加完成以后就可以使用路由功能了:

<template>
<div id="app">
<!-- 页面路由 -->
<router-view />
</div>
</template>
  1. Vuex(vue数据中心化状态管理插件)
    待更新…
  1. Less(css预处理插件)
    安装Less是需要安装两个包的,一个是less,一个是less-loader,在需要安装Less的项目中打开终端工具,输入以下命令:
npm install less --save-dev


安装好后,再接着安装Less-loader,在终端工具中输入以下命令:

npm install less-loader --save-dev

安装完成以后,在package.json中查看是否存在less字段和对应版本,存在说明安装成功了,然后在需要使用页面的.vue页面的style标签上添加lang:"less"属性,scoped的意思是当前style里面的样式只作用于当前.vue页面,也就是当前页面写的样式不会与其他页面产生冲突,导致样式混乱重置覆盖:

<style lang="less" scoped>
</style>
  1. Sass(css预处理插件)
    安装Sass是需要安装两个包的,一个是node-sass,一个是sass-loader,在需要安装Sass的项目中打开终端工具,输入以下命令:
npm install node-sass --save-dev

安装好后,再接着安装sass-loader,在终端工具中输入以下命令:

npm install sass-loader --save-dev

安装完成以后,在package.json中查看是否存在sass字段和对应版本,存在说明安装成功了,然后在需要使用页面的.vue页面的style标签上添加lang:"sass"属性,scoped的意思是当前style里面的样式只作用于当前.vue页面,也就是当前页面写的样式不会与其他页面产生冲突,导致样式混乱重置覆盖:

<style lang="sass" scoped>
</style>
  1. Element-Ui(饿了么ui插件)
    待更新…
  1. Mint-ui(移动端ui插件)
    待更新…
  • 点赞
  • 收藏
  • 分享
  • 文章举报
朕. 发布了7 篇原创文章 · 获赞 5 · 访问量 391 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: