用vite 新建vue3项目

news/2024/7/10 2:52:12 标签: vue

1、component里的HelloWorld.vue
是组件
2、总的vue
App.vue
3、index.css
写的App.vue的css,不是组建的vue,(为什么呢)
4、main.js
几个import来源

HelloWorld.vue

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

index.css

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')


http://www.niftyadmin.cn/n/958010.html

相关文章

git 多次 commit 合并为一次 push

前提&#xff1a; git commit -m “修改3” git commit -m “修改4" 操作&#xff1a; git log 查看历史提交记录 退出 执行 git rebase -i HEAD~2 或者 git rebase -i a91e660d a91e660dd 为 9b45a0d4 前一次的提交记录 HEAD~2 是指当前版本的上 2 个版本 修改第二行 …

Syntax Error: Error: Failed to load plugin ‘@typescript-eslint‘ declared in ‘.eslintrc.js‘: Cannot f

Syntax Error: Error: Failed to load plugin typescript-eslint declared in .eslintrc.js: Cannot find module typescript-eslint/eslint-plugin怎样解决这个bug&#xff1f; 说是版本问题&#xff0c;修了一下&#xff0c;也没有好起来 另一个方法&#xff0c;另一个路径…

Cannot find module ‘xxx‘ 错误的解决方案

在进行webpack打包的时候&#xff0c;会出现Cannot find module XXX’的错误&#xff0c;找不到某个模块的错误&#xff0c;今天给出解决方法&#xff1a; 直接进行npm install重新打包&#xff1b;如果npm install重新打包之后&#xff0c;仍然出现这个问题&#xff0c;可以进…

js代码的运行

在vscode中&#xff0c;这样运行不出来 var x myFunction(7, 8); // 调用函数&#xff0c;返回值被赋值给 xfunction myFunction(a, b) {return a * b; // 函数返回 a 和 b 的乘积 }加一段才能运行 var x myFunction(7, 8); // 调用函数&…

js虚拟点击a标签触发href

先给对应a标签赋值id 或者class $(#ddh)[0].click();如果是js弹出框&#xff0c;判断用户点击确认再触发a标签触发href 先建一个a便签隐藏如下 <a id"ddh" href"" style"display: none"></a>再如下 var r confirm("我真帅&q…

js代码在vscode中运行

console.log(hello world); console.log(8998); console.log(89*98);结果 [Running] node "/Users/ivyone/231" hello world 8998 8722

kafka多个消费者,怎么收到所有的消息.

kafka多个消费者,怎么收到所有的消息. 消费者组是Kafka实现单播和广播两种消息模型的手段。同一个topic&#xff0c;每个消费者组都可以拿到相同的全部数据。 组内的所有消费者协调在一起来消费订阅主题(subscribed topics)的所有分区(partition)。当然&#xff0c;每个分区只能…

小程序web-view转发

对应页面 js // index.js Page({data: {shareObj: },onLoad: function (options) {console.log(options, options)},bindGetMsg: function (e) {this.data.shareObj e.detail.data[e.detail.data.length - 1];},// 分享onShareAppMessage(options) {let shareObj this.data.…