{"id":23378067,"url":"https://github.com/powerdos/vue-cli-3-mobile-vm-demo","last_synced_at":"2025-04-10T19:52:24.347Z","repository":{"id":126316107,"uuid":"225348412","full_name":"PowerDos/vue-cli-3-mobile-vm-demo","owner":"PowerDos","description":"本项目是基于Vue-Cli3脚手架，应用VW的自适应解决方案构建的移动端企业级工程项目，下面会一步步构建起项目结构，方便大家了解整个过程。","archived":false,"fork":false,"pushed_at":"2020-06-08T01:38:54.000Z","size":200,"stargazers_count":23,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T17:51:19.309Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PowerDos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-02T10:33:28.000Z","updated_at":"2022-04-29T12:13:25.000Z","dependencies_parsed_at":"2023-06-16T06:45:45.346Z","dependency_job_id":null,"html_url":"https://github.com/PowerDos/vue-cli-3-mobile-vm-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PowerDos%2Fvue-cli-3-mobile-vm-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PowerDos%2Fvue-cli-3-mobile-vm-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PowerDos%2Fvue-cli-3-mobile-vm-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PowerDos%2Fvue-cli-3-mobile-vm-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PowerDos","download_url":"https://codeload.github.com/PowerDos/vue-cli-3-mobile-vm-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248283997,"owners_count":21077970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-21T18:34:29.063Z","updated_at":"2025-04-10T19:52:24.337Z","avatar_url":"https://github.com/PowerDos.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 基于Vue-Cli3的Vue移动端企业级工程架构\n\u003e 本项目是基于Vue-Cli3脚手架，应用VW的自适应解决方案构建的移动端企业级工程项目，下面会一步步构建起项目结构。大家也可以先下载源代码下来看下，再跟着操作。\n\n\u003e Author: Gavin\n\n## 演示\n\n\u003e 下面是一张自适应效果git图，比较大，需要耐心等待才能看到，或者直接下载图片查看效果[https://i.loli.net/2019/12/03/oONsfGkgit7H3Cw.gif]\n\n![show.gif](https://i.loli.net/2019/12/03/oONsfGkgit7H3Cw.gif)\n\n#### 工程目录\n\n\u003e 这里展示的是最终的目录结构，方便查看，后面会一步步说明并搭建此目录\n\n```\n.\n├── README.md\n├── babel.config.js\n├── package-lock.json\n├── package.json\n├── public\n│   └── index.html\n├── src\n│   ├── App.vue\n│   ├── api\n│   │   └── homeApi.js\n│   ├── assets\n│   │   ├── img\n│   │   │   └── head.png\n│   │   └── scss\n│   │       └── global.scss\n│   ├── components\n│   │   └── Footer.vue\n│   ├── main.js\n│   ├── page\n│   │   └── Home.vue\n│   ├── router\n│   │   └── index.js\n│   ├── store\n│   │   ├── actions.js\n│   │   ├── getters.js\n│   │   ├── index.js\n│   │   ├── modules\n│   │   │   └── home.js\n│   │   └── mutations.js\n│   └── utils\n│       ├── http.js\n│       └── tool.js\n└── vue.config.js\n```\n\n#### 运行\n\n```\nnpm run serve\n```\n\n## 基础项目创建\n\n#### 创建项目\n\n```shell\n$: vue create vue_cli_3_mobile_vm_demo\n```\n\n#### 选择默认模式\n\n```shell\n$: Please pick a preset: **default (babel, eslint)\n```\n\n#### 补全 Eslint 依赖\n\n```shell\n$: npm install eslint-config-standard eslint-friendly-formatter eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --save-dev\n```\n\n#### 配置Eslint规则\n\n\u003e 配置统一规则，团队开发统一规范，在根目录创建文件.eslintrc.js。(PS:配置完规则后，需要根据自身开发工具安装Eslint插件，如VSCode，安装ESLint插件)\n\n\u003e 可以根据自身团队的习惯，指定规则，下面只是一种参考\n\n```\nmodule.exports = {\n  root: true,\n  parserOptions: {\n    parser: 'babel-eslint'\n  },\n  env: {\n    browser: true,\n  },\n  extends: [\n    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention\n    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.\n    'plugin:vue/essential',\n    // https://github.com/standard/standard/blob/master/docs/RULES-en.md\n    'standard'\n  ],\n  // required to lint *.vue files\n  plugins: [\n    'vue'\n  ],\n  // add your custom rules here\n  rules: {\n    \"semi\": [2, \"always\"],\n    // allow async-await\n    'generator-star-spacing': 'off',\n    // allow debugger during development\n    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'\n  }\n}\n```\n\n#### 支持SASS/SCSS\n\n```shell\n$: npm install sass-loader node-sass --save-dev\n```\n\n#### 创建全局SCSS\n\n\u003e 创建全局scss文件./src/scss/global.scss\n\n```\n// 文件中可以写全局的变量，包括字体大小，主题色，边距大小等，这样可以方便后面整个项目风格修改\n\n// 主题 - 蓝\n$primary-color: #03A9F4;\n$primary-color-dark: #409EFF;\n$primary-color-light:#B3E5FC;\n$primary-color-rgba-1: rgba(3,169,244,.1);\n$primary-color-rgba-2: rgba(3,169,244,.2);\n$background-color: #F0F2F5;\n\n// 文字样式\n$title-text-color: #303133;\n$normal-text-color: #606266;\n$sub-text-color: #909399;\n$temp-text-color: #C0C4CC;\n```\n\n\u003e 根目录创建vue.config.js，引入全局文件\n\n```\nmodule.exports = {\n...\n  css: {\n    loaderOptions: {\n      sass: {\n        // 根据自己样式文件的位置调整\n        prependData: '@import \"@/assets/scss/global.scss\";'\n      }\n    }\n  }\n...\n};\n```\n\n#### 移动端自适应\n\n\u003e 具体可以了解下https://www.w3cplus.com/css/vw-for-layout.html，这里有讲到一些原理，这里不做展开\n\n\u003e 安装依赖\n\n```shell\n$: 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\n```\n\n\u003e 配置规则，修改vue.config.js\n\n```\nmodule.exports = {\n...\n  css: {\n    loaderOptions: {\n      sass: {\n        // 根据自己样式文件的位置调整\n        prependData: '@import \"@/assets/scss/global.scss\";'\n      },\n      postcss: {\n        plugins: [\n          require('postcss-px-to-viewport')({\n            viewportWidth: 750,\n            viewportHeight: 1334,\n            unitPrecision: 3,\n            viewportUnit: 'vw',\n            \"selectorBlackList\": [\".ignore\", \".hairlines\"], // 这里是过滤不转换的css，支持正则，如果框架本身把单位写死支持移动端，可以通过这个过滤掉，比如vux UI框架需要过滤掉['.ignore', '.hairlines', /^\\.weui/, /^\\.dp/, /^\\.scroller/, /^\\.ignore/],\n            minPixelValue: 1,\n            mediaQuery: false\n          })\n        ]\n      }\n    }\n  }\n...\n};\n```\n\n## 工程目录搭建\n\n#### 加入路由Vue-Router, 状态存储Vuex, HTTP请求axios\n\n```shell\n$: npm install vue-router veux axios --save\n```\n\n#### 在src文件夹创建工程目录\n\n```\n.\n├── App.vue              // VUE总入口\n├── api                  // API请求文件夹\n│   └── homeApi.js       // 分模块写请求文件\n├── assets               // 静态文件\n│   ├── img              // 图片资源\n│   │   └── head.png\n│   └── scss             // scss样式资源\n│       └── global.scss\n├── components           // 抽象出来的组建\n│   └── SubTitle.vue\n├── main.js              // Vue主文件\n├── page                 // 应用页面\n│   └── Home.vue\n├── router               // 路由\n│   └── index.js\n├── store                // 状态存储\n│   ├── actions.js\n│   ├── getters.js\n│   ├── index.js\n│   ├── modules\n│   │   └── home.js\n│   └── mutations.js\n└── utils                // 工具\n    ├── http.js\n    └── tool.js\n```\n\n#### mian 文件引入vue-router和vuex\n\n```\nimport Vue from 'vue';\nimport App from './App.vue';\nimport router from './router/index';\nimport store from './store/index';\n\nVue.config.productionTip = false;\n\nnew Vue({\n  store,\n  router,\n  render: h =\u003e h(App)\n}).$mount('#app');\n```\n\n#### App.vue引入路由\n\n```\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003crouter-view/\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'app',\n  components: {}\n};\n\u003c/script\u003e\n\n\u003cstyle\u003e\n/* 去除默认自带的所有边距 */\nhtml, body {\n  margin: 0px;\n  padding: 0px;\n}\n\u003c/style\u003e\n```\n\n#### 路由创建创立\n\n\u003e 创建./src/router/index.js\n\n```\nimport Vue from 'vue';\nimport Router from 'vue-router';\n\nimport Home from '@/page/Home';\n\nVue.use(Router);\n\nexport default new Router({\n  routes: [\n    // 登陆\n    {\n      path: '/',\n      name: 'Home',\n      component: Home\n    }\n  ]\n});\n```\n\n#### 创建状态存储\n\n\u003e 最外层的为全局状态管理(action.js/getters.js/index.js/mutations.js)，modules下放的为每个模块单独的状态存储具体可以下载项目看具体代码内容\n\n```\n.\n├── actions.js\n├── getters.js\n├── index.js\n├── modules\n│   └── home.js\n└── mutations.js\n```\n\n\u003e 这里展示index.js\n\n```\nimport Vue from 'vue';\nimport Vuex from 'vuex';\n\n// 引入全局存储\nimport * as actions from './actions';\nimport * as mutations from './mutations';\nimport * as getters from './getters';\n\n// 引入模块存储\nimport home from './modules/home';\n\nVue.use(Vuex);\n\nexport default new Vuex.Store({\n  state: {\n    globalFlag: 0\n  },\n  actions,\n  mutations,\n  getters,\n  modules: {\n    home\n  }\n});\n```\n\n## 引入UI框架\n\n\u003e 这里以引入Vant UI为例\n\n#### 安装vant\n\n```shell\n$: npm install vant --save \n```\n\n#### 按需引入\n\n\u003e 安装按需加载依赖，[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式\n\n```shell\n$: npm install babel-plugin-import --save-dev\n```\n\n\u003e 配置babel，修改根目录下的babel.config.js\n\n```\nmodule.exports = {\n  presets: [\n    '@vue/app'\n  ],\n  plugins: [\n    [\n      'import',\n      {\n        libraryName: 'vant',\n        libraryDirectory: 'es',\n        style: true\n      },\n      'vant'\n    ]\n  ]\n};\n```\n\n#### 过滤px单位转换成VM\n\n\u003e 由于Vant UI本身就自带了自适应，所以无需转换为vw单位，我们可以再postcss上过滤掉，修改根目录的vue.config.js文件\n\n```\nmodule.exports = {\n  css: {\n    loaderOptions: {\n      sass: {\n        // 根据自己样式文件的位置调整\n        prependData: '@import \"@/assets/scss/global.scss\";'\n      },\n      postcss: {\n        plugins: [\n          require('postcss-px-to-viewport')({\n            viewportWidth: 750,\n            viewportHeight: 1334,\n            unitPrecision: 3,\n            viewportUnit: 'vw',\n            selectorBlackList: ['.ignore', '.hairlines', /^\\.dp/, /^\\.scroller/, /^\\.van/], // 这里是过滤不转换的css，支持正则，如果框架本身把单位写死支持移动端，可以通过这个过滤掉\n            minPixelValue: 1,\n            mediaQuery: false\n          })\n        ]\n      }\n    }\n  }\n};\n```\n\n#### demo\n\n```\n\u003ctemplate\u003e\n  \u003cdiv class=\"home-container\"\u003e\n    \u003c!-- 导航 --\u003e\n    \u003cvan-nav-bar :title=\"title\" left-text=\"返回\" left-arrow\u003e\n      \u003cvan-icon name=\"shopping-cart-o\" slot=\"right\" info=\"9\" size=\"20px\"/\u003e\n    \u003c/van-nav-bar\u003e\n    \u003c!-- 通知栏 --\u003e\n    \u003cvan-notice-bar :text=\"notify\" left-icon=\"volume-o\" /\u003e\n    \u003c!-- 轮播图 --\u003e\n    \u003cvan-swipe :autoplay=\"3000\" indicator-color=\"white\" class=\"swipe-container\"\u003e\n      \u003cvan-swipe-item class=\"swipe-box swipe-color-1\"\u003e1\u003c/van-swipe-item\u003e\n      \u003cvan-swipe-item class=\"swipe-box swipe-color-2\"\u003e2\u003c/van-swipe-item\u003e\n      \u003cvan-swipe-item class=\"swipe-box swipe-color-3\"\u003e3\u003c/van-swipe-item\u003e\n      \u003cvan-swipe-item class=\"swipe-box swipe-color-4\"\u003e4\u003c/van-swipe-item\u003e\n    \u003c/van-swipe\u003e\n    \u003c!-- 菜单 --\u003e\n    \u003cvan-grid :column-num=\"3\"\u003e\n      \u003cvan-grid-item icon=\"like-o\" text=\"收藏\" /\u003e\n      \u003cvan-grid-item icon=\"clock-o\" text=\"历史订单\" /\u003e\n      \u003cvan-grid-item icon=\"balance-o\" text=\"资金管理\" /\u003e\n      \u003cvan-grid-item icon=\"setting-o\" text=\"设置\" /\u003e\n      \u003cvan-grid-item icon=\"location-o\" text=\"收货地址\" /\u003e\n      \u003cvan-grid-item icon=\"service-o\" text=\"服务中心\" /\u003e\n    \u003c/van-grid\u003e\n    \u003c!-- 懒加载 --\u003e\n    \u003cvan-skeleton title avatar :row=\"3\" class=\"skeleton-box\"/\u003e\n    \u003cvan-skeleton title avatar :row=\"3\" class=\"skeleton-box\"/\u003e\n    \u003cvan-skeleton title avatar :row=\"3\" class=\"skeleton-box\"/\u003e\n    \u003c!-- 底部 --\u003e\n    \u003cFooter :msg=\"copyright\"\u003e\u003c/Footer\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { Icon, NavBar, NoticeBar, Grid, GridItem, Swipe, SwipeItem, Skeleton } from 'vant';\nimport Footer from '@/components/Footer';\nimport { mapState } from 'vuex';\nexport default {\n  name: 'Home',\n  components: {\n    Footer,\n    [Icon.name]: Icon,\n    [NavBar.name]: NavBar,\n    [NoticeBar.name]: NoticeBar,\n    [Grid.name]: Grid,\n    [GridItem.name]: GridItem,\n    [Swipe.name]: Swipe,\n    [SwipeItem.name]: SwipeItem,\n    [Skeleton.name]: Skeleton\n  },\n  data () {\n    return {\n      title: 'Vue 企业级工程架构',\n      notify: '本项目是基于Vue-Cli3脚手架，应用VW的自适应解决方案构建的移动端企业级工程项目，下面会一步步构建起项目结构，方便大家了解整个过程。'\n    };\n  },\n  computed: {\n    ...mapState(['copyright'])\n  }\n};\n\u003c/script\u003e\n\n\u003cstyle lang=\"scss\" scoped\u003e\n.home-container {\n  width: 100vw;\n  min-height: 100vh;\n  background-color: #fff;\n  .swipe-container {\n    height: 380px;\n    .swipe-box {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      font-size: 58px;\n      color: #fff;\n    }\n    .swipe-color-1 {\n      background-color: #845EC2;\n    }\n    .swipe-color-2 {\n      background-color: #FFC75F;\n    }\n    .swipe-color-3 {\n      background-color: #008E9B;\n    }\n    .swipe-color-4 {\n      background-color: #4D8076;\n    }\n  }\n  .skeleton-box {\n    margin-top: 15px;\n  }\n}\n\u003c/style\u003e\n```\n\n#### 效果\n\n![image.png](https://i.loli.net/2019/12/03/Ky4SMFHxEUYRQPj.png)\n\n## 开发配置\n\n\u003e 由于大部分情况下，我们都是在本地开发，请求后端服务，所以我们这里可以直接在vue.config.js中配置测试服器地址或本地服务地址，这样我们就可以直接在本地测试服务端的功能，并且解决跨域问题\n\n\u003e 配置根目录下的vue.config.js\n\n```\nmodule.exports = {\n...\n  devServer: {\n    proxy: {\n      '/api': { // 需要转发的接口，如果全转发就设置根就行/\n        target: 'http://xxxx:8080/', // 对应自己的接口\n        changeOrigin: true,\n        ws: true,\n        pathRewrite: {\n          '^/api': ''\n        }\n      }\n    }\n  },\n...\n};\n```\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpowerdos%2Fvue-cli-3-mobile-vm-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpowerdos%2Fvue-cli-3-mobile-vm-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpowerdos%2Fvue-cli-3-mobile-vm-demo/lists"}