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
在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')
}
]
})
在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
}
}
});
<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>
在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>
在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.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')
涉及文件: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>
涉及文件:src/views/about.vue 和 src/utils/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
<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>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。