可以这样回答:
我做过很多项目,我就拿一个我自己单独开发的项目来说吧。。。。
这个项目的技术栈是Vue全家桶 + JavaScript。
做这个项目前需要配置环境 有开发环境,测试环境,上线环境，这三个，
以及：
rem配制方案(使用Vant)，
vm配置方案(使用Vant)，
VantUI组件的按需加载(使用Vant)，
Axios封装及接口管理，
配置proxy跨域，
添加IE兼容，
让项目后续的维护工作,更简单
添加IE兼容
使用core-js 和 regenerator-runtime
cnpm i --save core-js regenerator-runtime
在mian.js中添加
import 'core-js/stable'
import 'regenerator-runtiome/runtime'
配置babel.config.js
const plugins = []
module.exports = {
presets:[['@vue/cli-plugin-babel/preser',{useBuiltIns : 'usage' , corejs : 3}]]
}
rem配置方案
Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具:
- postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
- lib-flexible 用于设置 rem 基准值
安装并引入插件
1.安装依赖
cnpm i lib-flexible postcss-pxtorem --save-dev
2.mian.js导入
//移动端适配
import 'lib-flexible/flexible'
PostCSS配置
1.创建.postcssrc.js
下面提供一个基本的postcss配置,可以根据需求进行更改
module.exports = {
plugins:{
autoprefixer:{
overrideBrowserslist:['Android 4.1' , 'iOS 7.1' , 'Chrome > 31' , 'ff > 31' , 'ie >= 8']
},
'postcss-pxtorem':{
rootValue:75,
propList:['*']
}
}
}
Tips: 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译。
vm适配方案
1.安装依赖
cnpm i postcss-px-to-viewport -d
2.修改 .postcssrc.js
将根目录下 .postcssrc.js 文件修改
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
},
'postcss-px-to-viewport': {
viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
}
}
}
3.删除原来的rem相关代码
src/mian.js 删除如下代码
import 'lib-flexible/flexible.js'
package.json 删除如下代码
'lib-flexible' : "^0.3.2",
'postcss-pxtorem' : "^5.1.1"
Vant组件按需加载
采用Vant自动按需引入组件
babel-plugin-import 是一款 babel 插件,它会在编译过程中将import 的写法自动转换为按需引入的方式
安装插件
cnpm i babel-plugin-import -d
在babel.config.js 设置
const plugins = [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: true
},
'vant'
]
]
module.exports = {
presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
plugins
}
使用组件
项目在src/plugins/vant.js 下统一管理组件, 用那个引入那个,无需在页面上重复引用
import Vue from 'vue'
import { Button, List , Cell , Tabbar , TabbarItem } from 'vant'
Vue.use(Button)
Vue.use(Cell)
Vue.use(List)
Vue.use(Tabbar).use(TabbarItem)
Axios封装及接口
utils/request.js 封装axios,开发者需要根据后台接口做修改。
import axios from 'axios';
import store from '@/store';
import { Toast } from 'vant';
import { baseApi } from "@/config";
const service = axios.create({
baseURL:baseApi,
withCredentials:true,
timeout:1000*5
})
service.interceptors.request.use(config=>{
if(!config.hideloading){
Toast.loading({
forbidClick:true
})
}
if(store.getters.token) {
config.headers['X-Token'] = ''
}
return config
},error=>{
console.log(error)
return Promise.reject(error)
})
service.interceptors.response.use(response=>{
Toast.clear()
const res = response.data
if(res.status && res.status !== 200 ) {
if(res.status === 401 ){
store.dispatch('FedLogOut').then(()=>{
location.reload()
})
}
return Promise.reject(res || 'error')
}else{
return Promise.resolve(res)
}
},error=>{
Toast.clear()
console.log('err' + error)
return Promise.reject(error)
})
export default service
接口管理
在 src/api 文件夹下统一管理接口
- 可以建立多个模块对接接口,比如 home.js 里是首页的接口
- url 接口地址,请求的时候会拼接上config 下的 baseApi
- method 请求方法
- data 请求参数 qs.stringify(params)是对数据系列化操作
- hideloading默认false,设置为true后,不再显示loading ui 交互中有些接口不需要让用户感知
import qs from 'qs'
import request from '@/utils/request'
export function getUserInfo(params){
return request({
url:"/user/userinfo",
method:"post",
data:qs.stringify(params),
hideloading:true
})
}
如何调用
import { getUserInfo } from "@/api/user.js"
const params = { user:'sunnie' }
getUserInfo(params).then(()=>{}).catch(()=>{})
!!!注意：你还需要将 src/config/env.development.js 里的 baseApi 设置成 '/'
module.exports = {
devServer: {
// ....
proxy: {
//配置跨域
'/api': {
target: 'https://test.xxx.com', // 接口的域名
// ws: true, // 是否启用websockets
changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
pathRewrite: {
'^/api': '/'
}
}
}
}
}
使用 例如: src/api/home.js
export function getUserInfo(params) {
return request({
url: '/api/userinfo',
method: 'post',
data: qs.stringify(params)
})
}