feat: starter built

hawtim · hawtim · commit 37a338564e3c · 2020-10-16T17:05:04.000+08:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,14 @@
+{
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "libraryDirectory": "lib",
+        // https://github.com/ant-design/babel-plugin-import#style
+        "style": "css"
+      },
+      "antd"
+    ]
+  ]
+}
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+# 指定 npm 的代理源，比较旧的包可能会找不到，如果找不到的话，可以暂时注释掉下面的代理，再进行 npm install
+#registry=https://registry.npm.taobao.org
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,13 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "jsxBracketSameLine": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "strict"
+}
diff --git a/README.md b/README.md
@@ -1 +1,9 @@
-# suono-player
+# vue3-template-starter
+
+## Feature
+
+集成了 vue3 vue-router vuex 生态，使用 Typescript 及 Ant-design-vue 进行开发
+
+## License
+
+MIT
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vite App</title>
+  <title>Suono Player</title>
 </head>
 <body>
   <div id="app"></div>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "suono-player",
   "version": "1.0.0",
+  "author": "hawtim<hawtimzhang@gmail.com>",
   "description": "A audio player using suono and vue3",
   "main": "index.js",
   "scripts": {
@@ -11,17 +12,25 @@
     "type": "git",
     "url": "git+https://github.com/hawtim/suono-player.git"
   },
-  "author": "hawtim<hawtimzhang@gmail.com>",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/hawtim/suono-player/issues"
   },
   "homepage": "https://github.com/hawtim/suono-player#readme",
   "dependencies": {
-    "vue": "^3.0.0-rc.1"
+    "ant-design-vue": "^2.0.0-beta.10",
+    "lodash": "^4.17.20",
+    "suono": "^0.1.4",
+    "vue": "^3.0.0-rc.1",
+    "vue-router": "^4.0.0-beta.13",
+    "vuex": "^4.0.0-beta.4"
   },
   "devDependencies": {
-    "vite": "^1.0.0-rc.1",
-    "@vue/compiler-sfc": "^3.0.0-rc.1"
+    "@vue/compiler-sfc": "^3.0.0-rc.1",
+    "babel-plugin-import": "^1.13.1",
+    "dayjs": "^1.9.3",
+    "normalize.css": "^8.0.1",
+    "typescript": "^4.0.3",
+    "vite": "^1.0.0-rc.1"
   }
 }
diff --git a/shim.d.ts b/shim.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { Component } from 'vue'
+  const component: Component
+  export default component
+}
diff --git a/src/App.vue b/src/App.vue
@@ -1,15 +1,12 @@
 <template>
+<div id="app">
   <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3.0 + Vite" />
+  <router-view></router-view>
+</div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
+  name: 'App'
 }
 </script>
diff --git a/src/assets/index.css b/src/assets/index.css
diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,18 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import './index.css'
+import router from './router'
+import 'normalize.css'
+import './assets/index.css'
+import Antd from 'ant-design-vue'
 
-createApp(App).mount('#app')
+// import { Button } from 'ant-design-vue'
+import 'ant-design-vue/dist/antd.css' // Per Ant Design's docs
+
+// Create and mount the root instance.
+const app = createApp(App)
+// Make sure to _use_ the router instance to make the
+// whole app router-aware.
+app.use(router)
+app.use(Antd)
+// app.use(Button)
+app.mount('#app')
diff --git a/src/pages/Message.vue b/src/pages/Message.vue
@@ -1,7 +1,8 @@
 <template>
+<div>
   <h1>{{ msg }}</h1>
-  <button @click="count++">count is: {{ count }}</button>
-  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
+  <a-button @click="info">Show Message</a-button>
+</div>
 </template>
 
 <script>
@@ -14,6 +15,11 @@ export default {
     return {
       count: 0
     }
+  },
+  methods: {
+    info() {
+      this.$message.info('This is a normal message')
+    }
   }
 }
 </script>
diff --git a/src/pages/NotFound.vue b/src/pages/NotFound.vue
@@ -0,0 +1,11 @@
+<template>
+<div>
+  <h1>NotFound</h1>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'NotFound'
+}
+</script>
diff --git a/src/pages/Todo.vue b/src/pages/Todo.vue
@@ -0,0 +1,146 @@
+<template>
+<div class="todo-list">
+  <div>
+    <label>新增待办</label>
+    <input v-model="state.todo" @keyup.enter="handleAddTodo">
+  </div>
+  <div>
+    <h3>待办列表({{todos.length}})</h3>
+    <ul>
+      <li v-for="item in todos" :key="item.id" @click="handleChangeStatus(item, true)">
+        <input type="checkbox">
+        <label>{{item.text}}</label>
+      </li>
+    </ul>
+  </div>
+  <div>
+    <h3>已办列表({{dones.length}})</h3>
+  </div>
+  <ul>
+    <li v-for="item in dones" :key="item.id" @click="handleChangeStatus(item, false)">
+      <input type="checkbox" checked>
+      <label>{{item.text}}</label>
+    </li>
+  </ul>
+</div>
+<!-- 模块2 -->
+<div class="name" @click="handleClickName">
+  {{nameVal.name + nameVal.count}}
+</div>
+<!-- 双向数据绑定 -->
+<input type="text" v-model="inputVal">
+<p>{{inputVal}}</p>
+<p>当前鼠标x：{{ x }},y：{{ y }}</p>
+</template>
+
+<script lang="ts">
+// 在vue2中 data 在vue3中使用 reactive代替
+import {
+  reactive,
+  computed,
+  onMounted,
+  toRefs
+} from 'vue'
+
+import {
+  useRouter
+} from 'vue-router'
+
+import usePosition from '../utils/usePosition'
+
+export default {
+  // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中完成
+  setup(props, context) {
+    console.log('created')
+    onMounted(() => {
+      console.log('mounted')
+    })
+    onMounted(() => {
+      console.log('mounted2')
+    })
+    // 通过reactive 可以初始化一个可响应的数据，与Vue2.0中的Vue.observer很相似
+    const state = reactive({
+      todoList: [{
+          id: 1,
+          done: false,
+          text: '吃饭'
+        },
+        {
+          id: 2,
+          done: false,
+          text: '睡觉'
+        },
+        {
+          id: 3,
+          done: false,
+          text: '打豆豆'
+        }
+      ],
+      todo: ''
+    })
+    // 使用计算属性生成待办列表
+    const todos = computed(() => {
+      return state.todoList.filter(item => !item.done)
+    })
+    // 使用计算属性生成已办列表
+    const dones = computed(() => {
+      return state.todoList.filter(item => item.done)
+    })
+    // 修改待办状态
+    const handleChangeStatus = (item: any, status: boolean) => {
+      item.done = status
+    }
+    // 新增待办
+    const handleAddTodo = () => {
+      if (!state.todo) {
+        alert('请输入待办事项')
+        return
+      }
+      state.todoList.push({
+        text: state.todo,
+        id: Date.now(),
+        done: false
+      })
+      state.todo = ''
+    }
+    const nameVal = reactive({
+      name: 'lm',
+      count: 0
+    })
+    const handleClickName = () => {
+      nameVal.count++
+    }
+    // 双向数据绑定
+    const inputValModel = reactive({
+      inputVal: 111,
+      inputVal2: 222
+    })
+    const {
+      x,
+      y
+    } = usePosition()
+    // 在Vue3.0中，所有的数据和方法都通过在setup 中 return 出去，然后在template中使用
+    return {
+      state,
+      todos,
+      dones,
+      handleChangeStatus,
+      handleAddTodo,
+      nameVal,
+      handleClickName,
+      ...toRefs(inputValModel), //双向数据绑定
+      ...usePosition()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.todo-list {
+  text-align: center;
+}
+
+.todo-list ul li {
+  list-style: none;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
@@ -0,0 +1,21 @@
+import * as VueRouter from 'vue-router'
+import Todo from '../pages/Todo.vue'
+import NotFound from '../pages/NotFound.vue'
+import Message from '../pages/Message.vue'
+
+const routes = [
+  { path: '/todo', name: 'todo', component: Todo },
+  { path: '/message', name: 'message', component: Message },
+  // plan on directly navigating to the not-found route using its name
+  { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound }
+]
+// 3. Create the router instance and pass the `routes` option
+// You can pass in additional options here, but let's
+// keep it simple for now.
+const router = VueRouter.createRouter({
+  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
+  history: VueRouter.createWebHashHistory(),
+  routes // short for `routes: routes`
+})
+
+export default router
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -0,0 +1,12 @@
+import { createStore } from 'vuex'
+
+interface State {
+  username: string
+}
+export default createStore({
+  state(): State {
+    return {
+      username: '鹿鸣'
+    }
+  }
+})
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -0,0 +1,16 @@
+export const throttle = (func: Function, wait: number, mustRun: number) => {
+  let timeout: number
+  let startTime = +new Date()
+  return (...rest: any) => {
+    const curTime = +new Date()
+    clearTimeout(timeout)
+    // 如果达到了规定的触发时间间隔，触发 handler
+    if (curTime - startTime >= mustRun) {
+      func.apply(null, rest)
+      startTime = curTime
+      // 没达到触发间隔，重新设定定时器
+    } else {
+      timeout = setTimeout(func, wait)
+    }
+  }
+}
diff --git a/src/utils/usePosition.ts b/src/utils/usePosition.ts
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# 指定 npm 的代理源，比较旧的包可能会找不到，如果找不到的话，可以暂时注释掉下面的代理，再进行 npm install`
	`2`	`+#registry=https://registry.npm.taobao.org`