① Vue3开发环境搭建

一、安装node.js

在node.js官网下载安装最新版的：https://nodejs.org/zh-cn/

然后需要更换下载源为国内的

#设置为淘宝源
npm config set registry https://registry.npmmirror.com

#查看下载源
npm config get registry

二 、安装Vue3脚手架

npm init vue@latest
#初始化安装一个VUE3项目

这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。
跟随命令行的提示继续操作即可，我选择了装上TypeScript。

项目的目录结构如下：

tsconfig.json文件各字段吐血整理

三、源码文件的目录结构

四、项目运行简介

index.html首页入口

main.ts是项目入口文件

//本文件为入口核心文件
import { createApp } from 'vue'     //创建一个Vue应用
import App from './App.vue'         //导入根组件
import router from './router'       //导入路由组件

import './assets/main.css'          //导入CSS样式表

const app = createApp(App)          //使用根组件创建应用实例

app.use(router)                     //使用路由组件

app.mount('#app')                   //挂载到index.html的app容器

App.vue根组件（这是一个SFC单文件组件 script脚本+html模板+style样式表）

五、路由的使用

在创建项目的时候选择了安装路由，Vue已经自动为我们生成的路由用法的页面

路由配置文件 ruoter/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'    //引入自定义的视图文件（比如首页和关于页面）

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',      //路由URL
      name: 'home',   //路由名称
      component: HomeView //要渲染的组件（展示在前端页面）
    },
    {
      path: '/about',
      name: 'about',
      // 路由级别代码分割
      // 为这个路由生成一个单独的 chunk
      // 当访问路由时他是懒加载的
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

视图文件 HomeView.vue

<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue' //引入自定义的Vue组件，组件中实现具体功能
</script>

<template>
  <main>
    <TheWelcome />  <!-- 前端渲染组件 -->
  </main>
</template>

Vue渲染前端页面的过程如下：

1. Vue.app读取main.ts的配置（包括引入CSS样式表），根据路由跳转链接渲染路由视图
2. 要渲染的视图HomeView.vue 引入自定义组件，并渲染自定义vue组件

六、学习资源

官方手册

VUE官方文档：https://cn.vuejs.org
TypeScript手册：https://bosens-china.github.io/Typescript-manual/

Vue名词解释

SFC

Vue 单文件组件 (Single-File Component，缩写为 SFC) SFC
是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 .vue 后缀的文件中。

Vite

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。替代Webpack 的打包工具。

VUE语法和函数

ref：用于存储值的响应式数据源
v-bind:id :id 属性绑定
v-on:click @click 点击事件监控
v-model 双向数据绑定

部署到Github pages

npm run build
git checkout -b gh-pages
git add -f dist
git commit -m 'first commit'
git subtree push --prefix dist origin gh-pages

项目配置需要做些修改