项目搭建与配置

项目初始化

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-process
ors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
 (with node-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

src 目录结构改造

• 删除不必要文件

.
├── App.vue
├── assets
├── components
├── main.js
├── router
│   └── index.js
├── store
│   └── index.js
└── views

• 添加 assets 资源

.
├── css
│   ├── border.css # 移动端1px边框
│   └── resets.css # 标签重置
├── img
│   ├── error.jpg
│   ├── 中秋节.jpg
│   ├── 元旦.jpg
│   ├── 劳动节.jpg
│   ├── 国庆节.jpg
│   ├── 春节.jpg
│   ├── 清明节.jpg
│   ├── 端午节.jpg
│   └── 除夕.jpg
└── js
    ├── common.js # 初始化 fastclick；消除 touchmove 警告；移动端 rem 适配
    └── fastclick.js

• 把 assets 资源导入 main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import '@/assets/css/resets.css';
import '@/assets/css/border.css';
import '@/assets/js/common.js';

createApp(App).use(store).use(router).mount('#app')

vue.config.js 配置

module.exports = {
  devServer: {
    overlay: { // 报错页面蒙层关闭
      warning: false,
      errors: false
    },
    proxy: {
      '/api': { // 遇到接口为 /api 开头的，做以下代理配置
        target: '<http://v.juhe.cn/>',
        changeOrigin: true, // 改变源 进行跨域
        ws: true, // 开启 websocket
        secure: false, // https 检查关闭
        pathRewrite: { // 路径重写
          '^/api/': '', // 把 /api/myAPI/path 变为 myAPI/path, 然后代理到 <http://localhost:8080> 这个代理服务器下边
        }
      }
    }
  },
  lintOnSave: false, // 关闭 eslint 检查
}

关闭 eslint 检查

eslint 检查还得关闭 package.json 下的以下属性：

"eslintConfig": {
  "root": false, // 设置 false
  "env": {
    "node": false // 设置 false
  },
  ...
}

安装 axios 和 qs

npm i axios qs -S

创建三个 tabbar 页面

.
├── Day.vue
├── Month.vue
└── Year.vue

配置路由