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";`,
            }
        },
    }
 }