Инженерная архитектура Vue для мобильных устройств уровня предприятия на основе Vue-Cli3

Vue.js

Инженерная архитектура Vue для мобильных устройств уровня предприятия на основе Vue-Cli3

Этот проект представляет собой инженерный проект мобильного уровня предприятия, основанный на строительных лесах Vue-Cli3 и использующий адаптивное решение VW Структура проекта будет построена шаг за шагом ниже. Вы также можете загрузить исходный код и взглянуть на него, а затем проследить за работой.

Author: Gavin

адрес проекта:GitHub.com/powerDOS/vu…

демо

Ниже приведена карта git адаптивного эффекта, которая относительно велика и требует терпения, чтобы увидеть ее, или загрузить изображение напрямую, чтобы просмотреть эффект [i.LOLI.net/2019/12/03/…]

在这里插入图片描述

Каталог проекта

Здесь показана окончательная структура каталогов для удобства просмотра Я объясню шаг за шагом и создам этот каталог позже.

.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   └── index.html
├── src
│   ├── App.vue
│   ├── api
│   │   └── homeApi.js
│   ├── assets
│   │   ├── img
│   │   │   └── head.png
│   │   └── scss
│   │       └── global.scss
│   ├── components
│   │   └── Footer.vue
│   ├── main.js
│   ├── page
│   │   └── Home.vue
│   ├── router
│   │   └── index.js
│   ├── store
│   │   ├── actions.js
│   │   ├── getters.js
│   │   ├── index.js
│   │   ├── modules
│   │   │   └── home.js
│   │   └── mutations.js
│   └── utils
│       ├── http.js
│       └── tool.js
└── vue.config.js

Базовое создание проекта

Создать проект

$: vue create vue_cli_3_mobile_vm_demo

Выберите режим по умолчанию

$: Please pick a preset: **default (babel, eslint)

Завершение зависимостей Eslint

$: npm install eslint-config-standard eslint-friendly-formatter eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --save-dev

Настройка правил Eslint

Настройте единые правила, команда разработает единые спецификации и создаст файл .eslintrc.js в корневом каталоге. (PS: После настройки правил необходимо установить плагин Eslint в соответствии с собственными средствами разработки, такими как VSCode, установить плагин ESLint)

Вы можете указать правила в соответствии с привычками вашей команды.

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    "semi": [2, "always"],
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

Поддержка SASS/SCSS

$: npm install sass-loader node-sass --save-dev

Создайте глобальный SCSS

Создайте глобальный файл scss ./src/scss/global.scss

// 文件中可以写全局的变量，包括字体大小，主题色，边距大小等，这样可以方便后面整个项目风格修改

// 主题 - 蓝
$primary-color: #03A9F4;
$primary-color-dark: #409EFF;
$primary-color-light:#B3E5FC;
$primary-color-rgba-1: rgba(3,169,244,.1);
$primary-color-rgba-2: rgba(3,169,244,.2);
$background-color: #F0F2F5;

// 文字样式
$title-text-color: #303133;
$normal-text-color: #606266;
$sub-text-color: #909399;
$temp-text-color: #C0C4CC;

Создайте vue.config.js в корневом каталоге и добавьте глобальные файлы.

module.exports = {
...
  css: {
    loaderOptions: {
      sass: {
        // 根据自己样式文件的位置调整
        prependData: '@import "@/assets/scss/global.scss";'
      }
    }
  }
...
};

мобильный адаптивный

Подробности можно узнать на https://www.w3cplus.com/css/vw-for-layout.html Здесь приведены некоторые принципы, которые здесь не будут раскрываться.

Установить зависимости

$: npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units postcss-import postcss-cssnext cssnano cssnano-preset-advanced postcss-import postcss-url --save-dev

Настройте правила, измените vue.config.js

module.exports = {
...
  css: {
    loaderOptions: {
      sass: {
        // 根据自己样式文件的位置调整
        prependData: '@import "@/assets/scss/global.scss";'
      },
      postcss: {
        plugins: [
          require('postcss-px-to-viewport')({
            viewportWidth: 750,
            viewportHeight: 1334,
            unitPrecision: 3,
            viewportUnit: 'vw',
            "selectorBlackList": [".ignore", ".hairlines"], // 这里是过滤不转换的css，支持正则，如果框架本身把单位写死支持移动端，可以通过这个过滤掉，比如vux UI框架需要过滤掉['.ignore', '.hairlines', /^\.weui/, /^\.dp/, /^\.scroller/, /^\.ignore/],
            minPixelValue: 1,
            mediaQuery: false
          })
        ]
      }
    }
  }
...
};

Создание каталога проекта

Добавьте маршрутизацию Vue-Router, хранилище состояний Vuex, аксиомы HTTP-запросов.

$: npm install vue-router veux axios --save

Создайте каталог проекта в папке src

.
├── App.vue              // VUE总入口
├── api                  // API请求文件夹
│   └── homeApi.js       // 分模块写请求文件
├── assets               // 静态文件
│   ├── img              // 图片资源
│   │   └── head.png
│   └── scss             // scss样式资源
│       └── global.scss
├── components           // 抽象出来的组建
│   └── SubTitle.vue
├── main.js              // Vue主文件
├── page                 // 应用页面
│   └── Home.vue
├── router               // 路由
│   └── index.js
├── store                // 状态存储
│   ├── actions.js
│   ├── getters.js
│   ├── index.js
│   ├── modules
│   │   └── home.js
│   └── mutations.js
└── utils                // 工具
    ├── http.js
    └── tool.js

Файл mian представляет vue-router и vuex.

import Vue from 'vue';
import App from './App.vue';
import router from './router/index';
import store from './store/index';

Vue.config.productionTip = false;

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app');

App.vue импортирует маршруты

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {}
};
</script>

<style>
/* 去除默认自带的所有边距 */
html, body {
  margin: 0px;
  padding: 0px;
}
</style>

создание маршрута

Создайте ./src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';

import Home from '@/page/Home';

Vue.use(Router);

export default new Router({
  routes: [
    // 登陆
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
});

Создать хранилище состояний

Самый внешний уровень — это глобальное управление состоянием (action.js/getters.js/index.js/mutations.js), а модули децентрализованы для отдельного хранилища состояния каждого модуля.Вы можете скачать проект, чтобы увидеть конкретное содержимое кода.

.
├── actions.js
├── getters.js
├── index.js
├── modules
│   └── home.js
└── mutations.js

Показать index.js здесь

import Vue from 'vue';
import Vuex from 'vuex';

// 引入全局存储
import * as actions from './actions';
import * as mutations from './mutations';
import * as getters from './getters';

// 引入模块存储
import home from './modules/home';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    globalFlag: 0
  },
  actions,
  mutations,
  getters,
  modules: {
    home
  }
});

Внедрить структуру пользовательского интерфейса

Вот пример введения пользовательского интерфейса Vant.

установить вант

$: npm install vant --save

Внедрить по требованию

Установите зависимости загрузки по требованию,babel-plugin-importЭто плагин для Babel, который автоматически преобразует метод импорта в метод импорта по запросу в процессе компиляции.

$: npm install babel-plugin-import --save-dev

Настройте babel, измените babel.config.js в корневом каталоге

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant'
    ]
  ]
};

Отфильтровать единицы пикселей в ВМ

Так как сам Vant UI идет с самоадаптацией, нет необходимости конвертировать его в vw unit, мы можем отфильтровать его на postcss и модифицировать файл vue.config.js в корневом каталоге.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 根据自己样式文件的位置调整
        prependData: '@import "@/assets/scss/global.scss";'
      },
      postcss: {
        plugins: [
          require('postcss-px-to-viewport')({
            viewportWidth: 750,
            viewportHeight: 1334,
            unitPrecision: 3,
            viewportUnit: 'vw',
            selectorBlackList: ['.ignore', '.hairlines', /^\.dp/, /^\.scroller/, /^\.van/], // 这里是过滤不转换的css，支持正则，如果框架本身把单位写死支持移动端，可以通过这个过滤掉
            minPixelValue: 1,
            mediaQuery: false
          })
        ]
      }
    }
  }
};

demo

<template>
  <div class="home-container">
    <!-- 导航 -->
    <van-nav-bar :title="title" left-text="返回" left-arrow>
      <van-icon name="shopping-cart-o" slot="right" info="9" size="20px"/>
    </van-nav-bar>
    <!-- 通知栏 -->
    <van-notice-bar :text="notify" left-icon="volume-o" />
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white" class="swipe-container">
      <van-swipe-item class="swipe-box swipe-color-1">1</van-swipe-item>
      <van-swipe-item class="swipe-box swipe-color-2">2</van-swipe-item>
      <van-swipe-item class="swipe-box swipe-color-3">3</van-swipe-item>
      <van-swipe-item class="swipe-box swipe-color-4">4</van-swipe-item>
    </van-swipe>
    <!-- 菜单 -->
    <van-grid :column-num="3">
      <van-grid-item icon="like-o" text="收藏" />
      <van-grid-item icon="clock-o" text="历史订单" />
      <van-grid-item icon="balance-o" text="资金管理" />
      <van-grid-item icon="setting-o" text="设置" />
      <van-grid-item icon="location-o" text="收货地址" />
      <van-grid-item icon="service-o" text="服务中心" />
    </van-grid>
    <!-- 懒加载 -->
    <van-skeleton title avatar :row="3" class="skeleton-box"/>
    <van-skeleton title avatar :row="3" class="skeleton-box"/>
    <van-skeleton title avatar :row="3" class="skeleton-box"/>
    <!-- 底部 -->
    <Footer :msg="copyright"></Footer>
  </div>
</template>

<script>
import { Icon, NavBar, NoticeBar, Grid, GridItem, Swipe, SwipeItem, Skeleton } from 'vant';
import Footer from '@/components/Footer';
import { mapState } from 'vuex';
export default {
  name: 'Home',
  components: {
    Footer,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [NoticeBar.name]: NoticeBar,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Skeleton.name]: Skeleton
  },
  data () {
    return {
      title: 'Vue 企业级工程架构',
      notify: '本项目是基于Vue-Cli3脚手架，应用VW的自适应解决方案构建的移动端企业级工程项目，下面会一步步构建起项目结构，方便大家了解整个过程。'
    };
  },
  computed: {
    ...mapState(['copyright'])
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  .swipe-container {
    height: 380px;
    .swipe-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-size: 58px;
      color: #fff;
    }
    .swipe-color-1 {
      background-color: #845EC2;
    }
    .swipe-color-2 {
      background-color: #FFC75F;
    }
    .swipe-color-3 {
      background-color: #008E9B;
    }
    .swipe-color-4 {
      background-color: #4D8076;
    }
  }
  .skeleton-box {
    margin-top: 15px;
  }
}
</style>

Эффект

image.png

Конфигурация разработки

Поскольку в большинстве случаев мы разрабатываем локально и запрашиваем серверные службы, мы можем напрямую настроить адрес тестового сервера или локальный адрес службы в vue.config.js, чтобы мы могли напрямую тестировать серверную часть локально. междоменные проблемы

Настройте vue.config.js в корневом каталоге

module.exports = {
...
  devServer: {
    proxy: {
      '/api': { // 需要转发的接口，如果全转发就设置根就行/
        target: 'http://xxxx:8080/', // 对应自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
...
};
Категории