Vue前端知识 - 技术栈

Vue前端知识

学Linux的语莫2025-12-09 8:49

一、创建项目

复制代码

1.安装nodejs

2.## 安装或者升级你的@vue/cli 
npm install -g @vue/cli

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

4.配置选择
## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ 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?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

二、核心文件说明和编写

1.main.ts文件

复制代码

// 创建Vue 应用实例，花盆
import { createApp } from 'vue'

// 自己写的那个 App.vue 单文件组件引进来，准备当"根节点"用。
import App from './App.vue'

// 变成真正的 Vue 应用实例
//  mount('#app') 告诉 Vue：
// "去 index.html 里找一个 id="app" 的 DOM 节点，把实例挂载进去
createApp(App).mount('#app')

2.App.vue文件

复制代码

<template>
<!-- html页面 -->
 <div class="app">
   <h1>你好啊!</h1>
 </div>
</template>

<script lang="ts">
// js或ts
// 暴露组件
  export default{
    name:'App'
  }
  
</script>


<style scoped>
/* css样式 */
  .app{
    background-color: aliceblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>

3.components目录组件编写(枝叶)