Vue3.0入门

一、创建Vue3工程

1.基于vite创建（推荐）

vite是新一代前端构建工具，官网地址：https://vitejs.cn

2.具体操作（官方文档）

第一步：安装node.js环境，并重启电脑（验证安装成功方法，cmd中输入node）

第二步：创建工程（编译器可以选择webstorm）

## 1.创建命令
npm create vue@latest

## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境（后期可以选择Yes）
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境（后期可以选择Yes）
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  No
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

注意：创建好工程文件以后如果没有node_modules文件，说明没有依赖，需要执行命令行 npm i 安装所有依赖

第三步：启动程序，命令 npm run dev

3.程序运行原理

创建应用，挂载到入口文件 index.html id为app的容器中

3.1 main.ts文件

3.2 index.html文件

总结：

Vite 项目中，index.html 是项目的入口文件，在项目最外层。
加载index.html后，Vite 解析 <script type="module" src="xxx"> 指向的JavaScript。
Vue3中是通过 createApp 函数创建一个应用实例。

推荐开发者工具插件：Vue.js devtools（搜索极简插件或直接Edge的拓展）

二、Vue3核心语法

1.setup

概述：setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。

2.setup语法糖（简化代码）

setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：

Person.vue

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>
<!-- 配置vue组件名 -->
<script lang="ts">
  export default {
    name:'Person',
  }
</script>
<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">
  // 数据（注意：此时的name、age、tel都不是响应式数据）
  let name = '张三'
  let age = 18
  let tel = '13888888888'
  // 方法
  function changName(){
    name = '李四'//注意：此时这么修改name页面是不变化的
  }
  function changAge(){
    console.log(age)
    age += 1 //注意：此时这么修改age页面是不变化的
  }
  function showTel(){
    alert(tel)
  }
</script>

App.vue（Person.vue需要在 App.vue中进行注册使用）

<template>
  <Person/>
</template>

<script lang="ts">
  import Person from './components/Person.vue'

  export default {
    name:'App', //组件名
    components:{Person} //注册组件
  }
</script>

三、路由

需要安装：npm i vue-router

1.对路由的理解

可以实现SPA（单页面）应用

2.实现代码

App.vue

RouterView 组件是路由渲染的核心，它根据当前 URL 渲染匹配的组件。

RouterLink 是 Vue Router 提供的核心组件‌，用于在单页应用（SPA）中创建导航链接，通过 to 属性指定目标路径，实现无刷新页面切换。

<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="xiaozhupeiqi">首页</RouterLink>
      <RouterLink to="/news" active-class="xiaozhupeiqi">新闻</RouterLink>
      <RouterLink to="/about" active-class="xiaozhupeiqi">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <!-- 路由器视图：用于放视图组件 -->
　　　　<RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="App">
  　<!-- 引入路由器视图 -->
　　import {RouterView,RouterLink} from 'vue-router'
</script>
<style>
　　样式
</style>

router/index.ts：创建一个路由器，并暴露出去

补充：component 属性指定了当路由被匹配时应该渲染哪个Vue组件

// 第一步：引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
// 引入一个一个可能要呈现组件
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import About from '@/components/About.vue'
// 第二步：创建路由器
const router = createRouter({
  history:createWebHistory(), //路由器的工作模式（稍后讲解）
  routes:[ //一个一个的路由规则
    {
      path:'/home',
      component:Home
    },
    {
      path:'/news',
      component:News
    },
    {
      path:'/about',
      component:About
    },
  ]
})
// 暴露出去router
export default router

main.ts

// 引入createApp用于创建应用
import {createApp} from 'vue'
// 引入App根组件
import App from './App.vue'
// 引入路由器
import router from './router'
// 创建一个应用
const app = createApp(App)
// 使用路由器
app.use(router)
// 挂载整个应用到app容器中
app.mount('#app')

开发注意事项：

1、路由组件通常存放在`pages` 或 `views`文件夹，一般组件通常存放在`components`文件夹。如何区分路由组件和一般组件，比如靠路由规则跳转的页面就是路由组件，而一般组件可以作为页面当中的公共样式或布局组件。

2、通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

3.路由器工作模式

1、history 模式

优点：URL更加美观，不带有 #，更接近传统的网站URL。
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。

const router = createRouter({
    history:createWebHistory(), //history模式
    /******/
})

2、hash模式

优点：兼容性更好，因为不需要服务器端处理路径。

缺点：URL带有 # 不太美观，且在 SEO 优化方面相对较差。

const router = createRouter({
    history:createWebHashHistory(), //hash模式
    /******/
})

4.to的两种写法

<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>

<!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

5.命名路由

作用：可以简化路由跳转及传参

给路由规则命名：

routes:[
  {
    name:'zhuye',
    path:'/home',
    component:Home
  },
  {
    name:'xinwen',
    path:'/news',
    component:News,
  },
  {
    name:'guanyu',
    path:'/about',
    component:About
  }
]

跳转路由：

<!--简化前：需要写完整的路径（to的字符串写法） -->
<router-link to="/news/detail">跳转</router-link>

<!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->
<router-link :to="{name:'guanyu'}">跳转</router-link>

6.嵌套路由

目的：编写 news 的子路由，detail.vue

1、配置路由规则，使用 children 配置项：

router/index.ts

const router = createRouter({
  history:createWebHistory(), //路由器的工作模式（稍后讲解）
  routes:[ //一个一个的路由规则
    {
      name:'zhuye',
      path:'/home',
      component:Home
    },
    {
      name:'xinwen',
      path:'/news',
      component:News,
      children:[
        {
          path:'detail',//子路由不需要加'/'
          component:Detail
        }
      ]
    },
    {
      name:'guanyu',
      path:'/about',
      component:About
    },
  ]
})
// 暴露出去router
export default router

2、跳转路由（记得要加完整路径）：

pages/detail.vue

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <RouterLink to="/news/detail">{{news.title}}</RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<script setup lang="ts" name="News">
  import {reactive} from 'vue'
  import {RouterView,RouterLink} from 'vue-router'
  const newsList = reactive([
    {id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
    {id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
    {id:'asfdtrfay03',title:'震惊，万万没想到',content:'明天是周一'},
    {id:'asfdtrfay04',title:'好消息！好消息！',content:'快过年了'}
  ])
</script>

<!-- 或者对象写法 -->
<router-link :to="{path:'/news/detail'}">xxxx</router-link>

3、放进news.vue展示区的页面