init

Author: frontend-qin

README copy.md

@@ -11,9 +11,46 @@
 
 ## 简介
 
+> 本模板非集成方案, 只是做底层的一套基本配置,包括以下内容
+
+```
+1. 路由
+2. axios 封装(请求拦截, 响应拦截, 页面切换取消ajax请求),请求加载loading
+3. 移动端适配
+4. px 自动转 rem
+5. svg渲染组件
+6. 页面渲染前空白处理
+7. 服务器接口环境配置
+8. 路由切换动画(闪屏问题处理)
 ```
-- 登录 / 注销
 
+## 目录
+
+```bash
+├── package.json
+├── public
+│   ├── favicon.ico
+│   └── index.html
+├── src
+│   ├── assets                静态资源
+│   ├── components            组件
+│   ├── icons                 svg图标
+│   ├── plugins               vant按需加载的组件
+│   ├── router                路由
+│   ├── service               接口
+│   ├── store                 vx
+│   ├── styles                css
+│   ├── utils                 公共方法
+│   ├── views                 视图单页
+│   ├── App.vue               根组件
+│   └── main.js               入口
+├── .env.development          开发接口
+├── .env.production           生产接口
+├── babel.config.js
+├── package.json
+├── postcss.config.js
+├── README.md
+└── vue.config.js
 ```
 
 ## 开发
@@ -28,12 +65,28 @@ cd vue-vant-mobile
 # 安装依赖
 npm i
 
+# 启动
+npm start
 ```
 
 浏览器访问 http://localhost:9538
 
+## svg 使用
+
+> 直接去阿里巴巴图标库,找到自己需要的图片下载 svg 格式
+> 如果需要改颜色, 请打开 svg 图片源码, 删除源码中的 fill 属性
+
 ## 接口
 
+> 本模板默认配置的 "/api" 代理, 如果不需要代理的,直接去掉 vue.config.js 的 proxy 和它对应的值全部删除掉,
+> 接着在 utils 文件夹下,把下边的代码放开,关闭另一个代理的
+> 配置代理的部署线上服务的时候,记得配置 ngiux 的代理接口转发,否则拿不到数据
+
+```javascript
+// 如果不配置代理,就用这个
+baseURL: process.env.VUE_APP_BASE_URL,
+```
+
 ```bash
 
 # 配置开发接口地址

README.md

@@ -5,6 +5,8 @@
   "scripts": {
     "start": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "devbuild": "vue-cli-service --mode=development build",
+    "preview": "serve -S dist",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit"
   },
@@ -35,6 +37,7 @@
     "prettier": "^1.18.2",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
+    "script-ext-html-webpack-plugin": "^2.1.4",
     "svg-sprite-loader": "^4.1.6",
     "vue-template-compiler": "^2.6.10"
   }

package-lock.json

@@ -12,7 +12,7 @@ const toast = () =>
   });
 
 const instance = axios.create({
-  //baseURL: "http://yapi.demo.qunar.com/mock/23750/api", // 如果不配置代理,就用这个
+  //baseURL: process.env.VUE_APP_BASE_URL, // 如果不配置代理,就用这个
   baseURL: "/api", // 如果配置代理就用这个
   timeout: 3500
 });

package.json

@@ -4,10 +4,10 @@ function resolve(dir) {
   return path.join(__dirname, dir);
 }
 
-const port = process.env.port || process.env.npm_config_port || 9538; // dev port
+const port = 9538;
 
 module.exports = {
-  publicPath: process.env.NODE_ENV === "production" ? "/vue-vant-mobile" : "/",
+  publicPath: "/",
   outputDir: "dist",
   assetsDir: "static",
   lintOnSave: process.env.NODE_ENV === "development",