Vue3安装到入门

安装

• IntelliJ IDEA 2024.1.4

• node

node.js下载

https://wwf.lanzout.com/iqnoc23zb0fc

如果提示nodejs版本报错有个临时解决方法

package.json增加配置（可行）
"scripts": {
"serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
}

vue目录结构

• public 资源管理器

• node_modules：通过 npm install 下载安装的项目依赖包

• src 源码文件夹

• .gitignore git忽略文件

• index.html html文件

• vite.config.js Vue配置

App.vue

<template>
<h3>{{msg}}</h3>
</template>


<script>
export default {
  name: "App",
  data(){
    return{
      msg:"Hello World!"
    }
  }
}

</script>

如果有默认样式就注释这个

如果没有语法提示，要下载vue.js插件

注意{{}}会转换纯文本,要html就要用v-html

官方文档

https://cn.vuejs.org/guide/introduction.html