前提条件:
node版本:14.15.1 npm版本:6.14.8 vue-cli版本:4.5.12 vue版本:2.x 移动ui框架:mint-ui http请求:axios
初始化项目
初始化项目: vue create 项目名字
1.根据提示进行相应的配置，选取必要的模块
2.选择项目需要的一些特性(此处我们选择需要Babel编译、使用vue路由、vuex状态管理器、css预处理器、eslint代码检测和格式化)
3.选择vue版本,在这里我们选择2.x
4.选择路由模式,在这里我们选择兼容性比较好的hash模式
5.选择css预处理语言,在这里我们选择less
6.选择ESlint代码规范,在这里我们使用ESLint+Prettier代码规范
7.选择保存的时候启用lint格式化
8.配置信息分开保存还是单独一个文件保存，选择分开保存
9.是否将当前设置作为预设,选择否
10.项目生成中
11.配置完成后Vue-cli完成初始化
12.根据命令提示 进行项目 并启动项目
安装ui框架并按需引入
1.下载mint-ui框架
npm install mint-ui --save
2.下载babel-plugin-component
npm install babel-plugin-component -D
找到根目录下babel.config文件，并添加:
在项目中使用全局less变量
1.下载插件style-resources-loader、vue-cli-plugin-style-resources-loader
npm install style-resources-loader vue-cli-plugin-style-resources-loader -D
在项目根目录下创建vue.config.js文件 在文件里面配置:
module.exports ={
pluginOptions:{
'style-resources-loader':{
preProcessor:'less',
patterns:['src/assets/styles/global.less']
}
}
}
在项目中设置prettier规则
1.在根目录下面找到.eslintrc.js 在rules下面配置
'prettier/prettier':[
'error',
{
tabWidth:2,
useTabs:false,
singleQuote:true,
semi:false,
trailingComma:'none',
endOfline:'auto',
printWidth:80
}
]
移动端vw适配
下载插件:postcss-px-to-viewport
npm install postcss-px-to-viewport -D
在根目录下创建.postcssrc.js文件 在文件里面配置:
module.exports = {
plugins:{
autoprefixer:{
overrideBrowserslist:[
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
]
},
'postcss-px-to-viewport':{
unitToConvert:'px',
viewportWidth:375,
unitPrecision:6,
propList:['*'],
viewportUnit:'vw',
fontViewportUnit:'vw',
selectorBlackList:[],
minPixelValue:1,
mediaQuery:true,
replace:true,
landscape:false
}
}
}
