搭建一个vue-cli + ant design pro移动端开发模板

利用vue-cli + vant搭建一个移动端开发模板

 

 

 

本文系原创，转载请附带作者信息。项目地址： https://github.com/momozjm/vant-project.git

前言

在项目开发过程中，一个新的项目需要我们从零开始搭建框架，这个时候我们就可以用网上很多的脚手架进行开发，但是我们在业务开发时，还需要对项目的架构进行完善。如果有一个类似于ant design pro这种类型的项目可以拿来即用，不需要过多的配置，就可以进行开发的话，岂不是美滋滋。

所以说为了便于后期的快速开发，我决定利用vue-cli+vant来打造一个移动端开发的模板，后期进行迭代，完善功能。

项目功能模块（不断更新中...）

项目代码

整个项目的脚手架是用vue-cli生成的，具体的生成方式可以自己网上查阅。下面我就简单介绍一下项目中添加了哪些功能模块

一、rem的适配

使用postcss-pxtorem与flexable.js结合的形式，适配各类机型。此配置是以2倍屏的基础来配置的，也就是说你的设计图也是以2倍屏设计的，这样设计图上的px值是多少你就可以直接拷过来，省去了px转rem的换算。

1：postcss-pxtorem的配置：在vue.config.js中添加如下代码(需要自己新建vue.config.js文件)

css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, // 换算的基数
            propList: ['*'], }), ] } } } 

2：flexable.js。文件路径src>utils>flexable.js(我一般把项目需要的公共方法或者配置放在utils文件夹下)

!function (n) {
    var e = n.document,
        t = e.documentElement,
        i = 750, d = i / 100, o = "orientationchange" in n ? "orientationchange" : "resize", a = function () { var n = t.clientWidth || 320; n > 750 && (n = 750); t.style.fontSize = n / d + "px" }; e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1)) }(window) 

3:在main.js中引入flexable.js

import '@/utils/flexable'

二、axios请求封装

1：request.js。文件路径src>utils>request.js

import axios from 'axios'

// 创建 axios 实例
const service = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url timeout: 6000 // 请求超时时间 }) const err = (error) => { if (error.response) { if (error.response.status !== 200) { console.log(error) return } } return Promise.reject(error) } // request interceptor service.interceptors.request.use(config => { // const token = 'token' // if (token) { // config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改 // } return config }, err) // response interceptor service.interceptors.response.use((response) => { return response.data }, err) export { service as axios } 

三、vuex

在views下新建了一个About.vue。在此组件中走了一遍异步获取数据的流程（接口是乱写的，报404）。大致流程为：页面触发action ---> action中异步回去数据并commit一个mutations ---> mutations中修改state里的值 ---> 视图更新

1:About.vue

<template>
  <div class="about"> <Button type="primary" @click="getDetail" id="detail">点击调用接口获取详情</Button> <router-link to="/">Home</router-link> <router-link to="/scroll">Scroll</router-link> </div> </template> <script> import { mapState, mapActions } from "vuex"; import { Button } from "vant"; export default { computed: { ...mapState("about", ["detail"]) }, created() { // this.getDetail(); }, methods: { ...mapActions("about", ["getDetail"]) }, components: { Button } }; </script> <style lang="less"> .about { height: 100vh; font-size: 14px; } #detail { font-size: 14px; } </style> 

2：index.js。文件文职@>store>index.js

import Vue from 'vue'
import Vuex from 'vuex' import about from './modules/about' // import scroll from './modules/scroll' Vue.use(Vuex) export default new Vuex.Store({ modules: { about, // scroll }, }) 

3：about.js。文件位置@>store>modules>about.js

import { getDetailApi } from '@/api/api'

const state = {
  detail: {} } const mutations = { setDetail: (state, data) => { state = { ...state, detail: data } } } const actions = { getDetail({ commit }) { getDetailApi().then(res => { commit('setDetail', res) }) }, } export default { namespaced: true, state, mutations, actions } 

4:api.js。 文件位置@>api>api.js

import { axios } from '@/utils/request'

const api = {
  // 获取详情 detail: '/detail' } export function getDetailApi(parameter) { console.log(parameter) return axios({ url: api.detail, method: 'get' }) } // export function getDetail() { // return axios({ // url: api.detail, // method: 'post', // data: {} // }) // } 

四、Vant

新建一个页面添加了下拉刷新和上拉加载功能。后续会以组件的形式再封装一些常用的功能。

Vant没有在main.js里全局注册，而是使用动态引入的方式。根目录新建.babelrc

{
    "plugins": [
      ["import", {
        "libraryName": "vant",
        "libraryDirectory": "es", "style": true }] ] } 

五、webpack配置

vue-cli3以后生成的项目，修改webpack都要在项目根目录新建一个vue.config.js来修改你的配置

module.exports = {
  lintOnSave: true,
  // 生产环境打包资源路径
  publicPath: '/', outputDir: "dist", assetsDir: "static", // postcss-pxtorem配置 css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 37.5, // 换算的基数 propList: ['*'], }), ] } } }, // 代理 devServer: { // development server port 8000 // port: 8000, // // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11 // proxy: { // "/api": { // // target: "http://xx.xx.xx.xx:xxxx/", // changeOrigin: true, // pathRewrite: { // '^/api': '/' // } // } // } }, // 生产环境去掉sourceMap productionSourceMap: false, } 

总结

这个框架只具备开发vue + vant的基本功能，总体上的目标算是达到了，后续也会迭代添加一些组件或者功能。整个过程中算是对自己架构能力进行一些锻炼。

本文系原创，转载请附带作者信息。项目地址： https://github.com/momozjm/vant-project.git

前言

在项目开发过程中，一个新的项目需要我们从零开始搭建框架，这个时候我们就可以用网上很多的脚手架进行开发，但是我们在业务开发时，还需要对项目的架构进行完善。如果有一个类似于ant design pro这种类型的项目可以拿来即用，不需要过多的配置，就可以进行开发的话，岂不是美滋滋。

所以说为了便于后期的快速开发，我决定利用vue-cli+vant来打造一个移动端开发的模板，后期进行迭代，完善功能。

项目功能模块（不断更新中...）

项目代码

整个项目的脚手架是用vue-cli生成的，具体的生成方式可以自己网上查阅。下面我就简单介绍一下项目中添加了哪些功能模块

一、rem的适配

使用postcss-pxtorem与flexable.js结合的形式，适配各类机型。此配置是以2倍屏的基础来配置的，也就是说你的设计图也是以2倍屏设计的，这样设计图上的px值是多少你就可以直接拷过来，省去了px转rem的换算。

1：postcss-pxtorem的配置：在vue.config.js中添加如下代码(需要自己新建vue.config.js文件)

css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, // 换算的基数
            propList: ['*'], }), ] } } } 

2：flexable.js。文件路径src>utils>flexable.js(我一般把项目需要的公共方法或者配置放在utils文件夹下)

!function (n) {
    var e = n.document,
        t = e.documentElement,
        i = 750, d = i / 100, o = "orientationchange" in n ? "orientationchange" : "resize", a = function () { var n = t.clientWidth || 320; n > 750 && (n = 750); t.style.fontSize = n / d + "px" }; e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1)) }(window) 

3:在main.js中引入flexable.js

import '@/utils/flexable'

二、axios请求封装

1：request.js。文件路径src>utils>request.js

import axios from 'axios'

// 创建 axios 实例
const service = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url timeout: 6000 // 请求超时时间 }) const err = (error) => { if (error.response) { if (error.response.status !== 200) { console.log(error) return } } return Promise.reject(error) } // request interceptor service.interceptors.request.use(config => { // const token = 'token' // if (token) { // config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改 // } return config }, err) // response interceptor service.interceptors.response.use((response) => { return response.data }, err) export { service as axios } 

三、vuex

在views下新建了一个About.vue。在此组件中走了一遍异步获取数据的流程（接口是乱写的，报404）。大致流程为：页面触发action ---> action中异步回去数据并commit一个mutations ---> mutations中修改state里的值 ---> 视图更新

1:About.vue

<template>
  <div class="about"> <Button type="primary" @click="getDetail" id="detail">点击调用接口获取详情</Button> <router-link to="/">Home</router-link> <router-link to="/scroll">Scroll</router-link> </div> </template> <script> import { mapState, mapActions } from "vuex"; import { Button } from "vant"; export default { computed: { ...mapState("about", ["detail"]) }, created() { // this.getDetail(); }, methods: { ...mapActions("about", ["getDetail"]) }, components: { Button } }; </script> <style lang="less"> .about { height: 100vh; font-size: 14px; } #detail { font-size: 14px; } </style> 

2：index.js。文件文职@>store>index.js

import Vue from 'vue'
import Vuex from 'vuex' import about from './modules/about' // import scroll from './modules/scroll' Vue.use(Vuex) export default new Vuex.Store({ modules: { about, // scroll }, }) 

3：about.js。文件位置@>store>modules>about.js

import { getDetailApi } from '@/api/api'

const state = {
  detail: {} } const mutations = { setDetail: (state, data) => { state = { ...state, detail: data } } } const actions = { getDetail({ commit }) { getDetailApi().then(res => { commit('setDetail', res) }) }, } export default { namespaced: true, state, mutations, actions } 

4:api.js。 文件位置@>api>api.js

import { axios } from '@/utils/request'

const api = {
  // 获取详情 detail: '/detail' } export function getDetailApi(parameter) { console.log(parameter) return axios({ url: api.detail, method: 'get' }) } // export function getDetail() { // return axios({ // url: api.detail, // method: 'post', // data: {} // }) // } 

四、Vant

新建一个页面添加了下拉刷新和上拉加载功能。后续会以组件的形式再封装一些常用的功能。

Vant没有在main.js里全局注册，而是使用动态引入的方式。根目录新建.babelrc

{
    "plugins": [
      ["import", {
        "libraryName": "vant",
        "libraryDirectory": "es", "style": true }] ] } 

五、webpack配置

vue-cli3以后生成的项目，修改webpack都要在项目根目录新建一个vue.config.js来修改你的配置

module.exports = {
  lintOnSave: true,
  // 生产环境打包资源路径
  publicPath: '/', outputDir: "dist", assetsDir: "static", // postcss-pxtorem配置 css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 37.5, // 换算的基数 propList: ['*'], }), ] } } }, // 代理 devServer: { // development server port 8000 // port: 8000, // // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11 // proxy: { // "/api": { // // target: "http://xx.xx.xx.xx:xxxx/", // changeOrigin: true, // pathRewrite: { // '^/api': '/' // } // } // } }, // 生产环境去掉sourceMap productionSourceMap: false, } 

总结

这个框架只具备开发vue + vant的基本功能，总体上的目标算是达到了，后续也会迭代添加一些组件或者功能。整个过程中算是对自己架构能力进行一些锻炼。