# vite2-vue3-typescript

**Repository Path**: iptu/vite2-vue3-typescript

## Basic Information

- **Project Name**: vite2-vue3-typescript
- **Description**: vite2-vue3-typescript
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-08-01
- **Last Updated**: 2021-08-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## vue3.0+vite2.0+Typescript 0基础搭建新项目，后面有优化方案,现学现会,不会包退

### 全局安装一下create-vite-app
>npm - 
>npm i -g create-vite-app ;
>yarn - 
>yarn global add create-vite-app


### 创建项目

```ts
create-vite-app project_name
```
### 根据提示安装对应依赖
```ts
cd project_name
npm install
npm run dev
```
### 预览项目
在浏览器输入http://localhost:3000 即可预览

>vite文档给出的命令是 (要在空文件夹里面)
npm init vite-app   
yarn create vite- app
等价于
全局安装 create-vite-app 
然后  create-vite-app project-name
#### router
>在src目录下新建src/router/index.ts  内容如下
```ts
import { createRouter, createWebHashHistory } from 'vue-router'

// 在 Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  // 路由地址
  routes: [
    {
      path: '/',
      redirect: 'about'
    },
    {
      path: '/todo',
      name: 'todo',
      // 必须添加.vue后缀
      component: () => import('../views/todoList.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/about.vue')
    }
  ]
})

```
#### stroe
> 在src目录下新建src/store/index.ts文件  内容如下
```ts
import { createStore } from 'vuex';
export default createStore({
  state: {
    username: '江子',
    taskList: []
  },

  mutations: {
    add(state: any, value: string) {
      state.taskList.push({ name: value, isfinished: false })
    },
    del(state: any, index: number) {
      state.taskList.splice(index, 1)
    },
    updates(state: any, payload: any) {
      const { index, isfinished } = payload;
      state.taskList[index].isfinished = isfinished
    }
    
  }
});
```

#### App.js
```ts
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/about">aboutLists</router-link>|
      <router-link to="/todo">todoList</router-link>
    </div>
    <router-view />
  </div>
</template>

<script lang="ts">

export default {
  name: 'App'
}
</script>

<style lang="less">
</style>
```
#### about.vue
>在src目录下新建src/views/about.vue文件 内容如下
```ts
<template>
    <div class="about">
        <h4>{{ name }}</h4>
    </div>
    <hr />
    <div>
        <input type="text" v-model="inputValue" @keydown.enter="add" placeholder="输入内容后按：回车" />
        <br />
        <div v-for="(item,i) in store.state.taskList" :key:any="i" class="items">
            <span
                class="iteminput"
                :class="item.isfinished ? 'selectedcss' : ''"
                @click="update(item, i)"
            >{{ item.name }}</span>
            <span @click="del(i)">✕</span>
        </div>
    </div>
</template>

<script lang='ts'>
import { ref, watch } from 'vue';
import { useStore } from 'vuex'

export default {
    name: 'about',
    setup() {
        const store = useStore();
        const name = ref('酱紫出品');
        const inputValue = ref('');
        const add = () => {
            if (!inputValue.value) {
                return
            }
            store.commit('add', inputValue.value);
            inputValue.value = '';
        };

        const del = (i: any) => {
            store.commit('del', i * 1)
            console.log(i);
        };

        const update = (item: any, i: any) => {
            store.commit('updates', { index: i * 1, isfinished: !item.isfinished })
        }

        return {
            update,
            add,
            del,
            inputValue,
            name,
            store
        };
    }
};
</script>

<style scoped>
.items {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0px auto;
    border-bottom: 1px solid #ccc;
    width: 80%;
}
.iteminput {
    width: 100px;
}
.selectedcss {
    text-decoration: line-through;
    color: #ccc;
}
input {
    width: 70%;
    height: 30px;
    border: 2px solid #ccc;
    border-radius: 10px;
}
</style>
```

#### todoList.vue
>在src目录下新建src/views/about.vue文件 内容如下
```ts
<template>
  <div class="home">
    <!-- input输入list内容 -->
    <div>
      <input
        @keyup.enter="addTask"
        class="input"
        type="text"
        v-model="inputValue"
        placeholder="请输入ddd"
      />
    </div>
    <!-- todoList内容展示和删除 -->
    <ul class="ul" v-if="taskList.length">
      <li class="item" v-for="(item, index) in taskList" :key:any="index">
        <p
          @click="updateStatus(index, !item.isfinished)"
          class="content"
          :class="item.isfinished ? 'active' : ''"
        >{{ item.lable }}</p>
        <div class="item-delete" @click="deleteTask(index)">X</div>
      </li>
      <li v-if="taskList.length === 0" class="item-none">暂无数据</li>
    </ul>
  </div>
</template>


<script lang="ts">

import { ref, computed } from 'vue';
import { useStore } from "vuex";
export default {

  setup() {
    const store = useStore()
    const taskList = computed(() => store.state.taskList);
    const inputValue = ref('');
    const addTask = () => {
      store.commit('createTask', {
        lable: inputValue.value,
        isfinished: false
      })
      inputValue.value = ''
    }

    const updateStatus = (index: any, status: any) => {
      store.commit('updateStatus', {
        index,
        status
      })
    }

    const deleteTask = (index: any) => {
      store.commit('deleteTask', index)
    }

    return {
      inputValue,
      taskList,
      addTask,
      updateStatus,
      deleteTask
    };
  }
}
</script>

<style scoped lang='less'>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;

  text-align: left;
}
.home {
  max-width: 400px;
  margin: 0 auto;
  .input {
    width: 100%;
    height: 40px;
    border-radius: 5px;
    outline-style: none;
    border: 2px solid #999;
    padding: 51px 10px;
  }
  .ul {
    margin-top: 10px;
  }

  .item {
    height: 40px;
    line-height: 40px;
    padding-bottom: 5px;
    border-bottom: 1px solid #dcdfe6;
    color: red;
  }
  .item-none {
    height: 40px;
    line-height: 40px;
    padding-bottom: 5px;
    color: #333333;
    text-align: center;
  }
  .content {
    float: left;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
  }
  p.active {
    text-decoration: line-through;
    color: #999999;
  }
  .item-delete {
    float: right;
    width: 25px;
    text-align: center;
    cursor: pointer;
  }
}
</style>

```

#### main.ts
>把 main.js 改成 main.ts   内容如下
```ts
import { createApp } from 'vue'
import App from './App.vue'
import './index.css';
const app = createApp(App);
app.mount('#app')
// createApp(App).mount('#app')
```

---
## 优化

### about.vue 文件优化方案1
> 涉及文件：src/views/about.vue
> 把点击 操作方法 都抽离出来  放到options里面，setup里就简捷多了
```ts
<template>
    <div class="about">
        <h4>{{ name }}</h4>
    </div>
    <hr />
    <div>
        <input type="text" v-model="inputValue" @keydown.enter="add" placeholder="输入内容后按：回车" />
        <br />
        <div v-for="(item,i) in store.state.taskList" :key:any="i" class="items">
            <span
                class="iteminput"
                :class="item.isfinished ? 'selectedcss' : ''"
                @click="update(item, i)"
            >{{ item.name }}</span>
            <span @click="del(i)">✕</span>
        </div>
    </div>
</template>

<script lang='ts'>
import { ref, watch } from 'vue';
import { useStore } from 'vuex'

// 操作方法 抽离出来 
function options() {
    const store = useStore();
    const name = ref('酱紫出品');
    const inputValue = ref('');
    const add = () => {
        if (!inputValue.value) {
            return
        }
        store.commit('add', inputValue.value);
        inputValue.value = '';
    };
    const del = (i: any) => {
        store.commit('del', i * 1)
        console.log(i);
    };
    const update = (item: any, i: any) => {
        store.commit('updates', { index: i * 1, isfinished: !item.isfinished })
    }
    return { update, add, del, inputValue, name, store }
}

export default {
    name: 'about',
    setup() {
        let { update, add, del, inputValue, name, store } = options();
        return { update, add, del, inputValue, name, store }
    }
};
</script>

<style scoped>
.items {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0px auto;
    border-bottom: 1px solid #ccc;
    width: 80%;
}
.iteminput {
    width: 100px;
}
.selectedcss {
    text-decoration: line-through;
    color: #ccc;
}
input {
    width: 70%;
    height: 30px;
    border: 2px solid #ccc;
    border-radius: 10px;
}
</style>

```

### about.vue 文件优化方案2
> 涉及文件：src/views/about.vue  和   src/utils/options.ts  
> 假设 操作方法其他文件里面也要用到 可以抽离到一个文件里面去

#### options.ts
> 新建ts文件：src/utils/options.ts，把方法抽离到options文件里面去
```ts
import { ref, watch } from 'vue';
import { useStore } from 'vuex';

// 操作方法 抽离出来
function options() {
  const store = useStore();
  const name = ref('酱紫出品');
  const inputValue = ref('');
  const add = () => {
    if (!inputValue.value) {
      return
    }
    store.commit('add', inputValue.value);
    inputValue.value = '';
  };
  const del = (i: any) => {
    store.commit('del', i * 1)
    console.log(i);
  };
  const update = (item: any, i: any) => {
    store.commit('updates', { index: i * 1, isfinished: !item.isfinished })
  }
  return { update, add, del, inputValue, name, store }
}

export default options
```


#### about.vue
```ts

<template>
    <div class="about">
        <h4>{{ name }}</h4>
    </div>
    <hr />
    <div>
        <input type="text" v-model="inputValue" @keydown.enter="add" placeholder="输入内容后按：回车" />
        <br />
        <div v-for="(item,i) in store.state.taskList" :key:any="i" class="items">
            <span
                class="iteminput"
                :class="item.isfinished ? 'selectedcss' : ''"
                @click="update(item, i)"
            >{{ item.name }}</span>
            <span @click="del(i)">✕</span>
        </div>
    </div>
</template>

<script lang='ts'>
import options from '../utils/options'; // 引入options
export default {
    name: 'about',
    setup() {
        let { update, add, del, inputValue, name, store } = options();
        return { update, add, del, inputValue, name, store }
    }
};
</script>

<style scoped>
.items {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0px auto;
    border-bottom: 1px solid #ccc;
    width: 80%;
}
.iteminput {
    width: 100px;
}
.selectedcss {
    text-decoration: line-through;
    color: #ccc;
}
input {
    width: 70%;
    height: 30px;
    border: 2px solid #ccc;
    border-radius: 10px;
}
</style>
```