vue前端学习

发表于 分类于 本文字数： 1.9k 阅读时长 ≈ 2 分钟

前言

Vue3简介

官⽹地址：https://vuejs.org/ 。中⽂官⽹ https://cn.vuejs.org/

Vue是什么？易学易⽤，性能出⾊，适⽤场景丰富的 Web 前端框架。

Vue2已经于2023年12⽉31⽇停⽌维护。建议升级到Vue.js3.0版本。打包更⼩，内存更少，渲染更快。 好消
息是，vue3向下兼容vue2的语法Vue3于2020年9⽉18⽇发布，代号： One Piece 海贼王。 久经磨砺

Vue3新特性：组合式API(重点)，更好的⽀持TypeScript(熟悉)，状态存储框架Pinia(重点)，新组件(了
解)。。。。。详⻅官⽹

创建vue3项目

前置：安装NodeJS。NodeJS版本18.0以上。

建议使用官方脚手架创建

若使用vscode，添加官方vue插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 使⽤官⽅脚⼿架
npm create vue@latest

# 按照脚⼿架要求选择是否启⽤相关组件
Vue.js - The Progressive JavaScript Framework
✔ 请输⼊项⽬名称： … myVue3
✔ 请输⼊包名称： … myvue3
✔ 是否使⽤ TypeScript 语法？ … 否 / 是 # 选是
✔ 是否启⽤ JSX ⽀持？ … 否 / 是
✔ 是否引⼊ Vue Router 进⾏单⻚⾯应⽤开发？ … 否 / 是
✔ 是否引⼊ Pinia ⽤于状态管理？ … 否 / 是
✔ 是否引⼊ Vitest ⽤于单元测试？ … 否 / 是
✔ 是否要引⼊⼀款端到端（End to End）测试⼯具？ › 不需要
✔ 是否引⼊ ESLint ⽤于代码质量检测？ … 否 / 是 # 选是
✔ 是否引⼊ Prettier ⽤于代码格式化？ … 否 / 是
✔ Add Vue DevTools extension for debugging? (experimental) … 否 / 是
# 启动项⽬
npm install
npm run dev
#后续包都可添加
  • 1、所有功能组件都可以后续⼿动添加。
    关于TypeScript，在Vue中的TypeScript可以认为是在JS的基础上，增加⾯向对象的能⼒。可以定义接⼝、
    类、抽象类等。
  • 2、npm install过程中会去node仓库下载很多依赖库，放到项⽬本地node_modules⽬录。建议将npm源设
    定为淘宝提供的国内镜像，可以下载快⼀点。

项目目录

[!NOTE]

下列为借鉴于bing

Vue 项目通常遵循一定的目录结构，便于代码管理和维护。以下是常见的 Vue 项目目录结构及其各文件的作用：

node_modules/ 存放项目依赖的 Node 模块，使用 npm install 或 yarn 安装依赖后生成。

public/ 存放公共资源，不会被 Webpack 处理。

  • favicon.ico：网页图标。
  • index.html：HTML 模板文件，作为单页面应用的入口。

src/ 项目的核心代码目录，主要包含以下内容：

  • assets/：静态资源文件夹，如图片、字体、公共 CSS 文件等。
  • components/：存放可复用的 Vue 组件。
  • router/：路由配置文件夹，通常包含 index.js，定义页面路由规则。
  • store/：Vuex 状态管理文件夹，用于集中管理应用的状态。
  • views/：视图层组件，通常对应路由页面。
  • App.vue：根组件，是整个应用的入口组件。
  • main.js：应用的入口文件，用于实例化 Vue，挂载路由和状态管理。

.babelrc Babel 配置文件，用于转译 ES6+ 代码为兼容性更好的 JavaScript。

.gitignore Git 忽略文件，定义哪些文件或文件夹不需要提交到版本控制系统。

package.json 项目配置文件，包含项目的基本信息、依赖包和脚本命令。

README.md 项目说明文档，通常用于描述项目功能、安装步骤和使用方法。

webpack.config.js Webpack 配置文件，用于定义打包规则和插件。

通过合理组织这些文件和目录，可以提高代码的可维护性和开发效率。实际项目中，可根据业务需求对目录结构进行调整。

使用方法

数据双向绑定

在.vue文件下，编写基础内容

  • template 中编写html页面，input括号中v-model等等，调用script中函数
  • script中为js逻辑语句，用于编写函数，有一些格式需要记住