vue+vant+vux

最新推荐文章于 2025-06-06 09:27:38 发布

默星空

最新推荐文章于 2025-06-06 09:27:38 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_40391724/article/details/86650210

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中集成Vux和Vant插件，包括安装步骤、配置修改以及解决跨域问题的方法。通过vux-loader添加Vux，修改webpack配置，然后安装并配置Vant，实现按需加载。同时，提供了调整Vue项目webpack端口和使用axios进行POST请求的跨域传参技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.新建vue项目 vue init webpack 项目名
2.添加vux插件：
   2.1：npm install vux --save-dev//1.安装vux
   2.2：npm install vux-loader --save-dev//2.安装vux-loader
   2.3：npm install less less-loader --save-dev3.安装less-loader以正确编译less源码
   2.4：修改build/webpack.base.conf.js中的代码:
       2.41：添加const vuxLoader = require('vux-loader')
       2.42：将module.exports改名为let webpackConfig
       2.43：添加module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
3.添加vant插件：
   2.1：npm i vant -S//1.安装vant
   2.2：npm i babel-plugin-import -D//安装 babel-plugin-import 插件
   2.3：在.babelrc中添加["import", [{ "libraryName": "vant", "style": true }]]到plugins中

webpack改变访问端口：config/index.js
vue跨域传参:
   1.打开config/index.js,在这里面找到proxyTable{},改为proxyTable: {
       '/api': {
   target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号别忘了加http
   changeOrigin: true,
   pathRewrite: {
    '^/api': ''}}}
   2.：在需要调接口的组件中这样使用：

axios向后台以post提交方法(直接key-value的话后台所接收到的值为null，)
       1.var params = new URLSearchParams()； params.append('jdmc', 'hello jdmc你好')； params.append('jddm', '2')，URLSearchParams 不支持所有的浏览器，但是总体的支持情况还是 OK 的，所以优先推荐这种简单直接的解决方案
       2.import qs from 'qs'
       let data = qs.stringify({
account:this.account,
passWord:this.password
})
get可以用params{key:value,}的方式