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

<script setup>


</script>

<template>
 
</template>

<style scoped>

</style>

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

vue3响应式视图更新数据 ref

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

<template>
    {{msg}}
    <button @click="changeName">更换名字</button>
</template>

<script setup>
import {ref} from 'vue'
let msg = ref('李白')
function changeName(){
    msg.value = '杜甫'
}
</script>

<template>
    {{user.username}}
    {{user.age}}
    <button @click="changeAge">更换</button>
</template>

<script setup>
import {ref} from 'vue'
let user = ref({
    username:'李白',
    age: 18
})
function changeAge(){
    user.value.age = 14
}
</script>

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

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

<template>
    {{user.username}}
    {{user.age}}
    <button @click="changeName">更换</button>
</template>

<script setup>
import {reactive} from 'vue'
const user = reactive({
    username:'李白',
    age: 18
})
function changeName(){
    user.username = '王安石'
}
</script>

---

reactive解包写法

<template>
    <button @click="changeName">更换</button>
    {{user.username}}
    {{user2.username}}
</template>

<script setup>
import {ref,reactive} from 'vue'

const user = ref({
    username:'李白',
})

const user2 = reactive(user.value)
function changeName(){
    user2.username = '杜甫'
}
</script>

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

事件对象和传递参数

<template>
    {{user}}
     <button @click="changeName('江山',$event)">更换</button>
</template>

<script setup>
import {ref} from 'vue'
let user = ref('李白')
function changeName(username,event){
    user.value = username
    //console.log(event);
    console.log(username,event);
}
</script>

计算属性

反序输出字符串

<template>
    {{reMsg}}
</template>

<script setup>
import {ref,computed} from 'vue'
let msg = ref('hello')
const reMsg = computed(() => {
    return msg.value.split('').reverse().join('')
})
</script>

侦听属性

<template>
    {{msg}}
    {{user.name}}
</template>

<script setup>
import {ref,reactive,watch} from 'vue'
let msg = ref('hello')
let user = reactive({
    name:'雷柏',
    age: 20
})
watch(msg,(newValue,oldValue)=>{
    console.log(newValue);
    console.log(oldValue);
})
watch(
    ()=>user.name,
    (newValue,oldValue)=>{
    console.log(newValue);
    console.log(oldValue);
}
)
</script>

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

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

<template>
    {{title}} --- {{content}}
</template>

<script setup>
import { defineProps } from 'vue';
    const props = defineProps({
        title: String,
        content: String
    })
</script>

<style scoped>

</style>

父组件

<template>
    <HelloWorld :title="article.title" :content="article.content"></HelloWorld>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { reactive } from 'vue';
let article = reactive({
    title: '满江红',
    content: '岁岁年年花相似'
})
</script>

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

子组件发布事件

<template>
    {{title}} --- {{content}}
    <button @click="btn">修改</button>
</template>

<script setup>
import { defineProps,defineEmits } from 'vue';
    const props = defineProps({
        title: String,
        content: String
    })
    const emit = defineEmits(['modifyContent','modifyTitle'])
    function btn(){
        emit('modifyContent')
        emit('modifyTitle')
    }
</script>

<style scoped>

</style>

父组件修改值

<template>
    <HelloWorld 
    :title="article.title" 
    :content="article.content"
    @modifyContent = "changeContent()"
    @modifyTitle = "changeTitle()"
    ></HelloWorld>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { reactive } from 'vue';
let article = reactive({
    title: '满江红',
    content: '岁岁年年花相似'
})
function changeContent(){
    article.title = '秦时明月'
}
function changeTitle(){
    article.content = '巴山楚水凄凉地'
}
</script>

路由的创建与使用 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之前

路由使用

<template>
    <div>
        <router-view></router-view>
        <router-link to="/home">跳转首页</router-link>
      <button @click="router.push('/product')">跳转至产品页面</button>
      <button @click="goTo">跳转至产品页面</button>
    </div>
</template>

<script setup>
import { useRoute,useRouter } from 'vue-router';

let route = useRoute()
let router = useRouter()
function goTo(){
    console.log(route);
    router.push('/product')
}
</script>

<style scoped>

</style>

安装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之前

页面使用

<template>
  <div>
      <h1>购物车</h1>
      <h2>商品数量{{store.state.count}}</h2>
      <h2>商品总价{{store.getters.totalPrice}}</h2>
      <button @click="addProd">添加商品数量+2</button>
      <button @click="asyncAddProd">异步添加商品数量+10</button>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';

let store = useStore()
function addProd(){
    store.commit('increment',2)
}
function asyncAddProd(){
    store.dispatch('asyncAdd',10)
}
</script>

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

调用组件

<template>
  <!-- suspense内置新增组件,数据加载回来的时做些什么,数据没回来之前做些什么 -->
  <suspense>
      <template #fallback>
          <h1>Loading</h1>
      </template>
      <template #default>
         <HomeCom></HomeCom>
      </template>
  </suspense>
</template>

<script setup>
import * as api from '../api/index'
// vue3异步请求
import { onMounted,defineAsyncComponent } from 'vue';
//异步请求组件
const HomeCom = defineAsyncComponent(()=>import('../components/HomeCom.vue'))
onMounted(async() =>{
    let res = await api.getHomepage()
    //console.log(res);
})
</script>

组件

<template>
    <h1>首页</h1>
    <ul>
        <li v-for="(item,i) in hero">
            <h3>{{item.category}}</h3>
        </li>
    </ul>
</template>

<script setup>
import * as api from '../api/index'
import { reactive } from 'vue'
let res = await api.getHomepage()
const hero = reactive(res.hero)
</script>