一、Vue 3需要将Vue CLI升级到最新版本，全局安装：cmd下

npm install -g @vue/cli

二、搭建

方案一、模板快速构建,集成了router+vuex可直接开发

1.安装模板

vue create '项目名称'

2.将模板vue更新到3.0，vuex、router更新到4x

vue add vue-next

 

方案二、运用官网教程Vite，一步步构建vue项目

$ npm init vite-app <你的项目名称> $ cd <你的项目名称> $ npm install $ npm run dev

1、引入router4.0，关于router 3.0跟router4.0更新也是挺大的

npm install vue-router@next

如果版本不是最新则执行指令：

vue add vue-next

src目录下新建router/router.js

路由模式：

createWebHashHistory hash 路由

createWebHistory history 路由

createMemoryHistory 带缓存 history 路由

js：

import { createRouter, createWebHistory } from 'vue-router' import HelloWorld from '../components/HelloWorld.vue' const routerHistory = createWebHistory() // createWebHashHistory hash 路由 // createWebHistory history 路由 // createMemoryHistory 带缓存 history 路由 const router = createRouter({ history: routerHistory, routes: [ { path: '/', component: HelloWorld }, ] }) export default router

main.js:

import { createApp } from 'vue' import App from './App.vue' import './index.css' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') // createApp(App).mount('#app')

app.vue

<template> <router-view></router-view> </template> <script> export default { name: 'App', } </script>

 

2、引入vuex 4.0

npm install vuex --save

如果版本不是最新则执行指令：

vue add vue-next

 

 

src目录下新建store/index.js

  import { createStore } from 'vuex' const store = createStore({ state: { userInfo: { name:'renkq' } }, mutations: { getUserInfo (state, name) { state.userInfo.name = name } }, actions: { asyncGetUserInfo ({ commit }) { setTimeout(() => { commit("getUserInfo", +new Date() + 'action') },2000) } }, getters: { userInfoGetter (state) { return state.userInfo.name } } }) export default store

main.js:

import { createApp } from 'vue' import App from './App.vue' import './index.css' import router from './router' import store from './store' createApp(App).use(router).use(store).mount('#app') // createApp(App).mount('#app')

index.vue:

<template> <h1>{{ data.name }}</h1> <h2>{{ data.name2 }}</h2> <h3>{{ data.name3 }}</h3> <router-link to='/'> HelloWorld</router-link> </template> <script> import { ref, reactive,computed } from 'vue' import { useStore } from "vuex"; export default { name: 'Index', setup() { const data = reactive({ name: '我是vue3.0 index', count: 0, name2:computed(() => store.getters.nameGetter), name3:'我是谁' }) const store = useStore(); data.name3 = store.state.userInfo.name return { data } } }; </script>

​

 

3、vue

Vue3.0生命周期说明    Vue2.0生命周期setup   初始化数据阶段的生命周期，相当于beforeCreate+created onBeforeMount           组件挂载前beforeMountonMounted                 实例挂载完毕mountedonBeforeUpdate         响应式数据变化前beforeUpdateonUpdated                 响应式数据变化完成updatedonBeforeUnmount    实例销毁前beforeDestroyonUnmounted        实例已销毁  destroyedonErrorCaptured    错误数据捕捉 

​