1 Star 0 Fork 1

我不是达芬奇/vite2-vue3-typescript

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

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

全局安装一下create-vite-app

npm - npm i -g create-vite-app ; yarn - yarn global add create-vite-app

创建项目

create-vite-app project_name

根据提示安装对应依赖

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 内容如下

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文件 内容如下

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

<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文件 内容如下

<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文件 内容如下

<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 内容如下

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里就简捷多了

<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文件里面去

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


<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>

空文件

简介

取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/iptu/vite2-vue3-typescript.git
git@gitee.com:iptu/vite2-vue3-typescript.git
iptu
vite2-vue3-typescript
vite2-vue3-typescript
master

搜索帮助