mpVue项目构建及配置

下载github模板vue init mpvue/mpvue-quickstart project-name配置sass-loadernpm install --save-dev sass-loader//sass-loader依赖于node-sass,所以要安装node-sassnpm install --save-dev node-sass//在buil...

1. 下载github模板

vue init mpvue/mpvue-quickstart project-name

2. 配置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">

3. 配置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"
  }

4. 使用button组件

<van-button type="primary">提交</van-button>

5. 没有效果的话，记得重新npm run dev