前提條件:
node版本:14.15.1? npm版本:6.14.8? vue-cli版本:4.5.12 vue版本:2.x 移動ui框架:mint-ui http請求:axios
初始化項目
初始化項目: vue create 項目名字
1.根據(jù)提示進行相應的配置，選取必要的模塊
2.選擇項目需要的一些特性(此處我們選擇需要Babel編譯、使用vue路由、vuex狀態(tài)管理器、css預處理器、eslint代碼檢測和格式化)
3.選擇vue版本,在這里我們選擇2.x
4.選擇路由模式,在這里我們選擇兼容性比較好的hash模式
5.選擇css預處理語言,在這里我們選擇less
6.選擇ESlint代碼規(guī)范,在這里我們使用ESLint+Prettier代碼規(guī)范
7.選擇保存的時候啟用lint格式化
8.配置信息分開保存還是單獨一個文件保存，選擇分開保存
9.是否將當前設置作為預設,選擇否
10.項目生成中
11.配置完成后Vue-cli完成初始化
12.根據(jù)命令提示 進行項目 并啟動項目
安裝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
在項目根目錄下創(chuàng)建vue.config.js文件 在文件里面配置:
module.exports ={
pluginOptions:{
????'style-resources-loader':{
? ? ????preProcessor:'less',
? ? ????patterns:['src/assets/styles/global.less']? ?
????????}
????}
}
在項目中設置prettier規(guī)則
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
在根目錄下創(chuàng)建.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
}
}
}
