default
/
vue-study
关注 4
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 动态
浏览代码

first commit

zjxpcyc 6 年前
当前提交
743a2d0030
共有 23 个文件被更改，包括 14380 次插入 和 0 次删除
合并视图 显示文件统计
  1. 21
    0
      .gitignore
  2. 26
    0
      README.md
  3. 5
    0
      babel.config.js
  4. 13843
    0
      package-lock.json
  5. 52
    0
      package.json
  6. 二进制
      public/favicon.ico
  7. 17
    0
      public/index.html
  8. 36
    0
      src/App.vue
  9. 二进制
      src/assets/logo.png
  10. 41
    0
      src/config/apis.js
  11. 16
    0
      src/main.js
  12. 43
    0
      src/pages/agent/signup.vue
  13. 67
    0
      src/pages/index.vue
  14. 35
    0
      src/pages/layout/index.vue
  15. 9
    0
      src/router/index.js
  16. 22
    0
      src/router/routes.js
  17. 10
    0
      src/store/app.js
  18. 13
    0
      src/store/index.js
  19. 25
    0
      src/store/user.js
  20. 5
    0
      src/theme.js
  21. 25
    0
      src/utils/loadding.js
  22. 46
    0
      src/utils/request.js
  23. 23
    0
      vue.config.js

+ 21
- 0
.gitignore 查看文件

1 
+.DS_Store
2 
+node_modules
3 
+/dist
4 
+
5 
+# local env files
6 
+.env.local
7 
+.env.*.local
8 
+
9 
+# Log files
10 
+npm-debug.log*
11 
+yarn-debug.log*
12 
+yarn-error.log*
13 
+
14 
+# Editor directories and files
15 
+.idea
16 
+.vscode
17 
+*.suo
18 
+*.ntvs*
19 
+*.njsproj
20 
+*.sln
21 
+*.sw*

+ 26
- 0
README.md 查看文件

1 
+# study
2 
+
3 
+## Project setup
4 
+```
5 
+npm install
6 
+```
7 
+
8 
+### Compiles and hot-reloads for development
9 
+```
10 
+npm run serve
11 
+```
12 
+
13 
+### Compiles and minifies for production
14 
+```
15 
+npm run build
16 
+```
17 
+
18 
+### Run your tests
19 
+```
20 
+npm run test
21 
+```
22 
+
23 
+### Lints and fixes files
24 
+```
25 
+npm run lint
26 
+```

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

1 
+module.exports = {
2 
+  presets: [
3 
+    '@vue/app'
4 
+  ]
5 
+}

+ 13843
- 0
package-lock.json
文件差异内容过多而无法显示
查看文件


+ 52
- 0
package.json 查看文件

1 
+{
2 
+  "name": "study",
3 
+  "version": "0.1.0",
4 
+  "private": true,
5 
+  "scripts": {
6 
+    "start": "vue-cli-service serve",
7 
+    "serve": "vue-cli-service serve",
8 
+    "build": "vue-cli-service build",
9 
+    "lint": "vue-cli-service lint"
10 
+  },
11 
+  "dependencies": {
12 
+    "axios": "^0.18.0",
13 
+    "lodash.get": "^4.4.2",
14 
+    "vant": "^1.3.10",
15 
+    "vue": "^2.5.17",
16 
+    "vue-router": "^3.0.1",
17 
+    "vuex": "^3.0.1"
18 
+  },
19 
+  "devDependencies": {
20 
+    "@vue/cli-plugin-babel": "^3.0.5",
21 
+    "@vue/cli-plugin-eslint": "^3.0.5",
22 
+    "@vue/cli-service": "^3.0.5",
23 
+    "postcss-import": "^12.0.1",
24 
+    "postcss-theme-variables": "^1.0.0",
25 
+    "precss": "^3.1.2",
26 
+    "vue-template-compiler": "^2.5.17"
27 
+  },
28 
+  "eslintConfig": {
29 
+    "root": true,
30 
+    "env": {
31 
+      "node": true
32 
+    },
33 
+    "extends": [
34 
+      "plugin:vue/essential",
35 
+      "eslint:recommended"
36 
+    ],
37 
+    "rules": {},
38 
+    "parserOptions": {
39 
+      "parser": "babel-eslint"
40 
+    }
41 
+  },
42 
+  "postcss": {
43 
+    "plugins": {
44 
+      "autoprefixer": {}
45 
+    }
46 
+  },
47 
+  "browserslist": [
48 
+    "> 1%",
49 
+    "last 2 versions",
50 
+    "not ie <= 8"
51 
+  ]
52 
+}

二进制
public/favicon.ico 查看文件


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

1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+  <head>
4 
+    <meta charset="utf-8">
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 
+    <title>study</title>
9 
+  </head>
10 
+  <body>
11 
+    <noscript>
12 
+      <strong>We're sorry but study doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 
+    </noscript>
14 
+    <div id="app"></div>
15 
+    <!-- built files will be auto injected -->
16 
+  </body>
17 
+</html>

+ 36
- 0
src/App.vue 查看文件

1 
+<template>
2 
+  <div id="app">
3 
+    <router-view></router-view>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  name: 'app',
10 
+  components: {
11 
+  },
12 
+  data() {
13 
+    return {
14 
+      logo: './assets/logo.png',
15 
+    }
16 
+  },
17 
+  computed: {
18 
+    user: this.$store.state.user,
19 
+  },
20 
+  created() {
21 
+    this.$store.actions.getUser()
22 
+  }
23 
+}
24 
+</script>
25 
+
26 
+<style>
27 
+#app {
28 
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
29 
+  -webkit-font-smoothing: antialiased;
30 
+  -moz-osx-font-smoothing: grayscale;
31 
+  text-align: center;
32 
+  color: #2c3e50;
33 
+  margin-top: 60px;
34 
+}
35 
+
36 
+</style>

二进制
src/assets/logo.png 查看文件


+ 41
- 0
src/config/apis.js 查看文件

1 
+import get from 'lodash.get'
2 
+
3 
+const apiList = {
4 
+  app: {
5 
+    url: '',
6 
+    method: 'get',
7 
+  },
8 
+  user: {
9 
+    get: {
10 
+      url: '/api/user',
11 
+      method: 'get',
12 
+    },
13 
+    update: {
14 
+      url: '/api/user/:id',
15 
+      method: 'post',
16 
+    },
17 
+
18 
+  }
19 
+}
20 
+
21 
+// user.update
22 
+// { id: 123 }
23 
+export default function getAPI(api, params) {
24 
+  if (!api) {
25 
+    return apiList;
26 
+  }
27 
+
28 
+  const theAPI = get(api)
29 
+  if (!params) {
30 
+    return theAPI;
31 
+  }
32 
+
33 
+  let url = theAPI.url;
34 
+  Object.keys(params).forEach((key) => {
35 
+    const val = params[key];
36 
+
37 
+    url = url.replace(new RegExp(':' + key), val)
38 
+  })
39 
+
40 
+  return { ...theAPI, url }
41 
+}

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

1 
+import Vue from 'vue'
2 
+import Vant from 'vant'
3 
+import 'vant/lib/vant-css/index.css'
4 
+import App from './App.vue'
5 
+import router from './router'
6 
+import store from './store'
7 
+import './theme'
8 
+
9 
+Vue.use(Vant)
10 
+Vue.config.productionTip = false
11 
+
12 
+new Vue({
13 
+  router,
14 
+  store,
15 
+  render: h => h(App)
16 
+}).$mount('#app')

+ 43
- 0
src/pages/agent/signup.vue 查看文件

1 
+<template>
2 
+  <div class="signup-wrap">
3 
+    <div class="logo"></div>
4 
+    <div class="form">
5 
+      <van-cell-group>
6 
+        <van-field v-model="formData.name" placeholder="请输入用户名" />
7 
+        <van-field v-model="formData.phone" placeholder="请输入手机号">
8 
+          <div>获取验证码</div>
9 
+        </van-field>
10 
+      </van-cell-group>
11 
+    </div>
12 
+    <div class="btn">
13 
+      <van-button size="large">申请</van-button>
14 
+    </div>
15 
+  </div>
16 
+</template>
17 
+
18 
+<script>
19 
+export default {
20 
+  name: 'signup',
21 
+  data() {
22 
+    return {
23 
+      formData: {
24 
+        name: '',
25 
+        phone: '',
26 
+        captcha: '',
27 
+        companyName: ''
28 
+      }
29 
+    }
30 
+  },
31 
+}
32 
+</script>
33 
+
34 
+<style lang="postcss" scoped>
35 
+.signup-wrap {
36 
+  padding: 20px;
37 
+
38 
+  & .btn {
39 
+    margin-top: 36px;
40 
+  }
41 
+}
42 
+</style>
43 
+

+ 67
- 0
src/pages/index.vue 查看文件

1 
+<template>
2 
+  <div class="hello">
3 
+    <h1>{{ msg }}</h1>
4 
+    <p>
5 
+      For guide and recipes on how to configure / customize this project,<br>
6 
+      check out the
7 
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8 
+    </p>
9 
+    <h3>Installed CLI Plugins</h3>
10 
+    <ul>
11 
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 
+    </ul>
14 
+    <h3>Essential Links</h3>
15 
+    <ul>
16 
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 
+    </ul>
22 
+    <h3>Ecosystem</h3>
23 
+    <ul>
24 
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 
+    </ul>
30 
+    <p>
31 
+      <van-button @click="gotoSignUp">注册</van-button>
32 
+      <router-link :to="{ name: 'signup' }">注册2</router-link>
33 
+    </p>
34 
+  </div>
35 
+</template>
36 
+
37 
+<script>
38 
+export default {
39 
+  name: 'HelloWorld',
40 
+  props: {
41 
+    msg: String
42 
+  },
43 
+  methods: {
44 
+    gotoSignUp() {
45 
+      this.$router.push({ name: 'signup' })
46 
+    }
47 
+  }
48 
+}
49 
+</script>
50 
+
51 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
52 
+<style scoped>
53 
+h3 {
54 
+  margin: 40px 0 0;
55 
+}
56 
+ul {
57 
+  list-style-type: none;
58 
+  padding: 0;
59 
+}
60 
+li {
61 
+  display: inline-block;
62 
+  margin: 0 10px;
63 
+}
64 
+a {
65 
+  color: #42b983;
66 
+}
67 
+</style>

+ 35
- 0
src/pages/layout/index.vue 查看文件

1 
+<template>
2 
+  <div class="layout">
3 
+    <div class="head"></div>
4 
+    <div class="container">
5 
+      <div class="siderbar"></div>
6 
+      <div class="body"><router-view></router-view></div>
7 
+    </div>
8 
+    <div class="footer"></div>
9 
+
10 
+
11 
+    <div class="layout__body">
12 
+      <router-view></router-view>
13 
+    </div>
14 
+  </div>
15 
+</template>
16 
+
17 
+<script>
18 
+export default {
19 
+  name: 'layout'
20 
+}
21 
+</script>
22 
+
23 
+
24 
+<style lang="postcss" scoped>
25 
+.layout {
26 
+  height: 100%;
27 
+  overflow-y: auto;
28 
+  background-color: #F8F8F8;
29 
+
30 
+  &__body {
31 
+
32 
+  }
33 
+}
34 
+</style>
35 
+

+ 9
- 0
src/router/index.js 查看文件

1 
+import Vue from 'vue'
2 
+import VueRouter from 'vue-router'
3 
+import routes from './routes'
4 
+
5 
+Vue.use(VueRouter)
6 
+
7 
+const router = new VueRouter({routes})
8 
+
9 
+export default router

+ 22
- 0
src/router/routes.js 查看文件

1 
+import Layout from '../pages/layout'
2 
+import Index from '../pages'
3 
+import SignUp from '../pages/agent/signup.vue'
4 
+
5 
+export default [
6 
+  {
7 
+    path: '/',
8 
+    component: Layout,
9 
+    children: [
10 
+      {
11 
+        path: '',
12 
+        name: 'index',
13 
+        component: Index
14 
+      },
15 
+      {
16 
+        path: 'signup',
17 
+        name: 'signup',
18 
+        component: SignUp
19 
+      }
20 
+    ],
21 
+  }
22 
+]

+ 10
- 0
src/store/app.js 查看文件

1 
+export default {
2 
+  state: {
3 
+    logo: '',
4 
+  },
5 
+  mutations: {
6 
+    changeLogo(state, newLogo) {
7 
+      state.logo = newLogo
8 
+    }
9 
+  }
10 
+}

+ 13
- 0
src/store/index.js 查看文件

1 
+import Vue from 'vue'
2 
+import Vuex, { Store } from 'vuex'
3 
+
4 
+Vue.use(Vuex)
5 
+
6 
+const stoer = new Vuex({
7 
+  modules: {
8 
+    app: reqire('./app.js').default,
9 
+    user: reqire('./user.js').default,
10 
+  }
11 
+});
12 
+
13 
+export default store;

+ 25
- 0
src/store/user.js 查看文件

1 
+import request from '../utils/request'
2 
+import getAPI from '../config/apis'
3 
+
4 
+export default {
5 
+  state: {
6 
+    name: '',
7 
+    id: '',
8 
+    avator: '',
9 
+  },
10 
+  mutations: {
11 
+    updateUser(state, newUser) {
12 
+      const { name, id, avator } = newUser;
13 
+      state.name = name;
14 
+      state.id = id;
15 
+      state.avator = avator;
16 
+    }
17 
+  },
18 
+  actions: {
19 
+    getUser({ commit }, params) {
20 
+      request({ ...getAPI('user.get'), query: params }).then((data) => {
21 
+        commit('updateUser', data)
22 
+      })
23 
+    }
24 
+  }
25 
+}

+ 5
- 0
src/theme.js 查看文件

1 
+// 引入基础样式
2 
+import 'vant/packages/vant-css/src/base.css';
3 
+
4 
+// 引入组件对应的样式
5 
+import 'vant/packages/vant-css/src/button.css';

+ 25
- 0
src/utils/loadding.js 查看文件

1 
+import { Toast } from 'vant'
2 
+
3 
+let loaddingID = 0;
4 
+let loaddingInst = [];
5 
+
6 
+export default {
7 
+  start: () => {
8 
+    if (loaddingInst.length === 0) {
9 
+      Toast.loading({
10 
+        mask: true,
11 
+      })
12 
+    }
13 
+
14 
+    loaddingID += 1;
15 
+    loaddingInst.push(loaddingID)
16 
+    return loaddingID;
17 
+  },
18 
+  stop : (id) => {
19 
+    loaddingInst = loaddingInst.filter(x => x !== id)
20 
+
21 
+    if (loaddingInst.length === 0) {
22 
+      Toast.clear()
23 
+    }
24 
+  }
25 
+}

+ 46
- 0
src/utils/request.js 查看文件

1 
+import axios from 'axios'
2 
+import loadding from './loadding'
3 
+
4 
+export default function request(config) {
5 
+  return new Promise((resolve, reject) => {
6 
+    const { query, data, ...conf } = config;
7 
+    const params = query;
8 
+    const formHead = { 'content-type': "multipart/form-data"}
9 
+    const fmtData = new FormData()
10 
+
11 
+    if (data) {
12 
+      Object.keys(data).forEach((k) => {
13 
+        const val = data[k]
14 
+
15 
+        if (Array.isArray(val)) {
16 
+          val.forEach((v) => {
17 
+            fmtData.append(k, v)
18 
+          })
19 
+        } else {
20 
+          fmtData.append(k, val)
21 
+        }
22 
+      })
23 
+    }
24 
+
25 
+    const id = loadding.start()
26 
+
27 
+    axios({
28 
+      params,
29 
+      data: !data ? undefined : fmtData,
30 
+      headers: {
31 
+        ...formHead
32 
+      },
33 
+      ...conf,
34 
+    }).then((response) => {
35 
+      const data = response.data;
36 
+      loadding.stop(id);
37 
+
38 
+      resolve(data);
39 
+    }).catch((error) => {
40 
+      console.error(error);
41 
+      loadding.stop(id);
42 
+
43 
+      reject(error.message);
44 
+    });
45 
+  });
46 
+}

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

1 
+module.exports = {
2 
+  css: {
3 
+    loaderOptions: {
4 
+      postcss: {
5 
+        plugins: [
6 
+          require('postcss-import'),
7 
+          require('postcss-theme-variables')({
8 
+            vars: {
9 
+              'button-default-color': '#fff',
10 
+              'button-default-background-color': '#3F4144',
11 
+              'button-default-border-color': '#3F4144',
12 
+            },
13 
+            prefix: '$'
14 
+          }),
15 
+          require('precss')(),
16 
+          require('autoprefixer')({
17 
+            browsers: ['Android >= 4.0', 'iOS >= 7']
18 
+          })
19 
+        ]
20 
+      }
21 
+    }
22 
+  }
23 
+}