使用Vue3创建一个项目 还有chat的一些问答

vue3项目创建

1.执行 命令

npm init vue@latest

会出现很多选项 选项的大概意思：

✔ Project name: …
这是你的项目名称。

✔ Add TypeScript? … No / Yes
TypeScript 是一个静态类型的 JavaScript 超集，有助于在开发过程中尽早发现错误。在这里选择 “Yes” 将设置你的项目使用 TypeScript。

✔ Add JSX Support? … No / Yes
JSX 是一个类似于模板语言的 JavaScript 语法扩展，允许你在 JavaScript 中编写 HTML。在这里选择 “Yes” 将为你的项目设置支持 JSX。

✔ Add Vue Router for Single Page Application development? … No / Yes
Vue Router 是一个 Vue.js 的官方路由管理器，允许你为单页应用程序配置和管理路由。在这里选择 “Yes” 将为你的项目设置使用 Vue Router。

✔ Add Pinia for state management? … No / Yes
Pinia 是一个轻量级的状态管理库，可与 Vue.js 紧密集成。在这里选择 “Yes” 将为你的项目设置使用 Pinia。

✔ Add Vitest for Unit testing? … No / Yes
Vitest 是一个轻量级的 Vue.js 单元测试库。在这里选择 “Yes” 将为你的项目设置使用 Vitest。

✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
Cypress 是一个 JavaScript 端到端测试框架，可以进行集成测试和端到端测试。在这里选择 “Yes” 将为你的项目设置使用 Cypress。

✔ Add ESLint for code quality? … No / Yes
ESLint 是一个用于识别和报告 JavaScript 代码中常见问题的工具。在这里选择 “Yes” 将为你的项目设置使用 ESLint。

✔ Add Prettier for code formatting? … No / Yes
Prettier 是一个自动化代码格式化工具，可以使你的代码保持一致的风格。在这里选择 “Yes” 将为你的项目设置使用 Prettier。

看情况加把 反正 路由 根 状态管理肯定要加

cd 进入到项目里面

npm install
这个命令会自动安装项目所需的所有依赖项，包括 Vue 3、webpack、babel 等等。安装成功就会出现下面的代码
我安装了好几次 网络问题应该是

PS D:\html\conquer\conquer> npm install
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
added 293 packages, and audited 294 packages in 1m
90 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities

成坤显示这个

VITE v4.3.4  ready in 520 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

成功之后 项目 构成 我让chat 翻译一下大概意思

.vscode: 该目录是用于存放 Visual Studio Code 的编辑器配置文件。
node_modules: 该目录是用于存放所有项目依赖的第三方库和工具。
public: 该目录是用于存放静态文件的目录，例如 index.html 和 favicon.ico 等。
src: 该目录是主要的代码目录，存放 Vue 组件、样式、脚本等代码。
.eslintrc.cjs: 该文件是 ESLint 的配置文件，用于检查代码风格和质量。
.gitignore: 该文件是 Git 版本控制系统的忽略文件，用于指定 Git 忽略哪些文件和目录。
.prettierrc.json: 该文件是 Prettier 的配置文件，用于格式化代码。
env.d.ts: 该文件是 TypeScript 的声明文件，用于定义环境变量的类型。
index.html: 该文件是 Vue 应用的入口 HTML 文件。
package-lock.json: 该文件是用于确保在不同的开发环境中安装的依赖版本一致的锁定文件。
package.json: 该文件是 Node.js 的项目配置文件，其中包含了项目依赖、脚本等相关信息。
README.md: 该文件是项目的说明文档。
tsconfig.json: 该文件是 TypeScript 的配置文件，用于配置 TypeScript 编译器的选项。
tsconfig.node.json: 该文件是 TypeScript 的配置文件，用于配置编译成 Node.js 可以运行的代码。
vite.config.ts: 该文件是 Vite 构建工具的配置文件，用于配置构建和开发选项。
目录中带有 > 符号的是文件夹，文件夹中存放的是对应的文件和代码。node_modules 文件夹中存放的是所有项目依赖的第三方库和工具。

src 里面的components文件 给里面加 组件
pullic 就是放自己的静态资源
主要就是操作这两个地方 就ok 了

编写

编写 就是写 组件文件 .vue
分为3块

<script>
	写组件的东西
</script>

<template>
这就是 组件对应的模板  也就是主要的页面
  <header>
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>
  <RouterView />
</template>

<style scoped>
<!--给你模板引用的 style 
scoped 是一个 Vue 模板编译选项，用于将样式作用域限定在当前组件中，以避免全局污染和样式冲突的问题。
也就是说这些css 只会对应再这个模板  去掉 scoped  就是全局的了
-->
header {
  line-height: 1.5;
  max-height: 100vh;
}
</style>

组件里面的大部分属性 折磨chat折磨出来的

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ computedMessage }}</p>
    <input v-model="inputValue" />
  </div>
</template>

<script>
export default {
  // 组件的数据
  name: 'MyComponent', // 组件名字
  data() {
    return {
      message: 'Hello, world!',
      inputValue: '',
    };
  },
  // 定义组件的方法
  methods: {
    greet() {
      alert(this.message);
    },
  },
  // 计算属性，根据其他数据计算而来
  computed: {
    computedMessage() {
      return `The input value is ${this.inputValue}.`;
    },
  },
  // 观察数据的变化，并在变化时执行相应的回调函数
  watch: {
    inputValue(newVal, oldVal) {
      console.log(`Input value changed from ${oldVal} to ${newVal}.`);
    },
  },
  // 父组件传递给子组件的属性
  props: {
    propMessage: {
      type: String,
      required: true,
    },
  },
  // 子组件向父组件通信，触发事件
  emits: ['greet-parent'],
  // 用于插入不同内容的占位符
  slots: {
    default: '<p>This is the default slot content.</p>',
  },
  // 在祖先组件和后代组件之间进行数据传递
  provide() {
    return {
      sharedMessage: 'This message is shared between ancestors and descendants.',
    };
  },
  // 定义当前组件中所使用的子组件
  components: {
    ChildComponent,
  },
  // 自定义指令，用于改变 DOM 行为
  directives: {
    customDirective: {
      bind(el, binding) {
        el.style.color = binding.value;
      },
    },
  },
  // 将多个组件共用的属性和方法提取出来，作为一个混入对象
  mixins: [mixin1, mixin2],
  // 扩展组件，继承父组件的属性和方法
  extends: {
    props: ['extendedProp'],
    methods: {
      extendedMethod() {
        console.log('This method is inherited from the parent component.');
      },
    },
  },
  // 过滤器，用于格式化数据的显示
  filters: {
    formatMessage(value) {
      return value.toUpperCase();
    },
  },
};
</script>

引入方式

import MyComponent from './MyComponent.vue'

<template>
  <div>
    <my-component></my-component>
    其中，<my-component> 是使用 MyComponent 组件的标签名。
    直接当成模块使用， 组件命名开头大写 然后驼峰命名
    浏览器识别标签会转小写 PascalCase 这个就是对应上面的命名  这个方法会转移成 小写加- 的方式
    还有一定要开闭标签  别一个</> 就结束了 很容易出凑
  </div>
</template>

好了 我也要去研究研究了。。。。。