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

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

开发环境

编辑器推荐： 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 版本

上一篇：pc端微信用户图片DAT格式解码为图片
下一篇：带你一步步搭建一个 Node.js 服务器

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

开发环境

项目搭建

安装模块

相关推荐

【验证码逆向专栏】vaptcha 手势验证码逆向分析

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

飞牛OS入门安装遇到问题，如何解决?

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

10款高性能NAS丨双十一必看，轻松搞定虚拟机、Docker、软路由

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

开发环境

项目搭建

安装模块

相关推荐

【验证码逆向专栏】vaptcha 手势验证码逆向分析

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

飞牛OS入门安装遇到问题，如何解决?

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

10款高性能NAS丨双十一必看，轻松搞定虚拟机、Docker、软路由

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄