Vue3学习-Vue3概述&项目创建

文章速览

• [Vue3 摘要](#Vue3 摘要)
• • 摘要：
  • 环境配置
  • IDE
• 创建项目
• • 1、使用脚手架创建项目
  • 2、安装依赖
  • 3、启动项目
• 项目结构
• • 1、node_modules
  • 2、public
  • 3、src
  • [3.1 Main.js文件](#3.1 Main.js文件)
  • [3.2 App.vue文件](#3.2 App.vue文件)
  • 4、index.html
  • 5、package.json
  • • 5.1、Scripts
    • • [5.1.1、dev 启动项目脚本](#5.1.1、dev 启动项目脚本)
      • [5.1.2、build 描述可将当前项目打包为可以在web中部署的内容](#5.1.2、build 描述可将当前项目打包为可以在web中部署的内容)
    • 5.2、dependencies

一个赞，留下专属于你的足迹！

Vue3 摘要

摘要：

Vue官网

Vue3新特性：

组合式API（重点）

TypeScript（熟悉）类似面向对象编程换做前端语言作为实现

状态存储框架（重点）

...

环境配置

需要下载Node.js（LTS 长期支持版本）才能够使用npm 默认的包管理工具

设置国内镜像源

npm config get registry https://registry.npmmirror.com

IDE

使用vs code，安装vue-offical会方便开发

创建项目

1、使用脚手架创建项目

npm create vue@latest

弹出项按需选择

2、安装依赖

使用cd 切换到项目路径

使用 npm install 安装依赖包

cd 项目名
npm install

3、启动项目

npm run dev

项目结构

1、node_modules

项目依赖，如果没有需要进行重新安装

npm install

2、public

静态资源，图片、视频等

3、src

代码资源，.vue、.js等

3.1 Main.js文件

引入vue中的createAPP函数

引入App.vue文件并将其命名为APP

创建应用，并将APP绑定在app元素上

3.2 App.vue文件

.vue文件可以理解为一个页面或是一个组件，分为三个部分script、template、style

4、index.html

整个项目的访问入口，SPA（Single Page Application）应用都是基于一个页面去扩展、添加一些高级的功能

5、package.json

5.1、Scripts

描述项目环境、启动脚本

5.1.1、dev 启动项目脚本

npm run dev

代码中的dev上同图片中的dev

5.1.2、build 描述可将当前项目打包为可以在web中部署的内容

npm run build

打包完成后，会生成dist文件夹，将其部署至服务器文件路径，访问index.html即可

5.2、dependencies

当前项目依赖项