初体验Vue3

刘春龙原创2026/3/5大约 2 分钟

提示

学习Vue，一定要参考官方文档

官网文档：https://cn.vuejs.org/

基本使用

创建项目
前提条件
- 熟悉命令行
- 已安装 18.0 或更高版本的 Node.js
```
npm init vue@latest
```
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示
如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。
安装依赖并启动
在项目被创建后，通过以下步骤安装依赖并启动开发服务器
```
cd <your-project-name>
npm install
npm run dev
```
这样就可以启动项目了，你会看到项目运行在本地的 5173 端口，如果你想让局域网内的其他人访问你正在开发中的项目，可以修改根目录下的package.json文件，修改如下：
```
"scripts": {
   "dev": "vite --host",
}
```
打包项目
```
npm run build
```
当你完成开发后，你可以使用该命令对你的项目进行打包，打包完成后，你会在你的根目录下看到一个dist文件夹。
警告
在项目开发后期，打包时亦或是启动时你可能会碰到不成功的情况，极大可能是因为安装的各种依赖项出现混乱，此时可跳过依赖项检查即可
```
"scripts": {
   "dev": "set NODE_OPTIONS=--openssl-legacy-provider &&  vite --host"
}
```
```
npm install --save XXX --legacy-peer-deps
```

目录结构

我们通过Vue命令行工具 npm init vue@latest 创建项目，会出现很多文件及文件夹

└─ 项目名
   └─  .vscode     --- VSCode工具的配置文件夹
   └─  node_modules   --- Vue项目的运行依赖文件夹
   └─  public      --- 资源文件夹（浏览器图标）
   └─  src       --- 源码文件夹
   └─  .gitignore    --- git忽略文件
   └─  index.html    --- 入口HTML文件
   └─  package.json   --- 信息描述文件
   └─  README.md    --- 注释文件
   └─  vite.config.ts  --- Vue配置文件
   └─  env.d.ts  --- 声明文件
   └─  tsconfig.json  --- ts配置文件

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。