mpVue项目构建及配置

  1. 下载github模板
vue init mpvue/mpvue-quickstart project-name
  1. 配置sass-loader
npm install --save-dev sass-loader
//sass-loader依赖于node-sass,所以要安装node-sass
npm install --save-dev node-sass
//在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}
// 注意:下面这个 加不加视情况定(css的)
 {
    test:/\.css$/,
    loader:'style-loader'
 },
 {
    test:/\.css$/,
    loader:'css-loader'
 },
 // 在vue文件中修改标签
 <style lang="scss">
  1. 配置vant-weapp
// 安装vant/weapp
npm i @vant/weapp -S --production
// 配置 webpack.base.config.js 
// PLATFORM后面加
if (/^(swan)|(tt)$/.test(PLATFORM)) {
 ...
}
if(/^wx$/.test(PLATFORM)) {
  baseWebpackConfig = merge(baseWebpackConfig, {
    plugins: [
      new CopyWebpackPlugin([{
        from: resolve('node_modules/vant-weapp/dist'),
        to: resolve('dist/wx/vant-weapp/dist'),
        ignore: ['.*']
      }])
    ]
  })
}

// 配置project.config.json
// 在setting中
"setting": {
       ...
       "packNpmRelationList": [
           {
               "packageJsonPath": "./package.json",
               "miniprogramNpmDistDir": "./dist/wx/"
           }
       ]
   },
// 配置app.json
// window 同级下加
  "window": {
    ...
  },
  "usingComponents": {
    "van-button": "vant-weapp/dist/button/index"
  }
  1. 使用button组件
<van-button type="primary">提交</van-button>
  1. 没有效果的话,记得重新npm run dev
上一篇:EasyDSS前端代码运行npm install命令报错如何处理?


下一篇:三层转发