# vue2.0_vant_mobile **Repository Path**: hyduan_h5/vue2.0_vant_mobile ## Basic Information - **Project Name**: vue2.0_vant_mobile - **Description**: 一个基于vue2.0生成的移动端基础脚手架；内置技术：vue2.0+vuex+router+axios+vant+webpack+百度地图 node:14.18.2；已配置移动端适配px转rem - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 3 - **Created**: 2021-12-21 - **Last Updated**: 2024-07-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: vue2cli-h5, Vue, Vuex, JavaScript, webpack ## README ## vue2.0 cli #### 开发说明 vue搭建移动端模版（移动端） --- #### Author information ------------------------ authentic：hyduan authEmail：17835399154@163.com authCsdn: hyduan_h5(https://blog.csdn.net/duanhy_love) authGitee:hyduan_h5(https://gitee.com/hyduan_h5) authWx: hyduan_h5(+v需备注来源) authOccupation:Front end development engineer #### 技术栈 ------------------------ vue 3.0 + vuex 4.0+ vue-router + webpack + ES6/7 + axious + vant +百度地图 ##### 项目目录 ``` ├── public ------------------------------ 静态文件夹 | ├── images --------------------------- 静态图片 | ├── lib ------------------------------ 工具库 | ├── static --------------------------- 第三方页面 | ├── extraConfig.json ----------------- 部署配置项 | └── index.html ----------------------- index.html ├── node_modules ------------------------ 依赖 ├── src --------------------------------- 开发目录 | ├── api ------------------------------ 接口 | ├── assets --------------------------- 资源目录 | | ├── images ------------------------ 图片(无需动态替换) | | └── css --------------------------- 共用样式 | ├── components ----------------------- 组件库 | | ├── layouts ----------------------- 布局 | | | ├── index.vue ------------------ 整体布局 | | └── xxx.vue ----------------------- 其他组件 | ├── filers --------------------------- filers | ├── plugins -------------------------- vant插件按需全局引入 | ├── router --------------------------- vue-router | | └── modules | | └── index.js | ├── store ---------------------------- vuex配置 | ├── utils ---------------------------- 公共方法 | ├── views ---------------------------- 业务视图(按模块命名) | ├── App.vue---------------------------- 组件入口 | └── main.js---------------------------- 程序入口 ├── .env -------------------------------- 本地环境变量配置 ├── .eslintrc.js ------------------------ eslint配置 ├── .eslintignore ----------------------- eslint忽略文件 ├── .gitgnore --------------------------- git忽略文件 ├── .postcssrc.js ----------------------- rem适配配置 ├── .prettierrc ------------------------- pettier规则 ├── .babel.config.js -------------------- babel配置 ├── yarn.lock --------------------------- yarn依赖版本锁定文件 ├── package-lock.json ------------------- npm依赖版本锁定文件 ├── package.json ├── vue.config.js ----------------------- webpack配置 └── README.md ``` #### 完成功能 ------------------------ - [x] 登录 -- 完成 - [x] 首页 -- 完成 - [x] 404页-- 完成 - [x] 401页-- 完成 #### 运行项目 ------------------------ ``` bash # install dependencies npm install cnpm install # serve with hot reload at localhost:8080 npm run dev npm run start npm run serve # serve with hot reload at the production environment npm run serve:pro # serve with hot reload at the test environment npm run serve:test # build for production with minification In the production environment npm run build # build for production with minification In the development environment npm run build:dev # build for production with minification In the test environment npm run build:test ``` #### 项目源码地址： ------------------------ 码云地址：https://gitee.com/hyduan_h5/vue2.0_vant_mobile #### 使用说明 1. 普通练习可直接Fork本仓库 2. 如需商用请联系作者 3. 出现版权纠纷概不负责 ##### 环境变量配置说明 ``` VUE_APP_DEBUG=true // 调试模式配置，生产环境设为false VUE_APP_API_SERVER= // 接口地址 ... ``` _注意：环境变量配置的增删改由前端团队评审确定之后方可使用，切勿私自添加，通过之后同步至运维团队，避免部署因环境变量信息不对称发生问题_ ##### extraconfig 部署配置 ``` // json format { "VUE_APP_SERVER":"" } ``` _注意：检查运维部署至现场的配置文件格式，避免因格式问题造成低级错误_ #### 开始开发 ##### git 拉取 1. 开发分支： dev 2. 自己的分支： 例如 yourname/dev 3. 合并流程： 获取主开发分支 dev、将 主开发分支 dev 合并到自己的 dev 4. 提交流程：提交自己的 dev、到 git 网页提交合并申请 5. 注意：每次改自己代码之前，先将 主分支 dev 拉取合并，不然冲突太多 ##### vuex 默认使用 vuex-persistedstate 进行持久化存储 ##### 百度地图 https://dafrok.github.io/vue-baidu-map/#/zh/start/usage