VUE学习笔记

VUE学习笔记

一、安装与配置

1.安装node.js

• 百度网盘：链接：https://pan.baidu.com/s/1tR6qIxXTsv1NhIUNmmKz_g?pwd=3jr8 提取码：3jr8

傻瓜式安装配置环境即可

• 安装vue命令如下：

  • npm install -g cnpm --registry=https://registry.npm.taobao.org
  • cnpm install vue –g （安装）
  • cnpm install webpack –g （打包工具）
  • cnpm install --global webpack-cli （）
  • cnpm install @vue/cli –g （全部为他服务）

• 安装是否成功检查：

  • cnpm info vue
    进入检查结果

二、基本概述

Vue.js是一个流行的前端JavaScript框架，用于构建用户界面与单页应用程序（SPA）。它的诞生和发展可以概括为以下几个重要阶段：

• 1. 初创阶段：Vue由中国人尤雨溪（Evan You）创建于2014年。最初是作为一个个人项目开始的，旨在提供一个简单而专注的工具，用于同步DOM和JavaScript对象。它的核心是一个响应式的数据驱动系统，以及一个灵活的组件系统。
• 2. 版本迭代：在2015年10月，Vue 1.0正式发布，带来了模板语法改进和新特性。2016年9月，Vue 2.0发布，引入了虚拟DOM、跨端支持和新的渲染机制。2019年10月，Vue 3.0 alpha版发布，提供了性能提升、架构优化、按需引入和Composition API等新功能。
• 3. 设计哲学：Vue的设计遵循CMD（Component-Model-View）规范，并采用MVVM（Model-View-ViewModel）模式。它的目标是提供一个渐进式的框架，即可从简单的组件开始，逐步扩展到完整的单页应用。
• 4. 社区生态：随着时间的推移，Vue建立了一个庞大的开发者社区，并且拥有丰富的第三方库和工具，这些都极大地促进了Vue的普及和应用开发。
• 5. 持续演进：Vue继续发展，不断满足现代Web开发的需要，如提供更好的TypeScript支持、更快的运行时性能和更易用的API等。
• 总的来说，Vue因其轻量级、易于上手和高效的数据绑定等特点，在前端框架中占据了一席之地，与其他主流框架如React和Angular形成三足鼎立之势。它的出现不仅改变了前端开发的范式，也推动了整个前端技术的发展进程。

三、基本操作

创建项目文件夹

• 切换工作路径：
  C:\Windows\System32>d:
  D:>e:
  E:>cd E:\2024年上期学习-长春师范大学\智能软件开发\Vue学习笔记\vue001
  E:\2024年上期学习-长春师范大学\智能软件开发\Vue学习笔记\vue001>

• 在过程中解决：E:\2024年上期学习-长春师范大学\智能软件开发\Vue学习笔记\vue001>vue -v

  • ‘vue’ 不是内部或外部命令，也不是可运行的程序
  • 解决办法：https://blog.csdn.net/m0_69311549/article/details/137256221?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22137256221%22%2C%22source%22%3A%22m0_69311549%22%7D

• 配置好环境后：

  • 创建一个存放路径：
    切换盘符

  • 创建命令：vue create studentms【项目名】 尽量不要中文路径

  • 安装router：npm install vue-router -g

  • 启动服务器

    • App running at:
    • • Local: http://localhost:8080/
    • • Network: http://172.20.10.5:8080/

  • 点击测试

    • 成功

四、vue项目文件结构介绍

整体

二、public

• public文件夹：放置静态资源（图片），webpack在打包时会原封不动的打包到dist文件夹中

三、src文件夹（程序员源代码文件夹）

• 1. assets文件夹：放置静态资源（多个组件共用的静态资源），在webpack打包时会把静态资 源当成模块打包到JS文件中
• 2. components：放置非路由组件（全局组件），公共组件
• 3. APP.vue：唯一的根组件
• 4. main.js：程序入口文件，整个程序中最先执行的文件

四、.browserslistrc配置

• 在使用脚手架搭建项目时，会自动生成.browserslistrc文件，该文件只要是 配置兼容浏览器
• 对于部分配置参数做一些解释:
• " >1%" :代表着全球超过1%人使用的浏览器
• “last 2 versions” : 表示所有浏览器兼容到最后两个版本
• “not ie <=8” :表示IE浏览器版本大于8（实则用npx browserslist 跑出来不包含IE9 ）
• “safari >=7”:表示safari浏览器版本大于等于7

五、.gitignore的用法

• Git忽略文件.gitignore详解

• 在工程中，并不是所有文件都需要保存到版本库中的，例如“target”目录及目录下的文件就可以忽略。在Git工作区的根目录下创建一个特殊的.gitignore文件，然后把要忽略的文件名填进去，Git就会自动忽略这些文件或目录。

• 规则：

  • • 空格不匹配任意文件，可作为分隔符，可用反斜杠转义
  • • 开头的文件标识注释，可以使用反斜杠进行转义
  • • ! 开头的模式标识否定，该文件将会再次被包含，如果排除了该文件的父级目录，则使用 ! 也不会再次被包含。可以使用反斜杠进行转义
  • • / 结束的模式只匹配文件夹以及在该文件夹路径下的内容，但是不匹配该文件
  • • / 开始的模式匹配项目跟目录
    • • 如果一个模式不包含斜杠，则它匹配相对于当前 .gitignore 文件路径的内容，如果该模式不在 .gitignore 文件中，则相对于项目根目录
  • • ** 匹配多级目录，可在开始，中间，结束
  • • ? 通用匹配单个字符
  • • • 通用匹配零个或多个字符
  • • [] 通用匹配单个字符列表

• 实例：

  • bin/: 忽略当前路径下的bin文件夹，该文件夹下的所有内容都会被忽略，不忽略 bin 文件
  • /bin: 忽略根目录下的bin文件
  • /*.c: 忽略 cat.c，不忽略 build/cat.c
  • debug/*.obj: 忽略 debug/io.obj，不忽略 debug/common/io.obj 和 tools/debug/io.obj
  • **/foo: 忽略/foo, a/foo, a/b/foo等
  • a/**/b: 忽略a/b, a/x/b, a/x/y/b等
  • !/bin/run.sh: 不忽略 bin 目录下的 run.sh 文件
  • *.log: 忽略所有 .log 文件
  • config.php: 忽略当前路径的 config.php 文件

六、babel.config.js配置文件详解

• 1. Babel 相当于一个中介，
  • 一边是用户，另一边是浏览器。这几年，JavaScript 发生了很大的变化，许多新特性在很多浏览器里都不支持。
  • Babel 的主要作用就是规避这些问题，可以确保 JavaScript 代码兼容所有的浏览器，比如 IE 11。
• 2. Babel 的工作原理
  • Babel 使用 AST 把不兼容的代码编译成 ES15 版本，因为大多数浏览器都支持这个版本的 JavaScript 代码。

七、jsconfig.json

• {
• “compilerOptions”: {
• “baseUrl”: “.”,
• “paths”: {
• // 解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
• “@/": ["src/”]
• },
• // 解决prettier对于装饰器语法的警告
• “experimentalDecorators”: true,
• // 解决.jsx文件无法快速跳转的问题
• “jsx”: “preserve”
• },
• //提高 IDE 性能
• “exclude”: [“node_modules”, “dist”, “build”]
• }
• exclude 为什么 提高 编译器 性能 ？
• 如果开发的项目根目录下没有 jsconfig.json，在默认情况下，像 VS Code， 默认不会把 node_modules文件夹排除掉。
• 官方给出建议是这样的：只要有可能，您应该使用不属于项目源代码的JavaScript文件排除文件夹。
• 意思就是 与开发无关的文件可以让 IDE 全部在编译时排除掉，像上面的配置中就排除了，构建过程依赖文件（node_modules）和生成的文件(dist 目录) 排除这些文件，可以提高 vscode 的性能。。

八、package.json与package-lock.json

• package.json

• 记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）,不能锁定后面的小版本，

• package-lock.json

• package-lock.json 是在 npm install时候生成一份文件。记录了node_modules目录下所有模块（包）的名称、版本号、下载地址、及这个模块又依赖了哪些依赖。

• 两者区别：

• npm5以前

  • npm5以前，没有package-lock.json这个文件。package.json文件会记录你项目中所需要的所有模块。当你执行npm install的时候，node会先从package.json文件中读取所有dependencies信息，然后根据dependencies中的信息与node_modules中的模块进行对比，没有的直接下载，已有的检查更新。
  • 因为package.json只能锁定模块的大版本号（版本号的第一位），不能锁定后面的小版本，所以你每次重新npm install时候拉取的都是该大版本下面最新的版本。一般我们为了稳定性考虑我们不能随意升级依赖包，因为如果换包导致兼容性bug出现很难排查，这样很容易出现问题，所以package-lock.json就是来解决包锁定不升级问题的
  • 另外，package.json文件只记录你通过npm install方式安装的模块信息，而这些模块所依赖的其他子模块的信息不会记录。

• npm5以后

  • package-lock.json文件锁定所有模块的版本号，包括主模块和所有依赖子模块。当你执行npm install的时候，node从package.json文件读取模块名称，从package-lock.json文件中获取版本号，然后进行下载或者更新。
  • 因此，正因为有了package-lock.json文件锁定版本号，所以当你执行npm install的时候，node不会自动更新package.json文件中的模块，必须用npm install packagename@x.x.x（指定版本号）来进行安装才会更新，package-lock.json文件中的版本号也会随着更新。

package-lock.json的作用

• 如果重新 npm install 的时候以及当node_modules文件夹并不存在或被删除时，需要用到npm install重新装载全部依赖时，通过package-lock.json可以直接表明下载地址和相关依赖，就无需再从package.json逐个分析包的依赖项，因此会大大加快安装速度，package-lock.json目的就是确保所有库包与你上次安装的完全一样。
• 如果要升级package-lock.json里面的库包
• npm install XXX@x.x.x

九、vue.config.js

• vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

• 比较常见的配置项有：

• baseUrl ( publicPath )

• 部署应用包时的基本 URL。

• outputDir

• 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。

  • assetsDir

• 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

• pages

• 在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。

• lintOnSave

• 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。

  • 设置为 true 或 ‘warning’ 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。

devServer

所有 webpack-dev-server 的选项都支持。注意：

有些值像 host、port 和 https 可能会被命令行参数覆写。

有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。

devServer.proxy

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。devServer.proxy 可以是一个指向开发环境 API 服务器的字符串

pluginOptions

这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项。

十、README.md：说明性文件