VUE 环境搭建

大家好，欢迎来到IT知识分享网。

一、安装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渲染前端页面的过程如下：

Vue.app读取main.ts的配置（包括引入CSS样式表），根据路由跳转链接渲染路由视图
要渲染的视图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
 
项目配置需要做些修改