Vue常用各种插件详细安装步骤(不收藏就找不到了!)
Vue安装步骤1.小黑框安装vue create 项目名 -b -n2.vuex安装yarn add vuex//全局状态管理工具yarn add vuex-persistedstate//vuex保存在本地3.路由安装yarn add vue-router//路由4.路由跳转yarn add axios//路由跳转yarn add vue-axios//路由跳转5.快速实现页面效果pc端yarn
文章目录
- –save和–save-dev的区别
- 1.小黑框安装
- 2.vuex安装
- 3.路由安装
- 4.路由跳转
- 5.快速实现页面效果pc端
- 6.scss样式安装
- 7.swiper轮播图
- 8.vant移动端页面
- 9.jquery
- 10.iView-ui Pc端页面
- 11.cube-ui移动端页面
- 12.mock.js随机数据模拟
- 13.wangeditor富文本编辑器
- 14.echarts 各种折线图,饼图等等
- 15.vue-baidu-map 百度地图
- 16.qs formData格式
- 17.n3
- 18.vux
- 19.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 sass-loader@7.3.1 //scss
$ cnpm安装
yarn add node-sass sass-loader@7.3.1 //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的工具库
更多推荐
所有评论(0)