- 本文主要内容
- 基于 vue-cli 快速搭建 Vue 3.0 项目
快速搭建 Vue 3.0 项目
版本
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0-0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
}
升级vue-cli
npm install -g @vue/cli
vue -V
vue/cli@4.5.4
创建项目
vue create vue3-demo
配置项目
- 进入命令行
- 选择
Manually select features
- 勾选
Router、Vuex、CSS Pre-processors和Linter / Formatter
目录结构
./src
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── main.js
├── router
│ └── index.js
├── store
│ └── index.js
└── views
├── About.vue
└── Home.vue
开发流程
新建页面
<template>
<div class="page">Hello</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.page {
color: red;
}
</style>
创建路由
- 在
/src/router/index.js中创建路由配置
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
},
{
path: '/hello',
name: 'Hello',
component: () => import('../views/Hello.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
vue-router有哪些改变
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
- 构建选项
base
- 传给
createWebHistory()（和其他模式） 的第一个参数作为base。
const router = createRouter({
history: createWebHistory('/'),
...
})
- 捕获所有路由 ( /* ) 时，现在必须使用带有自定义正则表达式的参数进行定义：/:catchAll(.*)
// 当路由为 /user/a/b 时，捕获到的 params 为 {"a": "a", "catchAll": "/b"}。
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/user/:a:catchAll(.*)', component: component },
],
})
- 如果使用
<transition>，则可能需要等待router准备就绪才能挂载应用程序
app.use(router)
// Note: on Server Side, you need to manually push the initial location
router.isReady().then(() => app.mount('#app'))
状态和事件绑定
-
Vue 3.0中定义状态的方法改为类似React Hooks的方法
<template>
<div class="page">
<div>Hello</div>
<div>{{count}}</div>
<button @click="add">ADD</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const add = () => {
count.value++
}
return {
count,
add
}
}
}
</script>
-
Vue 3.0中初始化状态通过setup方法
- 定义状态需要调用
ref方法
- 在
setup方法里，返回更新状态的add方法，不再需要定义在methods中
- 更新
count值的时候不能直接使用count++，而应使用count.value++
计算属性和监听器
<template>
<div class="page">
<div>Hello</div>
<div>{{count}}</div>
<div>double: {{doubleCount}}</div>
<button @click="add">ADD</button>
</div>
</template>
<script>
import { ref, computed, watch } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2)
const add = () => {
count.value++
}
watch(() => count.value, val => {
console.log(`count is ${val}`)
})
return {
count,
doubleCount,
add
}
}
}
</script>
- 计算属性
computed是一个方法
- 需要包含一个回调函数
- 当我们访问计算属性返回结果时，会自动获取回调函数的值
- 监听器
watch同样是一个方法
- 它包含 2 个参数，2 个参数都是
function
- 第一个参数是监听的值, 返回
count.value
- 第一个参数为值发生变化时触发的回调
获取当前路由
-
Vue 3.0中通过getCurrentInstance方法获取当前组件的实例
- 通过
ctx属性获得当前上下文
-
ctx.$router是Vue Router实例
- 里面包含了
currentRoute，可以获取到当前的路由信息
import { getCurrentInstance } from 'vue';
// 获取当前实例
const { ctx } = getCurrentInstance();
// 获取当前路由
console.log(ctx.$router.currentRoute.value);
页面跳转
-
Vue 3.0的setup中没有 this
- 类
react-router，提供了useRouter和useRoute，分别对应之前的this.$router和this.$route
import { useRouter } from 'vue-router';
export default {
setup() {
...
const router = useRouter();
const backHome = () => {
router.push('/')
}
...
}
}
Vuex 集成
定义 Vuex 状态
import { createStore } from 'vuex'
export default createStore({
state: {
name: 'haha'
},
mutations: {
setHelloName(state, value) {
state.name = value;
}
},
actions: {
},
modules: {
}
})
获取 Vuex 状态
import { getCurrentInstance } from 'vue';
// 获取当前实例
const { ctx } = getCurrentInstance();
// vuex state
const name = computed(() => ctx.$store.state.name);
更新 Vuex 状态
export default {
setup() {
// 获取当前实例
const { ctx } = getCurrentInstance();
// vuex state
const name = computed(() => ctx.$store.state.name);
const update = () => {
ctx.$store.commit('setHelloName', 'haha -- ' + ctx.count );
}
...
}
}
