小白都看得懂的Vue3.0语法教程-01-框架搭建

liuian 2025-04-24 03:39 93 浏览

开发环境

编辑器推荐： Visual Studio Code + Volar 扩展
检查node：vue3.0推荐node16以上

node -v //查看node版本号 
npm -v //查看npm版本号

创建项目：vue官方推荐使用vite创建

//Vue官方的项目脚手架工具
npm init vue@latest
//进入项目目录
cd vue-project（刚刚创建的文件名）
//npm安装必要依赖
npm install
//启动开发环境调试
npm run dev
//打包生产的文件
npm run build

项目搭建

1.创建VUE应用 main.js

每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

创建跟组件 App.vue

我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

App.vue

<template>
  <!--这里是跟组件，其他组件内容会显示在这里的-->
  <router-view/>
</template>

挂载应用

index.html

应用实例必须在调用了 .mount() 方法后才会渲染出来。

index.html，跟组件App.vue会被挂载到这里

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>e-library图书管理系统</title>
  </head>
  <body>
    <div id="app">
      <!--项目中跟组件的挂载点，App.vue组件会挂载到这里-->
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Vue跟组件

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

组件之间关系

最终main.js和App.vue都会被挂载到index.html中

安装模块

--save：将保存配置信息到pacjage.json的dependencies节点中。
--save-dev：将保存配置信息到pacjage.json的devDependencies节点中。
dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块
devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。

注意：--save可以简写为-S，--dev可以简写为-D

//进入项目根目录
  cd vue-project
  
  npm install vue --save
  //安装路由管理
  npm install vue-router --save
  //安装状态管理
  npm install pinia --save
  //安装css处理
  npm install sass --save-dev
  //安装网络请求
  npm install axios --save
  //安装访问进度条
  npm install nprogress --save
  //安装element-plus
  npm install element-plus --save
  //时间格式化组件
  npm install moment --save
  //安装vite支持
  npm install vite --save-dev
  npm install @vitejs/plugin-vue --save-dev
  
  //如果不用element组件
  //安装openTiny组件
  npm install @opentiny/vue@3

查看npm 版本