Vue3+Vite初体验（一）一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

1. 使用Vite搭建项目

npm init vite@latest echarts-project  //echarts-project(项目名称)

a. 选择框架（framework）=> vue

b. 选择模板（variant）=> vue

c. 安装依赖npm install

d. 运行项目npm run dev

2. 修改vite.config.js文件相关配置

a. 文件夹别名alias

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'

    import { resolve } from 'path'

    export default defineConfig({
      plugins: [vue()],
      resolve: {
        alias: {
          '@': resolve(__dirname,'src')
        }
      },
      base: './', //开发环境服务的公共基础路径
      server: {
        host: "localhost",
        port: 3001,
        // 是否自动在浏览器打开
        // open: true,
      },
    })

3. 引入路由库，并使用

a. 安装依赖vue-router

b. 在src文件夹下，创建router文件夹，在里面创建一个index.js文件

    vue-router的改变：
    new Router()[vue2] 变成 createRouter，不用再写 new Router()，而是要调用 createRouter

    history 配置取代 mode配置[vue2]
    根据你使用的模式，用适当的函数去替换：
    "history": createWebHistory()
    "hash": createWebHashHistory()
    "abstract": createMemoryHistory()

   import { createRouter, createWebHistory } from 'vue-router'

   //定义路由
   const routes = [
       {
         path: '/home',
         name: 'Home',
         component: () => import('@/views/home.vue')
       },
       {
         path: '/hello',
         name: 'Hello',
         component: () => import('@/components/HelloWorld.vue')
       }
   ]
   // 创建路由实例并传递 routes 配置
   const router = createRouter({
     history: createWebHistory(),
     routes,
   })
   export default router

c. 在main.js文件中挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'

createApp(App).use(router).mount('#app')

d. 在app.vue文件中引入承载顶层路由的容器，指定页面展示位置

<template>
  <!-- 承载路由的容器 -->
  <router-view />
</template>

e. 使用<router-link />实现页面内容切换

<router-link to="/hello">hello</router-link>

4. 组合式 API

setup是Vue3中一个配置项（函数）,作为组合式 API 的入口。组件中所用到的数据、方法等，均要配置在setup里面。

setup会在beforeCreate函数之前执行一次

setup函数的参数

a. props: 响应式的对象

b. context：上下文对象

attrs：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs
slots：收到的插槽内容，相当于this.$slots
emit：分发自定义事件的函数，相当于this.$emit
expose：暴露公共属性

setup函数的返回值

a. 返回一个对象，则对象中的属性、方法，在模板中均可以直接使用

<h2>setup返回一个对象，并使用对象中的属性和方法</h2>
<p>姓名：{{student.name}}</p>
<p>年龄：{{student.age}}</p>
<button @click="hello">点击查看信息</button>

    setup(){
        let student = {
          name: 'vue3',
          age: 1,
        }
        function hello(){
          alert(`hello,my name is ${student.name}, ${student.age} year old this year`)
        }
        return {
          student,
          hello
        }
  }

b. 返回一个渲染函数，则可以自定义渲染内容

import { h, ref } from 'vue'
export default{
  name: 'setup',
  setup(){
    const count = ref(0)
    return () => h('div', count.value)
  } 
}

注：setup函数里面定义的属性和方法均要return出去，否则无法使用

5. `<script setup>`

单文件组件 (SFC) 中使用组合式 API 的编译时语法糖

1.组件自动注册. 在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，

2.并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了(如果需要定义类似 name 的属性，可以再加个平级的 script 标签，在里面实现即可)

Vue3+Vite初体验（一）