02. 从0带你搭建Vue3工程

2650 字约 6 分钟读完12898 次阅读更新于 2026/5/3

开发工具

nodejs16+版本、IntelliJIDEA

npm

npm 是一个包管理工具，可以帮助我们下载 vue 工程所需的依赖，npm 需要配置淘宝镜像，否则下载速度非常慢。配置方法：在命令行输入下面的指令

npm config set registry http://registry.npmmirror.com

Vue官方网站

https://cn.vuejs.org/

创建 Vue 工程

npm create vue@latest

安装 vue 工程依赖

cd vue
npm install
npm run dev

这里是 下载 vue 项目所需的依赖包

当你看到这个页面，说明 Vue3 项目启动成功

idea 启动 vue3

先使用 idea 打开这个 xm-pro 目录

trust

删除文件

在 idea 里面启动 vue3 工程

项目瘦身

  1. 删除文件

setup 是必备的属性，他是语法糖，有这个就可以使用 Vue3 的语法特性

  1. 改造 Home.vue，删除 AboutView.vue

  1. 精简路由

  1. 精简 App.vue 只是作为项目的入口文件

  1. main.js 删除无用的导包

main.js 里面引入全局的 css

global.css

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #333;
}

Css 基础教程

画 2 小时时间简单了解一下即可

https://www.runoob.com/css/css-tutorial.html

Vue 基本的语法介绍

https://www.runoob.com/vue3/vue3-tutorial.html

{{ }}

v-model

双向绑定：数据可以在用户输入的时候发生实时的变化

v-if v-else

v-for

<select style="width: 200px">
  <option v-for="item in data.fruits">{{ item }}</option>
</select>

<script setup>
import {reactive, ref} from "vue";
</script>

@（v-on:）

@click 点击事件

<button @click="click">点我加好运</button>

const click = () => {
  alert("好运+1")
}

: （v-bind:）

https://www.runoob.com/wp-content/uploads/2017/01/vue.png

<div>
  <div :style="data.box"></div>
  <div>
    <img :src="data.img" alt="">
  </div>
</div>

const data = reactive({
  box: {
    width: '100px',
    height: '100px',
    backgroundColor: 'red'
  },
  img: 'https://www.runoob.com/wp-content/uploads/2017/01/vue.png'
})

onMounted

就是在页面元素完全加载完成之后触发，页面元素加载需要时间

onMounted(() => {
  console.log('页面加载完成')
})