公司让做两个移动端页面，挺简单，但是以前没有做过，一切都是摸索着来。以此纪念并记录第一次完整移动端开发。
选型
首先决定用vue，UI 框架开始的时候用的 mint-ui，后面感觉不好看，又调研了下，用了有赞的 vant。
搭建项目
用 vue-cli3 搭建。
vue-cli3 安装
如果以前安装了 vue-cli2，先把它全局卸载了。（要用 vue-cli3，如果以前安装了 vue-cli x 都需要卸载再安装 vue-cli3）
npm uninstall vue-cli -g
vue-cli3 需要 nodejs≥ 8.9 (官方推荐 8.11.0+
查看 node 版本号：
node -v
如果 nodejs 版本号过低，windows 下需要重新下载 node 安装包安装。
安装 @vue/cli (vue-cli3 的包名由 vue-cli 改为了 @vue/cli):
npm install -g @vue/cli //我在 git bash 下输入安装命令，久久没有反应，后面在 cmd 下输入命令才安装成功。
查看 vue-cli 版本：
vue -V
vue-cli3 创建项目
vue create <Project Name> //文件名 不支持驼峰（含大写字母）
输入创建命令后，紧接着是各种配置选择：手动配置，根据你需要用方向键选择（按 “空格键”选择/取消选择，A键全选/取消全选）对应功能。
安装完成
npm run serve // 启动项目
至此，项目已搭建完成。
开发依赖配置
选定 UI 框架是 vant，静态文件用 less，移动端 rem 适配用 postcss-px2rem-exclude， 分别安装依赖：
npm i vant -S
npm i less-loader -D
npm i postcss-px2rem-exclude -S
刚开始 rem 适配用的 px2rem ，但是会把 UI 组件里面的 px 也一起转了（UI 组件做了适配处理，不用转）。找到了 postcss-px2rem-exclude。安装了 px2rem 的话，需要卸载再装 postcss-px2rem-exclude。
npm install postcss-px2rem-exclude -S
配置 postcss-px2rem-exclude
在项目根目录 （src）下，新建 postcss.config.js 文件：
module.exports = {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude":{
"remUnit": 75, // 根大小 750px = 750/75 = 10 rem
"exclude":/node_modules/i //忽略 node_modules 目录下的所有文件
}
}
}
动态生成根元素大小， 在 main.js 里面加入
window.onresize = setHtmlFontSize
function setHtmlFontSize () {
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
const htmlDom = document.getElementsByTagName('html')[0]
htmlDom.style.fontSize = htmlWidth / 10 + 'px'
}
setHtmlFontSize()
其他配置(跨域配置等)
vue-cli3 创建的项目中，内置了 webpack 相关配置，所以没有了 webpack 配置文件，需要修改 webpack 配置的时候，在根目录下新建 vue.config.js。以下是我的配置：
module.exports = {
publicPath: 'xxx', // 根路径
devServer: {
disableHostCheck: true, // 项目中没有用到 socket，@vue/cli3 报 socket 连接错误，关闭 host 检查。
overlay:{ // 禁用 eslint 检查
warnings: false,
errors: false
},
proxy: { // 代理
'/api': {
target: 'http://www.example.com/xx', // 代理的目标地址 也可是 http://www.example.com
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
ws: false, // 是否开启 socket
pathRewrite: { // 重定向
'^/api': ' ' // 这种接口配置出来 /api/login ==> http://www.example/xx/login
// '^/api': '/api' 这种接口配置出来 /api/login ==> http://www.example/xx/api/login
// 我的理解是使用时候 api 代表的地址 = target + '^/api' 对应的 value
}
}
},
},
lintOnSave: false
}
main.js 相关
axios 配置，安装 axios
npm i axios -S
main.js 中引入 axios 并设置拦截器，将其挂载到 vue 实例上。
import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 拦截器设置
axios.interceptors.request.use((config) => {
if(store.getters.getToken){ // 统一在 header 中加入 token 参数
config.headers[tokenKey] = getToken();
}
return config
},(error) =>{
return Promise.reject(error)
})
axios.interceptors.response.use((res) => {
return res.data // 返回数据
},(error) =>{
return Promise.reject(error)
})
// 挂载实例
Vue.prototype.$http = axios
main.js 中引入 vant, mixin, router
// vant
import Vant from 'vant'
import 'vant/lib/index.css';
import mixin from '@/mixins/common'
import router from './router'
Vue.use(Vant)
Vue.mixin(mixin)
router.beforeEach((to, from, next) => { // 动态配置每个页面title
if(to.meta.title){
document.title = to.meta.title
}
next();
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
开始开发
配置好后的目录结构：
3.png
页面放在 views 中，assets 放静态文件， utils 里面是一些工具类。vue-cli3 中只有一个 store.js 文件。
安装 vuex :
npm i vuex -S
store.js :
import Vue from 'vue'
import Vuex from 'vuex'
import { getToken } from './utils/auth'
Vue.use(Vuex)
export default new Vuex.Store({
state: { // 相当于存储的变量声明， 类似 vue 文件中的 data，外部文件使用 state 中的变量 store.state.xxx
token: getToken(),
},
mutations: { // 修改变量，外部通过 mutations 改变值 commit('setToken', 'xxx')
setToken(state, token){
state.token = token
}
},
actions: {
},
getters: { // 取值 外部访问 store.getters.getToken
getToken(state){
return state.token;
}
}
})
然后哼唧哼唧写页面，配路由。
.......当当当当，开发完毕，大功告成。
网友评论