⑦ vue 项目开发配套工具
vue 项目开发配套工具
1 VueCLI 的使用和单文件组件
1.1 相关命令行
-
安装node
node -v
-
查看npm
npm -v
-
安装nrm 使用镜像源安装依赖
npm i nrm -g
-
安装脚手架工具
npm i -g @vue/cli
-
创建项目
vue create demo
- 人工选择特性
1.2 单文件组件
.vue
文件 就是单文件组件
2 使用单文件组件编写 TodoList
App.vue
<template>
<div>
<input v-model="inputVal" />
<button class="button" @click="handleClick">提交</button>
</div>
<ul>
<list-item v-for="item in list" :key="item" :msg="item" />
</ul>
</template>
<script>
import { reactive, ref } from 'vue';
import ListItem from './components/ListItem.vue'
export default {
name: 'App',
components: { ListItem },
setup() {
const inputVal = ref('');
const list = reactive([]);
const handleClick = () => {
list.push(inputVal.value);
inputVal.value = '';
}
return { list, inputVal, handleClick }
}
}
</script>
<style>
.button {
margin-left: 20px;
color: red;
}
</style>
ListItem.vue
<template>
<li class="button">{{msg}}</li>
</template>
<script>
export default {
name: 'ListItem',
props: {
msg: String
}
}
</script>
<style>
</style>
3 Vue-Router 路由的理解和使用
- 路由是指根据
url
的不同,展示不同的内容
3.1 如何使用路由
-
<router-link>
是跳转路由的标签 -
<router-view>
负责展示当前路由对应的组件内容
3.2 异步加载路由
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// 异步加载路由
component: () => import('../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
4 VueX 的语法详解
4.1 为什么使用 vuex
-
vuex
状态管理工具 -
vuex
创建了一个全局唯一的仓库,用来存放全局的数据
4.2 state
1. 定义 state
store > index.js
import { createStore } from 'vuex'
export default createStore({
state: {
name: 'dell'
}
})
2. 使用 state
-- this.$store.state.xxx
<template>
<h1>{{myName}}</h1>
</template>
<script>
export default {
name: 'HomeView',
computed: {
myName() {
return this.$store.state.name
}
},
}
</script>
4.3 mutations
commit
和mutation
做关联
- 要求:只允许写同步代码,不允许写异步代码
想改变数据,
vuex
要求
-
提交一个
commit
触发一个mutation
-
对应的
mutation
被执行 -
在
mutation
里面修改数据
- home.vue
methods: {
handleClick() {
this.$store.commit('change')
}
}
- store > index.js
export default createStore({
state: {
name: 'dell'
},
getters: {
},
mutations: {
change() {
this.state.name = 'lee'
}
},
actions: {
},
})
4.4 actions
dispatch
和actions
做关联
4.1 想异步改变数据,vuex
要求
-
必须派发一个
action
-
store
感知到你发出了一个叫change
的action
,执行change
方法 -
提交一个
commit
触发一个mutation
-
对应的
mutation
被执行 -
在
mutation
里面修改数据
- home.vue
methods: {
handleClick() {
this.$store.dispatch('change')
}
}
- store > index.js
export default createStore({
state: {
name: 'dell'
},
getters: {
},
mutations: {
change() {
console.log('mutation');
}
},
actions: {
setTimeout(() => {
change() {
this.commit('change')
}
}, 2000)
},
})
4.2 传参
- home.vue
handleClick() {
this.$store.dispatch('change', 'hello world')
}
- store > index.js
export default createStore({
state: {
name: 'dell'
},
getters: {
},
mutations: {
change(state, str) {
state.name = str
}
},
actions: {
change(store, str) {
setTimeout(() => {
store.commit('change', str)
}, 2000);
}
},
modules: {
}
})
4.5 modules
5 CompositionAPI 中如何使用 VueX
useStore
5.1 同步操作
- about.vue
import { toRefs } from 'vue';
import { useStore } from 'vuex';
export default {
name: 'AboutView',
setup() {
const store = useStore();
const { name } = toRefs(store.state);
const handleClick = () => {
store.commit('changeName', 'hello')
}
return { name, handleClick }
},
}
- store > index.js
import { createStore } from 'vuex'
export default createStore({
state: {
name: 'dell'
},
getters: {
},
mutations: {
changeName(state, str) {
state.name = str
}
},
actions: {
},
modules: {
}
})
5.2 异步操作
- about.vue
import { toRefs } from 'vue';
import { useStore } from 'vuex';
export default {
name: 'AboutView',
setup() {
const store = useStore();
const { name } = toRefs(store.state);
const handleClick = () => {
store.dispatch('getData')
}
return { name, handleClick }
},
}
- store > index.js
import { createStore } from 'vuex'
export default createStore({
state: {
name: 'dell'
},
getters: {
},
mutations: {
changeName(state, str) {
state.name = str
}
},
actions: {
getData(store) {
setTimeout(() => {
store.commit('changeName', 'hello')
}, 2000);
}
},
modules: {
}
})
6 使用 axios 发送 ajax 请求
- about.vue
export default {
name: 'AboutView',
setup() {
const store = useStore();
const { name } = toRefs(store.state);
const handleClick = () => {
store.dispatch('getData')
}
return { name, handleClick }
},
}
- store > index.js
import { createStore } from 'vuex'
import axios from 'axios';
export default createStore({
state: {
name: 'dell'
},
getters: {
},
mutations: {
changeName(state, str) {
state.name = str
}
},
actions: {
getData(store) {
axios.post('https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd/api/user/register')
.then((res) => {
const msg = res.data.message;
store.commit('changeName', msg)
})
}
},
modules: {
}
})