zoukankan      html  css  js  c++  java

  • 如何用vue-cli4.0构建多页面模板脚手架!？本文实战教你

    multipage

    Github地址 github.com/qinouz/mult…
    基于 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' 
 }另外我搞前端开发9年了。如果大家有问题或者交流经验可以来我的扣扣裙 519293536 找 我 都会尽力帮大家哦
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 适配方案

    不用担心，项目已经配置好了 rem 适配, 下面仅做介绍：

    Vant 中的样式默认使用px作为单位，如果需要使用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-router

    本案例采用 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

    ▲ 回顶部

    ✅ 配置 alias 别名

    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'))
  }
}
复制代码

    ▲ 回顶部

    ✅ 配置 proxy 跨域

    如果你的项目需要跨域设置，你需要打来 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'
        }

    以上的都会了吗？另外我搞前端开发9年了。如果你有问题或者交流经验可以来我的扣扣裙 519293536 找 我 都会尽力帮大家哦
    本文的文字及图片来源于网络加上自己的想法,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理
    前端5
  • 相关阅读:
    array常用方法总结
    .babelrc参数小解
    async/await方法解析
    html5-entities.js消失问题
    h => h(App)解析
    package.json字段简要解析
    body-parser小解
    mongodb中的__v字段
    module.exports与exports
    freemarker判断对象是否为空
  • 原文地址：https://www.cnblogs.com/chengxuyuanaa/p/13156378.html
Copyright © 2011-2022 走看看