1

3 years ago · cc87deff5e
22 changed files with 29364 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,19 @@
+# vue3demo
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,26 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    [
+      "import",
+      {
+        "libraryName": "@nutui/nutui",
+        "libraryDirectory": "dist/packages/_es",
+        // customName自定义兼容国际化使用
+        "customName": (name, file) => {
+          if (name == 'Locale') {
+            return '@nutui/nutui/dist/packages/locale/lang';
+          } else {
+            return `@nutui/nutui/dist/packages/_es/${name}`;
+          }
+        },
+        "style": (name, file) => name.toLowerCase().replace('_es/', '') + '/index.scss',
+        "camel2DashComponentName": false
+      },
+      'nutui3-vue'
+    ]
+    
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,29 @@
+{
+  "name": "vue3demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "@nutui/nutui": "^3.3.0",
+    "axios": "^1.2.1",
+    "core-js": "^3.6.5",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.0-0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-router": "~4.5.15",
+    "@vue/cli-plugin-typescript": "~4.5.15",
+    "@vue/cli-plugin-vuex": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-plugin-import": "^1.13.5",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "typescript": "~4.1.5"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <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>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,45 @@
+<template>
+  <router-view />
+</template>
+<script>
+export default {
+  data() {
+    return {
+      timer:null
+    };
+  },
+  mounted() {
+    // this.timer=null
+    // clearInterval(this.timer)
+    // this.timer=setInterval(()=>{
+    //   // location.reload() //原生刷新
+    //   this.$router.go() //路由刷新
+    // },5000)
+  },
+  methods: {},
+};
+</script>
+
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+</style>
--- a/src/api/admin.js
+++ b/src/api/admin.js
@ -0,0 +1,11 @@
+import request from '../utils/request'
+
+export function getiddata(query) {
+  return request({
+    url: '/api/article/queryById',
+    method: 'get',
+    params: query
+  })
+}
+
+
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,167 @@
+<template>
+  <div class="hello">
+    <div class="margintopBox"></div>
+    <div class="out">
+      <div class="in1">123</div>
+      <div class="in2">456</div>
+    </div>
+
+    <div class="item1">111</div>
+    <div class="item_box"></div>
+    <div class="item2">222</div>
+  </div>
+</template>
+
+<script>
+  import {
+    computed,
+    defineComponent,
+    onMounted,
+    onUpdated,
+    reactive,
+    ref,
+    toRefs
+  } from 'vue';
+  import {
+    getiddata
+  } from "../api/admin";
+
+  export default defineComponent({
+    name: 'HelloWorld',
+    props: {
+      msg: String,
+    },
+    setup(props, ctx) {
+
+      const state = reactive({
+        a: 0,
+        page: 0,
+        list: [1, 2, 3, 4],
+        count: computed(() => state.a + 1),
+        fin: computed(() => state.list.filter((item) => item > 1)),
+        text: '',
+      })
+      onMounted(() => {
+        console.log('mounted');
+        getdata()
+      });
+      onUpdated(() => {
+        // 文本内容应该与当前的 `count.value` 一致
+        let a = document.querySelector('#a')
+        // console.log(a?.textContent)
+      })
+
+      function add() {
+        state.a++
+      }
+
+      function handlertext() {
+        console.log(state.text);
+
+      }
+
+      function getdata() {
+        getiddata({
+          title:'文章名称',
+          id: 29,
+
+        }).then(res => {
+          console.log(res);
+        })
+
+      }
+
+      function clickCount() {
+        console.log(state.count);
+        console.log(props.msg);
+        ctx.emit('handler', state.count)
+
+
+      }
+
+      return {
+        ...toRefs(state),
+        add,
+        clickCount,
+        handlertext,
+        getdata
+      }
+    }
+  });
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+  h3 {
+    margin: 40px 0 0;
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  li {
+    display: inline-block;
+    margin: 0 10px;
+  }
+
+  a {
+    color: #42b983;
+  }
+
+  .nut-swiper-item {
+    line-height: 150px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .hello{
+    background-color: rgb(230, 230, 230);
+    // border: 1px solid transparent;
+    overflow: auto;
+  }
+  .margintopBox{
+    margin-top: 100px;
+  }
+
+  .out {
+    background-color: red;
+    overflow: auto;
+    // display: flex;
+
+    .in1 {
+      background-color: green;
+      width: 100px;
+      height: 100px;
+      float: left;
+    }
+
+    .in2 {
+      background-color: gold;
+      width: 200px;
+      display: flow-root;
+    }
+
+    .in3 {
+      background-color: blue;
+    }
+  }
+
+  .item1 {
+    background-color: rgb(0, 255, 76);
+    margin: 10px 0;
+  }
+
+  .item_box {
+    overflow: auto;
+  }
+
+  .item2 {
+    background-color: rgb(0, 255, 76);
+    margin: 10px 0;
+
+  }
+</style>
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,14 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+// import './plugins/nutui'
+
+import {
+Button,
+Icon,Swiper,SwiperItem,Input
+} from "@nutui/nutui";
+let app=createApp(App)
+
+app.use(Button).use(Icon).use(Swiper).use(SwiperItem).use(Input)
+app.use(store).use(router).mount('#app')
--- a/src/plugins/nutui.ts
+++ b/src/plugins/nutui.ts
@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import App from '../App.vue'
+import {
+Button,
+Icon,Swiper,SwiperItem
+} from "@nutui/nutui";
+
+// let app=createApp()
+
+App.use(Button).use(Icon).use(Swiper).use(SwiperItem)
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,25 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+export default router
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -0,0 +1,12 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -0,0 +1,53 @@
+import axios from 'axios'
+
+// create an axios instance
+const service = axios.create({
+  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  timeout: 5000 // request timeout
+})
+
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    // do something before request is sent
+
+
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+   */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  response => {
+    const res = response.data
+
+    // if the custom code is not 20000, it is judged as an error.
+    if (res.code !== 0) {
+      return Promise.reject(res)
+    } else {
+      return res.data
+    }
+  },
+  error => {
+    console.log('err' + error) // for debug
+
+    return Promise.reject(error)
+  }
+)
+
+export default service
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -0,0 +1,26 @@
+<template>
+  <div class="home">
+    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" @handler="getvalue"/>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+
+export default defineComponent({
+  name: 'Home',
+  components: {
+    HelloWorld,
+  },
+  setup(){
+    function getvalue(a:any){
+      console.log('子组件传过来的值'+a);
+    }
+
+    return{
+      getvalue,
+    }
+  }
+});
+</script>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+, "src/**/*.js" ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,34 @@
+module.exports = {
+    lintOnSave: false,
+    assetsDir: "static/wap",
+    productionSourceMap: false,
+    publicPath: '/',
+    devServer: {
+        port: 8080, // 端口号
+        host: '0.0.0.0',
+        disableHostCheck: true,
+        https: false, // https:{type:Boolean}
+        open: true,
+        proxy: {
+            '/api': { //代理api
+                target: 'http://localhost:3000/',
+                ws: true, // proxy websockets
+                changeOrigin: true, //是否跨域
+                pathRewrite: { //重写路径
+                    '^/api': ''
+                }
+            },
+        }
+    },
+    css: {
+        loaderOptions: {
+            // 给 sass-loader 传递选项
+            scss: {
+                // @/ 是 src/ 的别名
+                // 注意：在 sass-loader v7 中，这个选项名是 "data"
+                // @import "@/assets/custom_theme.scss"; 自定义主题
+                prependData: `@import "@nutui/nutui/dist/styles/variables.scss";`,
+            }
+        },
+    }
+}