首页 发现 帮助
登录
chuck
/
base-vue2
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

封装完成

vagrant 4 年之前
父节点
6d21efd69c
当前提交
2d41256c91
共有 20 个文件被更改，包括 424 次插入 和 1 次删除
分列视图 显示文件统计
  1. 7 0
      .env
  2. 18 0
      .env.development
  3. 6 0
      .env.pre
  4. 3 0
      .env.production
  5. 6 0
      .env.test
  6. 4 0
      babel.config.js
  7. 5 1
      package.json
  8. 17 0
      public/func.html
  9. 32 0
      public/index.html
  10. 13 0
      src/apis/sdk.js
  11. 74 0
      src/axios/axios.js
  12. 2 0
      src/main.js
  13. 15 0
      src/modules/func/Func.vue
  14. 9 0
      src/modules/func/func.js
  15. 36 0
      src/modules/func/pages/Login.vue
  16. 20 0
      src/modules/func/router.js
  17. 61 0
      src/routers/index.js
  18. 18 0
      src/stores/Product.js
  19. 10 0
      src/stores/index.js
  20. 68 0
      vue.config.js

+ 7 - 0
.env
查看文件 

@@ -0,0 +1,7 @@
 
+NODE_ENV = 'production'
 
+VUE_APP_TITLE = ''
 
+
 
+VUE_APP_API=
 
+
 
+VUE_APP_PUBLIC_PATH=/
 
+

+ 18 - 0
.env.development
查看文件 

@@ -0,0 +1,18 @@
 
+#请求地址api
 
+VUE_APP_API_DEV=''
 
+
 
+#是否mock数据
 
+VUE_APP_BUILD_MODE=!NOMOCK
 
+
 
+VUE_APP_PUBLIC_PATH=/
 
+VUE_APP_Version=1.0.0
 
+
 
+#多代理api 开发环境下使用
 
+VUE_APP_API_MOCK=''
 
+
 
+#开发
 
+VUE_APP_DEV_HOST=0.0.0.0
 
+VUE_APP_DEV_PORT=8080
 
+
 
+
 
+

+ 6 - 0
.env.pre
查看文件 

@@ -0,0 +1,6 @@
 
+NODE_ENV = 'pre'
 
+
 
+VUE_APP_Version=2.0.4
 
+
 
+VUE_APP_API=/
 
+

+ 3 - 0
.env.production
查看文件 

@@ -0,0 +1,3 @@
 
+NODE_ENV = 'production'
 
+
 
+VUE_APP_Version=1.0.0

+ 6 - 0
.env.test
查看文件 

@@ -0,0 +1,6 @@
 
+NODE_ENV = 'test'
 
+
 
+VUE_APP_Version=1.0.0
 
+
 
+VUE_APP_API=/
 
+

+ 4 - 0
babel.config.js
查看文件 

@@ -1,5 +1,9 @@
 
 module.exports = {
 
   presets: [
 
     '@vue/cli-plugin-babel/preset'
 
+  ],
 
+  //添加忽略项
 
+  ignore: [
 
+
 
   ]
 
 }

+ 5 - 1
package.json
查看文件 

@@ -5,11 +5,15 @@
 
   "scripts": {
 
     "serve": "vue-cli-service serve",
 
     "build": "vue-cli-service build",
 
+    "build:test": "vue-cli-service build --mode test",
 
+    "build:pre": "vue-cli-service build --mode pre",
 
     "lint": "vue-cli-service lint"
 
   },
 
   "dependencies": {
 
     "core-js": "^3.6.5",
 
-    "vue": "^2.6.11"
 
+    "vue": "^2.6.11",
 
+    "vue-router": "^3.4.7",
 
+    "vuex": "^3.5.1"
 
   },
 
   "devDependencies": {
 
     "@vue/cli-plugin-babel": "~4.5.0",

+ 17 - 0
public/func.html
查看文件 

@@ -0,0 +1,17 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
+    <title><%= htmlWebpackPlugin.options.title %></title>
 
+  </head>
 
+  <body>
 
+    <noscript>
 
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
+    </noscript>
 
+    <div id="app"></div>
 
+    <!-- built files will be auto injected -->
 
+  </body>
 
+</html>

+ 32 - 0
public/index.html
查看文件 

@@ -6,6 +6,38 @@
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
     <title><%= htmlWebpackPlugin.options.title %></title>
 
+      <style>
 
+          @media screen and (min-width:300px){html,body,input{font-size:15px}}
 
+          @media screen and (min-width:320px){html,body,input{font-size:16px}}
 
+          @media screen and (min-width:340px){html,body,input{font-size:17px}}
 
+          @media screen and (min-width:360px){html,body,input{font-size:18px}}
 
+          @media screen and (min-width:375px){html,body,input{font-size:18.75px}}
 
+          @media screen and (min-width:380px){html,body,input{font-size:19px}}
 
+          @media screen and (min-width:400px){html,body,input{font-size:20px}}
 
+          @media screen and (min-width:414px){html,body,input{font-size:20.7px}}
 
+          @media screen and (min-width:420px){html,body,input{font-size:21px}}
 
+          @media screen and (min-width:440px){html,body,input{font-size:22px}}
 
+          @media screen and (min-width:460px){html,body,input{font-size:23px}}
 
+          @media screen and (min-width:480px){html,body,input{font-size:24px}}
 
+          @media screen and (min-width:500px){html,body,input{font-size:25px}}
 
+          @media screen and (min-width:520px){html,body,input{font-size:26px}}
 
+          @media screen and (min-width:540px){html,body,input{font-size:27px}}
 
+          @media screen and (min-width:560px){html,body,input{font-size:28px}}
 
+          @media screen and (min-width:580px){html,body,input{font-size:29px}}
 
+          @media screen and (min-width:600px){html,body,input{font-size:30px}}
 
+          @media screen and (min-width:620px){html,body,input{font-size:31px}}
 
+          @media screen and (min-width:640px){html,body,input{font-size:32px}}
 
+          @media screen and (min-width:660px){html,body,input{font-size:33px}}
 
+          @media screen and (min-width:680px){html,body,input{font-size:34px}}
 
+          @media screen and (min-width:700px){html,body,input{font-size:35px}}
 
+          @media screen and (min-width:720px){html,body,input{font-size:36px}}
 
+          @media screen and (min-width:740px){html,body,input{font-size:37px}}
 
+          @media screen and (min-width:760px){html,body,input{font-size:38px}}
 
+          @media screen and (min-width:780px){html,body,input{font-size:39px}}
 
+          @media screen and (min-width:800px){html,body,input{font-size:40px}}
 
+          @media screen and (min-width:1024px){html,body,input{font-size:51.2px}}
 
+          @media screen and (min-width:1349px){html,body,input{font-size:67.45px}}
 
+      </style>
 
   </head>
 
   <body>
 
     <noscript>

+ 13 - 0
src/apis/sdk.js
查看文件 

@@ -0,0 +1,13 @@
 
+import request from '../axios/axios'
 
+/**
 
+ * xxx
 
+ * @param params
 
+ */
 
+export function xxx (data) {
 
+    return request({
 
+        url: '',
 
+        method: 'post',
 
+        data
 
+    })
 
+}
 
+

+ 74 - 0
src/axios/axios.js
查看文件 

@@ -0,0 +1,74 @@
 
+import axios from 'axios'
 
+
 
+// 创建一个错误
 
+function errorCreate (message) {
 
+    const error = new Error(message)
 
+    throw error
 
+}
 
+
 
+// 创建一个 axios 实例
 
+const service = axios.create({
 
+    baseURL: process.env.VUE_APP_API,
 
+    timeout: 5000, // 请求超时时间
 
+    withCredentials:true   //携带cookie
 
+})
 
+
 
+// 请求拦截器
 
+service.interceptors.request.use(
 
+    config => {
 
+        // 在请求发送之前做一些处理
 
+        config.headers['Cache-Control'] = 'no-cache'
 
+        return config
 
+    },
 
+    error => {
 
+        // 发送失败
 
+        console.log(error)
 
+        return Promise.reject(error)
 
+    }
 
+)
 
+// 响应拦截器
 
+service.interceptors.response.use(
 
+    response => {
 
+        // dataAxios 是 axios 返回数据中的 data
 
+        const dataAxios = response.data
 
+        // 这个状态码是和后端约定的
 
+        const { status } = dataAxios
 
+        // 根据 code 进行判断
 
+        if (status === undefined) {
 
+            // 如果没有 code 代表这不是项目后端开发的接口 比如可能是 D2Admin 请求最新版本
 
+            return dataAxios
 
+        } else {
 
+            // 有 code 代表这是一个后端接口 可以进行进一步的判断
 
+            switch (status) {
 
+                case 101:  //统一错误处理 登陆超时
 
+
 
+                    errorCreate(`${dataAxios.message}`)
 
+                    break
 
+                default://不做任何处理
 
+                    return dataAxios
 
+                    break
 
+            }
 
+        }
 
+    },
 
+    error => {
 
+        if (error && error.response) {
 
+            switch (error.response.status) {
 
+                case 400: error.message = '请求错误'; break
 
+                case 401: error.message = '未授权，请登录'; break
 
+                case 403: error.message = '拒绝访问'; break
 
+                case 404: error.message = `请求地址出错: ${error.response.config.url}`; break
 
+                case 408: error.message = '请求超时'; break
 
+                case 500: error.message = '服务器内部错误'; break
 
+                case 501: error.message = '服务未实现'; break
 
+                case 502: error.message = '网关错误'; break
 
+                case 503: error.message = '服务不可用'; break
 
+                case 504: error.message = '网关超时'; break
 
+                case 505: error.message = 'HTTP版本不受支持'; break
 
+                default: break
 
+            }
 
+        }
 
+        return Promise.reject(error)
 
+    }
 
+)
 
+
 
+export default service

+ 2 - 0
src/main.js
查看文件 

@@ -1,8 +1,10 @@
 
 import Vue from 'vue'
 
 import App from './App.vue'
 
+import router from './routers'
 
 
 Vue.config.productionTip = false
 
 
 new Vue({
 
+  router,
 
   render: h => h(App),
 
 }).$mount('#app')

+ 15 - 0
src/modules/func/Func.vue
查看文件 

@@ -0,0 +1,15 @@
 
+<template>
 
+    <div id="func">
 
+        <router-view></router-view>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+    export default {
 
+        name: "func"
 
+    }
 
+</script>
 
+
 
+<style scoped>
 
+
 
+</style>

+ 9 - 0
src/modules/func/func.js
查看文件 

@@ -0,0 +1,9 @@
 
+
 
+import Vue from 'vue'
 
+import Func from './Func.vue'
 
+import router from './router'
 
+
 
+new Vue({
 
+    router,
 
+    render: h => h(Func)
 
+}).$mount('#func')

+ 36 - 0
src/modules/func/pages/Login.vue
查看文件 

@@ -0,0 +1,36 @@
 
+<template>
 
+    <div style="font-size:1rem;">this is func login</div>
 
+</template>
 
+
 
+<script>
 
+    import { GetUserInfo } from '@/api/login'
 
+    import {Toast} from "vant";
 
+    export default {
 
+        name: "login",
 
+        data(){
 
+          return{
 
+
 
+          }
 
+        },
 
+        mounted() {
 
+          //this.getUserInfo()
 
+          console.log(this.$route.fullPath)
 
+        },
 
+        methods:{
 
+          getUserInfo(userInfo={}){
 
+            let that = this;
 
+            GetUserInfo().then(async res => {
 
+              if(res.status == 200){
 
+                Toast.clear();
 
+              }else{
 
+                Toast(res.message);
 
+              }
 
+            })
 
+          },
 
+        }
 
+    }
 
+</script>
 
+
 
+<style scoped>
 
+
 
+</style>

+ 20 - 0
src/modules/func/router.js
查看文件 

@@ -0,0 +1,20 @@
 
+//router.js
 
+import Vue from 'vue'
 
+import VueRouter from 'vue-router'
 
+
 
+Vue.use(VueRouter)
 
+
 
+const routes = [{
 
+    path: '/',
 
+    name: 'login',
 
+    component: r => {
 
+        require(['./pages/Login'], r)
 
+    },
 
+    meta: {title: ''}
 
+}]
 
+
 
+export default new VueRouter({
 
+    mode: 'history',
 
+    base: '/func',
 
+    routes: routes
 
+})

+ 61 - 0
src/routers/index.js
查看文件 

@@ -0,0 +1,61 @@
 
+import Vue from 'vue'
 
+import Router from 'vue-router'
 
+// fix vue-router NavigationDuplicated
 
+const VueRouterPush = Router.prototype.push
 
+Router.prototype.push = function push(location) {
 
+    return VueRouterPush.call(this, location).catch(err => err)
 
+}
 
+const VueRouterReplace = Router.prototype.replace
 
+Router.prototype.replace = function replace(location) {
 
+    return VueRouterReplace.call(this, location).catch(err => err)
 
+}
 
+Vue.use(Router)
 
+
 
+// 导出路由 在 main.js 里使用
 
+const index = new Router({
 
+    mode: 'history',
 
+    base: process.env.BASE_URL,
 
+    routes: [
 
+        {
 
+            path: '/',
 
+            name: 'home',
 
+            component: '',
 
+            meta: {
 
+                title: ''
 
+            }
 
+        },
 
+    ]
 
+})
 
+
 
+/**
 
+ * 路由拦截
 
+ * 权限验证
 
+ */
 
+index.beforeEach(async (to, from, next) => {
 
+
 
+    // 验证当前路由所有的匹配中是否需要有登录验证的
 
+    if (to.matched.some(r => r.meta.auth)) {
 
+        const token = ''
 
+        if (token && token !== 'undefined') {
 
+            next()
 
+        } else {
 
+            // 没有登录的时候跳转到登录界面
 
+            // 携带上登陆成功之后需要跳转的页面完整路径
 
+            next({
 
+                name: 'login',
 
+                query: {
 
+                    redirect: to.fullPath
 
+                }
 
+            })
 
+        }
 
+    } else {
 
+        // 不需要身份校验 直接通过
 
+        next()
 
+    }
 
+})
 
+
 
+index.afterEach(to => {
 
+
 
+})
 
+
 
+export default index

+ 18 - 0
src/stores/Product.js
查看文件 

@@ -0,0 +1,18 @@
 
+
 
+export default {
 
+    state: {
 
+
 
+    },
 
+    getters: {
 
+
 
+    },
 
+    mutations: {
 
+
 
+    },
 
+
 
+    actions: {
 
+
 
+    }
 
+}
 
+
 
+

+ 10 - 0
src/stores/index.js
查看文件 

@@ -0,0 +1,10 @@
 
+import Vue from 'vue'
 
+import Vuex from 'vuex'
 
+import product from './Product'
 
+Vue.use(Vuex)
 
+
 
+export default new Vuex.Store({
 
+    modules: {
 
+        product
 
+    }
 
+})

+ 68 - 0
vue.config.js
查看文件 

@@ -0,0 +1,68 @@
 
+const path = require("path");
 
+
 
+function resolve(dir) {
 
+    return path.join(__dirname, dir);
 
+}
 
+// 基础路径 注意发布之前要先修改这里
 
+let publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
 
+const Timestamp = new Date().getTime()
 
+module.exports = {
 
+    // 根据你的实际情况更改这里
 
+    publicPath,
 
+    lintOnSave: true,
 
+    productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,
 
+    devServer: {
 
+        host: process.env.VUE_APP_DEV_HOST?process.env.VUE_APP_DEV_HOST:'',
 
+        port: process.env.VUE_APP_DEV_PORT?process.env.VUE_APP_DEV_PORT:'8080',
 
+        https: false,
 
+        hotOnly: false,
 
+        inline: true,
 
+        disableHostCheck: true,
 
+        proxy: {
 
+            '^/api': {
 
+                target: process.env.VUE_APP_API_DEV || '',
 
+                ws: true,
 
+                changeOrigin: true,
 
+                pathRewrite: {
 
+                    '^/api': ''
 
+                }
 
+            },
 
+            '^/v1': {
 
+                target: process.env.VUE_APP_API_MOCK || '',
 
+                ws: true,
 
+                changeOrigin: true,
 
+                pathRewrite: {
 
+                    '^/v1': ''
 
+                }
 
+            }
 
+        }
 
+    },
 
+    // 默认设置: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config/base.js
 
+    chainWebpack: config => {
 
+
 
+        // 判断环境加入模拟数据
 
+        const entry = config.entry('app')
 
+        if (process.env.VUE_APP_BUILD_MODE !== 'NOMOCK') {
 
+            entry
 
+                .add('@/mock')
 
+                .end()
 
+        }
 
+        config.resolve.alias
 
+            .set("@", resolve("src"))
 
+            .set("~", resolve("src/assets"))
 
+            .set("@c", resolve("src/components"))
 
+            .set("@v", resolve("src/views"))
 
+            .set("@p", resolve("public"));
 
+    },
 
+    configureWebpack: { // webpack 配置
 
+        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
 
+            filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
 
+            chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
 
+        },
 
+    },
 
+    pages: {
 
+        // 只有entry属性时，直接用字符串表示模块入口  多页面
 
+        func: 'src/modules/func/func.js',
 
+        index: "src/main.js"
 
+    }
 
+}