Создайте каркас многостраничного шаблона на основе vue-cli4.0!

Vue.js

vue-cli4 многостраничный

multipage

адрес гитхаба GitHub.com/Qin Europe/Му плодородные поля…
Создайте каркас многостраничного шаблона на основе vue-cli4.0!

Стартовый проект


git clone https://github.com/qinouz/multipage.git

cd multipage

npm install

npm run dev

содержание

✅ Создать многостраничную конфигурацию

build/newUtils.jsвнутреннийgetEntryМетод Создайте путь к странице и соответствующий html-объект в соответствии со всеми html-файлами в каталоге.
var pages = utils.getEntry(['./src/module/**/*.html']);

Возвращаемый результат:

{ 'aa/as/dd/fd/ddd': './src/module/aa/as/dd/fd/ddd/ddd.html',
   'aa/ddd': './src/module/aa/ddd/ddd.html',
   'ss': './src/module/ss/ss.html' 
 }

getEntryPagesметодvar mpages = utils.getEntryPages(pages);Чтобы создать окончательную многостраничную конфигурацию, структура каталогов должна соответствовать определенным правилам. Имя папки должно совпадать с именем основного файла и именем файла шаблона html, а иерархическая структура не ограничена.

  ├── module
  │   └── ss
  |   |   └── ss.html
  |   |   └── ss.js

Возвращаемый результат:

{ 'aa/as/dd/fd/ddd':{ entry: './src/module/aa/as/dd/fd/ddd/ddd.js',
     template: './src/module/aa/as/dd/fd/ddd/ddd.html' },
  'aa/ddd':{ entry: './src/module/aa/ddd/ddd.js',
     template: './src/module/aa/ddd/ddd.html' },
  ss:{ entry: './src/module/ss/ss.js',
     template: './src/module/ss/ss.html' } }

✅ Настройка нескольких переменных среды

package.jsonвнутреннийscriptsнастроитьdev qa prd,пройти через--mode xxxвыполнять в различных средах

  • пройти черезnpm run devзапустить локально, выполнитьdevelopment
  • пройти черезnpm run qaпакетный тест, выполнитьstaging
  • пройти черезnpm run prdОфициально упаковано, выполненоproduction 
"scripts": {
  "dev": "vue-cli-service serve --open",
  "stage": "vue-cli-service build --mode staging",
  "build": "vue-cli-service build",
}
Введение в конфигурацию

кVUE_APP_Переменные в начале кода можно передавать в кодprocess.env.VUE_APP_доступ. Например,VUE_APP_ENV = 'development'пройти черезprocess.env.VUE_APP_ENVдоступ. КромеVUE_APP_*В дополнение к переменным есть две специальные переменные, которые всегда доступны в коде вашего приложения.NODE_ENVа такжеBASE_URL

Создайте новый проект в корневом каталоге проекта.env.*

  • .env конфигурация локальной среды разработки
NODE_ENV = development
VUE_APP_SERVICE_URL =
BASE_URL = ./
  • .env.qa конфигурация тестовой среды
NODE_ENV = production
VUE_APP_SERVICE_URL = http://www.baidu.com
BASE_URL = /shopsystem/static/weixin/dist/
  • .env.prd официальная конфигурация среды
 NODE_ENV = production
 VUE_APP_SERVICE_URL = http://www.baidu.com
 BASE_URL = /shopsystem/static/weixin/dist/

Настройте переменные, соответствующие среде, и возьмите локальный файл среды..envНапример, пользователи могут изменять в соответствии со своими потребностями.

// 本地环境配置
NODE_ENV = development
VUE_APP_SERVICE_URL =
VUE_APP_TEST=test
BASE_URL = ./

В зависимости от окружения переменные будут разными

// 根据环境不同引入不同baseApi地址
const instance = axios.create();
var path = process.env.VUE_APP_SERVICE_URL;
instance.defaults.baseURL = path;

▲ вернуться к началу

✅ план адаптации рем

Не волнуйтесь, проект уже настроенremАдаптация, нижеследующее является только введением:

Стили в Ванте используются по умолчаниюpxВ качестве единицы, если вам нужно использоватьremединиц, рекомендуются следующие два инструмента:

  • postcss-pxtoremэтоpostcssПлагин для преобразования единиц вrem
  • lib-flexibleдля установкиremИсходная величина
Конфигурация PostCSS

Ниже приведены основныеpostcssКонфигурация, которая может быть изменена на основе этой конфигурации в соответствии с требованиями проекта

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    postcss: {
      plugins: [
        require('postcss-pxtorem')({
          rootValue: 37.5, // 换算的基数
          selectorBlackList: [], // 忽略转换正则匹配项
          propList: ['*'],
        }),
      ]
    }
  }
}

▲ вернуться к началу

Родительский компонент изменяет стиль дочернего компонента Глубокий селектор

когда ваш дочерний компонент используетscopedНо если вы хотите изменить стиль дочернего компонента в родительском компоненте, вы можете передать>>>реализовать:

<style scoped>
.a >>> .b { /* ... */ }
.a {
    /deep/ .b {
        ...
    }
}
</style>

▲ вернуться к началу

✅ Управление состоянием Vuex

Структура каталогов

├── store
│   ├── modules
│   │   └── app.js
│   ├── index.js
│   ├── getters.js

main.jsпредставлять

import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

использовать

<script>
  import {mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapGetters(['userName'])
    },

    methods: {
      // Action 通过 store.dispatch 方法触发
      doDispatch() {
        this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')
      }
    }
  }
</script>

▲ вернуться к началу

✅ Vue-роутер

Этот случай принимаетhashМодель, разработчики модифицированы по требованиюmode base

Уведомление: если вы использовалиhistoryмодель,vue.config.jsсерединаpublicPathсделать соответствующиеИсправлять

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

Vue.use(Router)
export const router = [
  {
    path: '/',
    name: 'index',
    component: () => import('@/views/home/index'), // 路由懒加载
    meta: {
      title: '首页', // 页面标题
      keepAlive: false // keep-alive 标识
    }
  }
]
const createRouter = () =>
  new Router({
    // mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath
    // base: '/app/',
    scrollBehavior: () => ({y: 0}),
    routes: router
  })

export default createRouter()

Более:Vue Router

▲ вернуться к началу

✅ Настроить псевдоним псевдонима

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

module.exports = {
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
  }
}

▲ вернуться к началу

✅ Настроить междоменный прокси

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

module.exports = {
  devServer: {
    // ....
    proxy: {
      //配置跨域
      '/api': {
        target: 'https://test.xxx.com', // 接口的域名
        // ws: true, // 是否启用websockets
        changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
}

▲ вернуться к началу

✅ Анализ упаковки конфигурации

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  chainWebpack: config => {
    // 打包分析
    if (IS_PROD) {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static'
        }
      ])
    }
  }
}
Категории