- 下载github模板
vue init mpvue/mpvue-quickstart project-name
- 配置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">
- 配置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"
}
- 使用button组件
<van-button type="primary">提交</van-button>
- 没有效果的话,记得重新npm run dev