Vite 创建Vue3项目及基础使用

Vite 法语意为 "快速的"，发音 /vit/，下一代前端开发与构建的工具，等于现在的webpack。

第一感觉：npm run dev 的时候跑项目飞快

创建vue3项目

# npm 版本, 安装vu3之前需要检查npm版本号，对号入座：
npm -v 

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

安装依赖

npm i

运行项目

npm run dev

VSC安装vue3配套插件Volar

相信使用 vscode 和 vue2的同学对 vetur 这个插件一定不会陌生。

认识页面 template script style

从上面的代码可以看到，标签和标签顺序已经更换了，但我还是习惯vue2顺序，且标签中必须使用setup关键字定义。

vue3响应式视图更新数据 ref

不同于vue的data和methods,vue3是这样创建响应式对象的，在vue3中需要用到ref才能触发视图的更新。

从上面2个demo来看，我们vue3的数据响应式需要如此来搞，是不是发现似乎有些繁琐？逻辑有些古怪？

响应式reactive 取代ref，恢复正常的写法,相当于vue2的data

---

reactive解包写法

这里关注到 {{user2.username}}

事件对象和传递参数

计算属性

反序输出字符串

侦听属性

父子组件传值:子组件用defineProps接收父组件传过来的值

值得注意的是，vue3中引入组件不在需要注入，直接Import 引入，使用即可
子组件

父组件

父子组件传值：子组件发布自定义事件，通知父组件修改值 defineEmits

子组件发布事件

父组件修改值

路由的创建与使用 vue3需要4.0版本的路由，store也是

安装：

 npm i vue-router

创建路由脚本：src目录下>创建router目录>index.js

编写脚本：/src/router/index.js

import {
    createRouter,
    createWebHashHistory,
    createWebHistory
} from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Buycart from '../views/Buycart.vue'
const routes = [
    {
        path: '/home',
        component: Home,
        name: 'home'
    },
    {
        path: '/about',
        component: About,
        name: 'about'
    },
    {
        path: '/buycart',
        component: Buycart,
        name: 'buycart'
    },
    {
        path: '/product',
        component: () =>import('../views/Product.vue'),
        name: 'product'
    }
]

const router = createRouter({
    history: createWebHistory(), 
    routes,
})

export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
createApp(App).use(router).mount('#app') //use必须要在mount之前

路由使用

安装vuex,需要下一代版本,官网默认也是4.0x版本

npm i vuex@next --save

创建目录/src/store/index.js

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state,payload) {
      state.count += payload
    }
  },
  getters:{
      totalPrice(state) {
          return state.count*99.9
      }
  },
  actions:{
      asyncAdd(store,payload){
          setTimeout(()=>{
              store.commit('increment',payload)
          },1000)
      }
  }
})

export default store

main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
createApp(App).use(router).use(store).mount('#app') //use必须要在mount之前

页面使用

suspense内置新增组件，defineAsyncComponent异步封装组件

调用组件

组件