【学习记录】移动应用开发（Vue.js）

---

前言

(挖坑…)记录学习Vue的过程，现阶段学到路由，将持续记录更新…
尽早补完之前的笔记…

第1章 初识 Vue.js

1.1 Vue开发环境安装以及Vue3项目创建启动

安装好vscode
装好插件Vue - Official
安装nvm安装包
安装完毕后，找到安装的路径，一些简单配置，打开setting.txt
添加内容
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/
nvm list available
查看所有安装的node版本
nvm install 20.17.0
安装最新的node版本
nvm list
查看当前的本机的所有版本，确认是否成功安装了20.17.0
nvm use 20.17.0
把当前的环境切换成20.17.0
node -v
查看当前node的版本
npm -v
查看当前npm的版本

参考：
nvm version // 查看NVM版本，是否安装成功
nvm list available // 查看可安装的node版本
nvm list // 查看已安装的node版本
nvm install 版本号 // 安装node
nvm uninstall 版本号 // 卸载node
nvm use 版本号 // 切换使用node版本
nvm current // 当前使用node版本
nvm node_mirror [url] // 切换node镜像[https://npm.taobao.org/mirrors/node/]
nvm npm_mirror [url] // 切换npm镜像[https://npm.taobao.org/mirrors/npm/]
nvm alias default version // 设置默认版本

npm config set registry https://registry.npmmirror.com
npm config get registry
npm create vite@4.1.0
选择 项目名称，vue，js
启动项目
cd 项目名称的目录
npm install
npm run dev
弹出以下
VITE v4.5.3 ready in 385 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
在浏览器打开http://localhost:5173/

2. 通过模板自动创建项目的命令
   将原命令：
   npm create vite@4.1.0 项目名 --template 模板名
   出现选项字后选择 项目名称（手动输入），vue，js
   启动项目
   cd 项目名
   npm install
   npm run dev

PS:可以将src\style.css文件中的样式代码全部删除，从而避免项目创建时自带的样式代码影响本案例的实现效果。

第2章 Vue.js开发基础

2.1 单文件组件

在第1章中使用Vite创建Vue项目后，目录结构中包含一些扩展名为.vue的文件，每个.vue文件都可用来定义一个单文件组件。
Vue中的单文件组件是Vue组件的文件格式。

每个单文件组件由模板、样式和逻辑3个部分构成。

1、模板
模板用于搭建当前组件的DOM结构，其代码写在<template>标签中。
2、样式
样式是指通过CSS代码为当前组件设置样式，其代码写在<style>标签中。
3、逻辑
逻辑是指通过JavaScript代码处理组件的数据与业务，其代码写在<script>标签中。

演示如何定义一个基本的单文件组件。

<template>
  <!-- 此处编写组件的结构 -->
</template>
<script>
/* 此处编写组件的逻辑 */
</script>
<style>
/* 此处编写组件的样式 */
</style>

演示单文件组件的使用方法
创建src\components\Demo.vue文件，该文件是Demo组件。

<template>
  <div class="demo">Demo组件</div>
</template>
<style>
.demo {
  font-size: 22px;
  font-weight: bold;
}
</style>

修改src\main.js文件，切换页面中显示的组件。

import App from './components/Demo.vue'

保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，Demo组件的页面效果如下图所示。（记得启动项目）

持续更新…