AcWing ＆ Vue3

一、准备工作

1.1 安装 NodeJs

安装 NodeJs ： https://nodejs.org/en/
NodeJs 安装包：

txt

通过网盘分享的文件：node-v18.20.4-x64.msi
链接: https://pan.baidu.com/s/127Ut5GL8_8eS90y6ui0jUw?pwd=e4iv 提取码: e4iv

Vue 官网 : https://cn.vuejs.org/
终端：
- Windows 上推荐用 powershell 或者 cmd 。Git Bash 有些指令不兼容。
- Linux 和 Mac 上可以用自带的终端。

安装好 NodeJs 打开 powershell 测试一下：

检查 Node.js 版本

powershell

node -v

检查 npm 是否可用 : Node.js 安装时会附带 npm（ Node 包管理器： Node Package Manager），输入：

powershell

npm -v

都能返回版本号即安装成功

此外可以配置 npm 的全局安装路径：
- 后面需要用 npm install 安装软件包，这样可以指定安装目录
- 避免占用系统盘空间（全局包可能很多很大）
- 方便管理（比如 Node.js 安装在 D:\develop\Nodejs，全局包也放在一起）
假如说需要指定一个目录 D:\develop\NodeJS (只是例子)，那么使用 管理员身份 运行命令行：

shell

npm config set prefix "D:\develop\NodeJS"

可以命令行运行以下命令查看有没有配置好：

shell

npm config get prefix

此外可以随便安装一个工具 nodemon：

shell

npm install -g nodemon

按照例子的路径：如果在文件管理器找得到 D:\develop\Nodejs\node_modules\nodemon 就说明没问题

❗ 注意：

注意：D:\develop\NodeJS 这个目录是 NodeJS 的安装目录 !!!!! 换成自己实际的 !!!

切换为淘宝镜像，加速下载：

shell

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

1.2 安装 Vue

安装 @Vue/cli
打开 Git Bash 执行：

shell

npm i -g @vue/cli

如果执行后面的操作有 bug，可能是最新版有问题，
可以尝试安装早期版本，比如：npm i -g @vue/cli@4

还是可以看看版本号看看有没有安装成功：

shell

vue --version

shell

vue -V

运行任意一个都可以，看到版本号就安装成功

启动 vue 自带的图形化项目管理界面

shell

vue ui

常见问题1：Windows 上运行 vue，提示无法加载文件，表示用户权限不足。
解决方案：用管理员身份打开终端，输入set-ExecutionPolicy RemoteSigned ，然后输入 y

正确运行的话就打开了以下界面：

二、创建项目

创建一个文件夹来存储项目位置，比如我的是 E:/acwing/vue3
那么打开 powershell ，在特定的盘符运行命令 vue ui 打开 Vue 自带的图形化项目管理界面
然后如下图新建项目：

设置好项目文件夹 myspace ，包管理器 npm ：

选择 Vue3 创建项目：

三、安装插件＆依赖

点开 插件 ：安装一下 vue-router 和 vuex

点开 依赖 --> 点击右上角 安装依赖 --> 安装 bootstrap ：

简单介绍：

名称	作用领域	类比解释
`vue-router`	Vue 页面跳转管理	像 “导航仪” 告诉你现在在哪、能去哪
`vuex`	Vue 状态管理	像 "共享仓库"，多个组件都能拿到数据
`bootstrap`	UI 样式框架	像 “装修队” ，帮你快速搭好页面外观

四、启动项目

任务 --> serve --> 运行 --> 输出：

浏览器地址栏访问：localhost:8080 ：（如下图启动成功）

但是，使用 vscode 打开这个文件夹：
Vue/cli 创建的项目目录大概介绍：

shell

my-app/
├─ public/                 ← 纯静态资源，Webpack 不处理
│  └─ index.html          ← 唯一 HTML 入口（最终挂载点 <div id="app"></div>）
├─ src/
│  ├─ main.js             ← 应用启动文件：创建 Vue 实例并挂载到 DOM
│  ├─ App.vue             ← 根组件，所有页面组件的“老祖宗”
│  ├─ router/
│  │  └─ index.js         ← 路由表配置（URL ←→ 组件 映射）
│  ├─ store/
│  │  └─ index.js         ← Vuex / Pinia 状态仓库
│  ├─ views/              ← 页面级组件（Home.vue、About.vue …）
│  ├─ components/         ← 可复用小组件（Header.vue、Button.vue …）
│  └─ assets/             ← 需要 Webpack 打包的静态资源（图片、样式等）
├─ .browserslistrc        ← 目标浏览器范围，供 Autoprefixer / Babel 使用
├─ babel.config.js        ← Babel 转码规则（ES6+ → 兼容语法）
├─ vue.config.js          ← Vue CLI 的 Webpack 附加配置（可选）
└─ package.json           ← 依赖列表 + 脚本命令

补充：如果打开这有报红，是因为 vscode 安装了 Vetur 的原因，
它是 Vue 2 的插件，它不识别 Vue 3 的语法，先卸载掉 Vetur
如果需要的话可以下载 Vue(Official) ，然后重启 vscode 就正常了

我们发现上面地址栏有个 # , 我们希望可以去掉，把下图所示的两个 Hash 删掉，然后就没有 # 了：

就看着非常的舒服 ~

五、vue 的基本概念

.vue 文件 = 单文件组件（Single File Component，SFC）。
一个文件就把 HTML、JS、CSS 三种语言写在一起，
webpack + vue-loader 会把它拆成三部分再分别处理。

shell

┌─ <template>  ← 唯一必填：组件的 DOM 结构（Vue 模板语法）
├─ <script>    ← 选填：默认导出一个选项对象 / setup 函数
└─ <style>     ← 选填：组件级样式，可加 scoped / module 属性

template 段：
- 只能有一个根节点（ Vue3 已允许多根）。
- 用 Vue 模板语法：插值表达式 {{ }}
- 引用其他组件：先 import 再 components 注册，然后当标签用。
- <slot></slot> ：存放父组件传过来的 children。
- v-on:click 或 @click 属性：绑定事件
- v-if、v-else、v-else-if 属性：判断
- v-for 属性：循环，:key 循环的每个元素需要有唯一的 key
- v-bind: 或 : ：绑定属性

script 段：
- export default 对象的属性：
  - name：组件的名称
  - components ：存储 <template> 中用到的所有组件
  - props：存储父组件传递给子组件的数据
  - watch()：当某个数据发生变化时触发
  - computed：动态计算某个数据
  - setup(props, context)：初始化变量、函数
    - ref 定义变量，可以用 .value 属性重新赋值
    - reactive 定义对象，不可重新赋值
    - props 子组件存储父组件传递过来的数据
    - context.emit() ：子组件触发父组件绑定的函数

style 段：
- 添加 scoped 属性就只在当前组件生效，不同组件间的 css 不会相互影响
  原理是给 DOM 节点打 data-v-hash 属性，样式选择器后自动带属性选择器
vue
```
<style scoped>

</style>
```
1
2
3

第三方组件：
- view-router 包：实现路由功能。
- vuex ：存储全局状态，全局唯一。
  - state: 存储所有数据，可以用 modules 属性划分成若干模块
  - getters：根据 state 中的值计算新的值
  - mutations：所有对state的修改操作都需要定义在这里，
    不支持异步，可以通过 $store.commit() 触发
  - actions：定义对 state 的复杂修改操作，支持异步，可以通过 $store.dispatch() 触发。
    注意不能直接修改 state，只能通过 mutations 修改 state。
  - modules：定义 state 的子模块

AcWing ＆ Vue3 ​

一、 准备工作 ​

1.1 安装 NodeJs ​

1.2 安装 Vue ​

二、创建项目 ​

三、安装插件＆依赖 ​

四、启动项目 ​

五、vue 的基本概念 ​

AcWing ＆ Vue3

一、准备工作

1.1 安装 NodeJs

1.2 安装 Vue

二、创建项目

三、安装插件＆依赖

四、启动项目

五、vue 的基本概念