1、先创建一个简单vue2项目,node、vue-cli、webpack等准备完成之后,创建vue3-test文件夹,cd vue3-test,然后vue init webpack,配置项目信息,创建vue2项目(安装vue-router、vuex)。
vue2项目文件目录详情
2、记录文件main.js、HelloWorld.vue、A.vue、B.vue 、router、vuex。(与vue3做对比)
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
HelloWorld.vue
<template>
<div class="hello">
<h1>我是vue2项目</h1>
<div class="content">
<A/>
<B/>
</div>
</div>
</template>
<script>
import A from './A.vue'
import B from './B.vue'
export default {
components:{
A,
B
},
name: 'HelloWorld',
data () {
return {
}
}
}
</script>
<style scoped>
.hello {
height: 500px;
width: 500px;
margin: auto;
background: rgb(137, 198, 248);
}
.content {
display: flex;
width: 100%;
height: 100%;
justify-content: space-around;
}
</style>
A.vue
<template>
<div class="a-style">
<p>我是A组件</p>
</div>
</template>
<script>
export default {
name: 'A',
data () {
return {
}
}
}
</script>
<style scoped>
.a-style{
width: 40%;
height: 50%;
background: rgb(49, 243, 81);
}
</style>
B.vue
<template>
<div class="b-style">
<p>我是B组件</p>
</div>
</template>
<script>
export default {
name: 'B',
data () {
return {
}
}
}
</script>
<style scoped>
.b-style{
width: 40%;
height: 50%;
background: rgb(248, 203, 56);
}
</style>
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
},
getters:{
},
mutations:{
},
actions:{
},
modules:{
}
})
export default store
运行项目正常
3、将vue2项目升级为vue3项目
先删除vue-cli安装vue-cli3.0
npm uninstall vue-cli -g
npm install -g @vue/cli
执行命令vue add vue-next
升级成功
4、创建vue3项目
创建文件夹vue3-project,进入,执行vue create vue3-project,创建vue3项目,自定义配置,安装vue-router、vuex。创建完成之后文件内容变化。
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
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(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
启动项目
5、在项目中可以正常进行路由跳转,写法与vue2基本一致,只是在main.js中引入router时不同
vue2中,new Vue()
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
vue3中,createApp()
createApp(App).use(router).mount('#app')
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</template>
6、vue3中vuex的使用
createApp(App).use(store).mount('#app')
简单测试
修改store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
name:'leo'
},
mutations: {
changeName(state,newVal){
state.name = newVal
}
},
actions: {
setName(context,val){
context.commit('changeName',val)
}
},
modules: {
}
})
A.vue
<template>
<div class="a-style">
<p>我是A组件</p>
<span>store中的值:{{name}}</span>
</div>
</template>
<script>
import {computed} from 'vue'
import $store from '../store'
export default {
name: 'A',
setup(){
let name = computed(()=>{return $store.state.name})
return {
name
}
}
}
</script>
<style scoped lang="less">
.a-style{
width: 40%;
height: 50%;
background: rgb(49, 243, 81);
}
</style>
B.vue
<template>
<div class="b-style">
<p>我是B组件</p>
<button @click="changeName">改变A组件的store值</button>
</div>
</template>
<script>
import $store from '../store'
export default {
name: 'B',
setup(){
function changeName(){
$store.dispatch('setName','lion')
}
return {
changeName
}
}
}
</script>
<style scoped lang="less">
.b-style{
width: 40%;
height: 50%;
background: rgb(248, 203, 56);
}
</style>
默认显示,获取store中state的值
点击B组件按钮,A组件的值随即改变,store使用正常
通过在vue3使用,router、vuex用法与vue2基本一致。
请继续往下阅读