wode项目开发流程(项目开发前配置)

一、搭建vue项目

在这里我使用的vue3，因为vue搭建项目方便，体积小，也是现阶段的主流，npm create 项目名

二、配置多环境变量

因为这个项目从开发到上线需要经历三个阶段：开发、测试、上线。为了方便后面的操作，提前配置环境变量

1、package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境

• 通过 npm run serve 启动本地 , 执行 development
• 通过 npm run stage 打包测试 , 执行 staging
• 通过 npm run build 打包正式 , 执行 production

"scripts": {"serve": "vue-cli-service serve","stage": "vue-cli-service build --mode staging","build": "vue-cli-service build",
}

2、在根目录新建3个以.env.开头的文件,存放变量

• .env.development 本地开发环境配置

NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'

• .env.staging 测试环境配置

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

• .env.production 正式环境配置

 NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV development staging production变量我们统一在 src/config/env.*.js 里进行管理。

3、在src目录中新建config文件夹，再新建三个相对应的js文件，存放公共的baseUrl

配置对应环境的变量，拿本地环境文件 env.development.js 举例，用户可以根据需求修改

// 本地环境配置
module.exports = {title: 'vue-h5-template',baseUrl: 'http://localhost:9018', // 项目地址baseApi: 'https://test.xxx.com/api', // 本地api请求地址APPID: 'xxx',APPSECRET: 'xxx'
}

4、在config文件中新建index.js文件

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

5、把index.js文件引入到调用函数方法的文件中（http/index.js）

// 根据环境不同引入不同baseApi地址
import { baseApi } from '@/config'
console.log(baseApi)

这样多环境变量就配置好了。修改起来方便，不需要重启项目，符合开发习惯

三、 Axios 封装及接口管理

1、在src目录中新建http文件夹，在这个文件夹新建三个js文件api.js request.js index.js

api.js
是对接口的统一管理。

request.js
在这里可以做axios拦截

• service.interceptors.request.use是请求拦截，这里可以设置请求头，比如token，还可以设置loading懒加载效果
• service.interceptors.response.use是响应拦截，这里可以关闭懒加载效果，还可以做判断登录超时的操作

import axios from 'axios'
import store from '@/store'
import { Toast } from 'vant'
// 根据环境不同引入不同api地址
import { baseApi } from '@/config'
// create an axios instance
const service = axios.create({baseURL: baseUrl, // url = base api url + request urlwithCredentials: true, // send cookies when cross-domain requeststimeout: 5000 // request timeout
})// request 拦截器 request interceptor
service.interceptors.request.use(config => {// 不传递默认开启loadingif (!config.hideloading) {// loadingToast.loading({forbidClick: true})}if (store.getters.token) {//附加到请求头上config.headers.authorization = store.getters.token}return config},error => {// do something with request errorconsole.log(error) // for debugreturn Promise.reject(error)}
)
// respone拦截器
service.interceptors.response.use(response => {Toast.clear()const res = response.dataif (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) // for debugreturn Promise.reject(error)}
)
export default service

index.js
存放封装接口的方法

• url 接口地址，请求的时候会拼接上 config 下的 baseUrl
• method 请求方法
• data 请求参数 qs.stringify(params) 是对数据系列化操作
• hideloading 默认 false,设置为 true 后，不显示 loading ui 交互中有些接口不需要让用户感知

// 根据环境不同引入不同baseApi地址
import { baseUrl } from '@/config'
import qs from 'qs'
// axios
import request from '@/utils/request'
//user api// 用户信息
export function getUserInfo(params) {return request({url: baseURL+baseUrl.xxx,method: 'post',data: qs.stringify(params),hideloading: true // 隐藏 loading 组件})
}

2、把这个request.js挂载到main.js中

import http from "./http/request"
Vue.prototype.$http=http

3、在组建中使用

<script>
export default {methods:{async getUserInfo(){let obj = {}let res = await this.$http.getUserInfo(obj)console.log(res)}},mounted(){this.getUserInfo()}}
</script>

四、适配rem

需要下载两个插件

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible用于设置 rem 基准值

1、安装插件

cnpm install lib-flexible postcss-pxtorem --save-dev

2、main.js导入

// 移动端适配import ‘lib-flexible/flexible’; 

3、在根目录新建.postcss.config.js文件

module.exports = {plugins: {autoprefixer: {overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']},'postcss-pxtorem': {rootValue: 75,propList: ['*']}}
}

五、VantUI组件按需加载

babel-plugin-import是一款 babel 插件，它会在编译过程中将
import 的写法自动转换为按需引入的方式

1、安装插件

npm i babel-plugin-import -D

2、在 babel.config.js 设置

// 对于使用 babel7 的用户，可以在 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
}

3、使用组件

项目在 src/plugins/vant.js 下统一管理组件，用哪个引入哪个，无需在页面里重复引用

// 按需全局引入 vant组件
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)

4、在main.js中引入

import "./plugins/vant.js"

六、vuex的配置

请点击：vuex

七、scss混合（mixins）使用

使用混合mixins中的变量来定义一个n行文本溢出隐藏的公用样式。
1、创建mixins.scss文件

//文本n行溢出隐藏
@mixin ellipsisBasic($clamp:2) {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;
}

以上代码中，$clamp是变量，决定最多显示几行文本，默认是显示2行，调用的时候可自行传参设置。

2、在组件中使用

<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/assets/css/mixin.scss';//引用此混合样式p {line-height: 0.42rem;@include ellipsisBasic;//使用此混合样式，默认显示2行}p {width: 100%;line-height: 0.42rem;@include ellipsisBasic(3);//使用此混合样式，默认显示3行font-size: 0.28rem;margin-top: 0.37rem;}   
</style>

还可以添加其他的公共样式，比如：清除浮动，公共的颜色也可以使用

八、使用公共的方法

在项目开发中，多个组件可能会用到一个共同方法，比如时间格式的转换，防抖函数，节流函数
1、首先新建一个文件夹：commonFunction ,然后在里面建立 一个文件common.js

建立好之后，在main.js里面引入这个公共方法

最后是调用这个公共方法

测试一下，我在公共方法里面写了一个简单的一段代码如下：

export default{login:function(){console.log("1111");}
}

如果在我的login.vue里面控制台输出了：1111，那就说明了我的引入是对的
如下：

正在完善中···