Vue常用各种插件详细安装步骤（不收藏就找不到了！）

2024-07-11 20:05| 来源: 网络整理| 查看: 265

文章目录 –save和–save-dev的区别1.小黑框安装2.vuex安装3.路由安装4.路由跳转5.快速实现页面效果pc端6.scss样式安装7.swiper轮播图8.vant移动端页面9.jquery10.iView-ui Pc端页面11.cube-ui移动端页面12.mock.js随机数据模拟13.wangeditor富文本编辑器14.echarts 各种折线图，饼图等等15.vue-baidu-map 百度地图16.qs formData格式17.n318.vux19.base64加密20.vue-cli-plugin-electron-builder下用electron:build打包或生成应用程序的两种方法21.v3layer弹框组件22.v3scroll滚动条美化23.election-vue跨平台应用24.js-xlsx纯JS即可读取和导出excel的工具库

–save和–save-dev的区别

–save || -S // 运行依赖（发布） –save-dev || -D //开发依赖（辅助）

--save生产环境的所需依赖也就是咱们的线上环境 --save-dev开发和测试所需的依赖也就是咱们本地环境

下面的我都没进行设置–save或–save-dev，请大家自行根据需求设置

1.小黑框安装 vue3安装 vue create 项目名 -b -n vue2安装 vue i webpack 名 2.vuex安装

$ yarn安装 yarn add vuex //全局状态管理工具 yarn add vuex-persistedstate //vuex保存在本地 $ cnpm安装 cnpm i vuex -S //全局状态管理工具 cnpm i vuex-persistedstate -S //vuex保存在本地

3.路由安装

$ yarn安装 yarn add vue-router //路由 $ cnpm安装 cnpm i vue-router -S

4.路由跳转官网 https://www.kancloud.cn/yunye/axios/234845

$ yarn安装 yarn add axios //路由跳转 $ cnpm安装 cnpm i vue-axios //路由跳转

5.快速实现页面效果pc端官网 https://element.eleme.cn/#/zh-CN/component/quickstart

$ yarn安装 yarn add element-ui //pc端 $ cnpm安装 cnpm i element-ui -S //pc端

6.scss样式安装

$ yarn安装 yarn add node-sass [email protected] //scss $ cnpm安装 yarn add node-sass [email protected] //scss

7.swiper轮播图官网 https://www.swiper.com.cn/

$ yarn安装 yarn add swiper vue-awesome-swiper //swiper $ cnpm安装 cnpm i swiper vue-awesome-swiper //swiper

8.vant移动端页面官网 https://youzan.github.io/vant/#/zh-CN/

$ yarn安装 yarn add vant //移动端 $ cnpm安装 cnpm ivant //移动端

9.jquery 官网 https://jquery.com/

$ yarn安装 yarn add jquery //jquery $ cnpm安装 cnpm i jquery //jquery

10.iView-ui Pc端页面官网 https://www.iviewui.com/

$ yarn安装 yarn add view-design //pc端 $ cnpm安装 cnpm i view-design //pc端

11.cube-ui移动端页面官网 https://didi.github.io/cube-ui/#/zh-CN

$ yarn安装 yarn add cube-ui //移动端 $ cnpm安装 cnpm i cube-ui //移动端

12.mock.js随机数据模拟官网 http://mockjs.com/

$ yarn安装 yarn add mockjs $ cnpm安装 cnpm i mockjs

13.wangeditor富文本编辑器官网 http://www.wangeditor.com

$ yarn安装 yarn add wangeditor $ cnpm安装 cnpm i wangeditor

14.echarts 各种折线图，饼图等等官网 https://echarts.apache.org/zh/index.html

$ yarn安装 yarn add echarts $ cnpm安装 cnpm i echarts

15.vue-baidu-map 百度地图官网 https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

申请账号和密钥

注册地址 http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey

$ yarn安装 yarn install vue-baidu-map $ cnpm安装 cnpm install vue-baidu-map

16.qs formData格式官网 https://www.npmjs.com/package/qs

$ yarn安装 yarn install qs $ cnpm安装 cnpm install qs

17.n3 官网 https://n3-components.github.io/N3-components/component.html#n3LayoutDocs

$ yarn安装 yarn install N3-components $ cnpm安装 cnpm install N3-components

//main.js中 import Vue from 'vue' import N3Components from 'N3-components' N3Components.install(Vue) 18.vux 官网 https://doc.vux.li/zh-CN/install/usage.html

$ yarn安装 yarn install vux $ cnpm安装 cnpm install vux

19.base64加密官网 https://github.com/dankogai/js-base64

$ yarn安装 yarn install --save js-base64 $ cnpm安装 cnpm install --save js-base64

import {Base64} from 'js-base64'; let utf8 = '小飼弾' Base64.encode(utf8); // 5bCP6aO85by+ Base64.decode('5bCP6aO85by+');// 小飼弾 20.vue-cli-plugin-electron-builder下用electron:build打包或生成应用程序的两种方法官网 https://www.npmjs.com/package/vue-cli-plugin-electron-builder 用于打包成app 21.v3layer弹框组件 22.v3scroll滚动条美化 23.election-vue跨平台应用 24.js-xlsx纯JS即可读取和导出excel的工具库

【本文地址】

公司简介

联系我们