Vue 3 学习 - 项目搭建

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

2. 项目启动

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

npm run dev

2.4 访问服务

访问页面显示的本地（Local内容）地址即可，默认为 3000 端口
打开页面调试（F12），也能看到当前项目的层级关系，效果图如下：

3. 项目架构

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