vue.config.js
module.exports = {
lintOnSave: false,
1創建vue項目
vue create minemall
2 更改端口vue.config.js
module.exports = {
devServer: {
port: 8080, // 端口號
}
};
3 vant框架引入安裝
cnpm i vant -S
4 .bablerc
自動引入組建
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 無需設置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 對於使用 babel7 的用戶，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
// 接着你可以在代碼中直接引入 Vant 組件
// 插件會自動將代碼轉化爲方式二中的按需引入形式
import { Button } from 'vant';
如果你在使用 TypeScript，可以使用 ts-import-plugin 實現按需引入
5 設置.eslint.js
'semi': 0
6 測試vant
main.js
import { Button } from 'vant';
Vue.use(Button);
<van-button type="primary">主要按鈕</van-button>
7移動端適配rem
安裝postcss
npm install postcss-pxtorem --save-dev
npm i -S amfe-flexible
在 main.js 引入amfe-flexible
配置postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
8
安裝less與less-loader
npm install less less-loader
----------------------------------------------------------------
{
"name": "vue-h5-template",
"version": "2.0.0",
"description": "A vue h5 template with Vant UI",
"author": "songlk <[email protected]>",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"stage": "vue-cli-service build --mode staging",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@chenfengyuan/vue-countdown": "^1.1.2",
"axios": "^0.19.2",
"dayjs": ">=1.7.7",
"core-js": "^3.6.4",
"js-cookie": "2.2.0",
"lodash": "^4.17.15",
"regenerator-runtime": "^0.13.5",
"vant": "^2.4.7",
"vue": "^2.6.11",
"vue-router": "^3.1.5",
"vuex": "^3.1.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.3.0",
"@vue/cli-plugin-eslint": "~4.3.0",
"@vue/cli-service": "~4.3.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.3",
"babel-plugin-import": "^1.13.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^1.19.1",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"script-ext-html-webpack-plugin": "^2.1.4",
"vue-template-compiler": "^2.6.11",
"webpack-bundle-analyzer": "^3.7.0"
}
}