1. 环境&工具准备

1.1 安装 node.js

直接在官网下载安装包,直接安装即可,建议下载长期维护版本。
安装成功后,可查看其版本:

kahnlau@KahndeMacBook-Pro / % node -v
v16.13.1
kahnlau@KahndeMacBook-Pro / % 

1.2 开发工具

本人使用的是 VS Code,并推荐使用安装 Volar 插件,这个插件提供全面的开发支持。
VS Code 大家官网下载、安装即可。

1.2.1 Volar 安装方式

  1. 在【扩展商店】中搜索「volar」
  2. 点击「安装」按钮
    在这里插入图片描述

1.2.2 Chrome 插件 DevTools 安装

可以去网上自行下载,或者使用「84as」自取我的版本[5.3.3]

下载完成解压后,到扩展程序页面,点击【加载已解压的扩展程序】按钮,选择对应的文件夹即可
如果没有该按钮,需要打开右上角「开发者」模式
在这里插入图片描述
在这里插入图片描述
安装完成后,在扩展程序列表,会显示该扩展信息:
在这里插入图片描述

2. Vue 3 项目搭建

2.1 创建工作目录

mkdir vuejs
cd vuejs

2.2 创建 Vite 的初始化项目

输入项目信息:
Project name —— 项目名称
Select a framework —— 选择「vue」
Select a variant —— 选择「vue」

npm init @vitejs/app

在这里插入图片描述
打开项目,可以看到项目目录:

.
|—— README.md
|—— index.html      入口文件
|—— package.json
|—— public          资源文件
|    └── favicon.ico
|—— src             源码
|   |—— assets      静态资源
|   |   └── logo.png
|   |—— components  组件
|   |   └──HelloWorld.vue
|   └── main.js     入口
└── vite.config.js  vite 工程化配置文件

2.3 启动项目

  1. 安装依赖

    需要进入项目文件夹目录下执行

npm install

在这里插入图片描述

  1. 项目启动

    项目文件夹目录下执行命令

npm run dev

在这里插入图片描述

2.4 访问服务

访问页面显示的本地(Local内容)地址即可,默认为 3000 端口
打开页面调试(F12),也能看到当前项目的层级关系,效果图如下:
在这里插入图片描述

3. 项目架构

在这里插入图片描述

P.S. 大圣 Vue 课程学习小记

Logo

前往低代码交流专区

更多推荐