一、在创建文件的目录中,输入cmd,回车
- npm install --global @vue/cli 安装vuecli(mac系统在命令最前方加sudo[不加会报错无权限])
- vue --version 检查vuecli是否安装
- Vue create 项目名
- Please pick a preset: Manually select features(手动,可以选择更多的功能特性)
- Check the features needed for your project: Choose Vue version, Babel(es6转es5), Router, Vuex, CSS Pre-processors(css处理器), Linter(校验代码)(有校验之后,单双引号不对都一直报错,关键是VScode一保存就自动将单引号变为双引号!!!)
- Use history mode for router?No
- Less
- Pick a linter / formatter config: Standard
- Pick additional lint features: Lint on save(保存后校验代码), Lint and fix on commit(提交仓库时校验代码)
- Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files(生成独立配置文件,后期便于维护)(另一个是生成在package文件中)
- 最后是否要把本次配置设为以后的默认配置
二、引入vant组件库
npm i vant -S(安装vant库)
npm i babel-plugin-import -D(按需引入组件的插件)
在.babelrc 或 babel.config.js 中添加配置:
{
"plugins": [
[
"import",
{
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}
]
]
}
局部注册后,你可以在当前组件中使用注册的 Vant 组件。
import { Button } from 'vant';
export default {
components: {
[Button.name]: Button,
},
};
如果同时注册多个组件,遇到报错:是否正确注册这个组件时:
可以在子组件内部尝试下面的引入方法
打包:npm run build 需要手动先创建一个vue.config.js文件,内容是
module.exports = {
publicPath: "./",
outputDir: "dist",
assetsDir: "static",
indexPath: "index.html",
configureWebpack: {
externals: {
BMap: "BMap", //百度地图配置
},
},
};
三、配置viewport
npm install postcss-px-to-viewport --save-dev
使用npm安装,
// 新建postcss.config.js 。配置
module.exports = { plugins: { 'postcss-px-to-viewport': { viewportWidth: 375, }, }, };
重新运行
注:报错不是按顺序的,出现什么错误解决什么。
报错1:
Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-pxtorem'
找不到这个模块npm install postcss-pxtorem,就安装上
报错2:Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.需要8.以上的版本,它最高才6.0这里降低版本
npm i postcss-pxtorem@5.1.1
报错3:找不到vant\lib\index.css这个模块了,就先全局卸载,再安装
①. npm uninstall vant -S
②. npm install vant -S