[Vue] 1.Vue安装+Vscode绑定 +新建页面

### 创建一个新的 Vue3 和 Vite 项目的指南 要在 Visual Studio Code (VSCode) 中创建一个基于 Vue3 和 Vite 的新项目，以下是详细的说明： #### 安装必要的工具 确保已安装 Node.js 和 npm 或 yarn。可以通过运行以下命令来验证版本： ```bash node -v && npm -v || yarn -v ``` 如果尚未安装，请先下载并安装最新稳定版的 Node.js[^4]。 #### 初始化新的 Vite 项目 使用终端或 VSCode 集成终端执行以下命令以初始化一个新的 Vite 项目： ```bash npm create vite@latest my-vue-app --template vue ``` 或者如果你更喜欢使用 Yarn，则可以运行： ```bash yarn create vite my-vue-app --template vue ``` 这会创建一个名为 `my-vue-app` 的目录，并设置好基本的 Vue3 和 Vite 结构[^5]。 #### 进入项目文件夹 切换到刚刚创建的项目文件夹中： ```bash cd my-vue-app ``` #### 安装依赖项 在进入项目根目录之后，安装所需的依赖库： ```bash npm install ``` 或者对于 Yarn 用户来说： ```bash yarn install ``` #### 启动开发服务器 完成上述操作后，启动本地开发服务器以便查看应用效果： ```bash npm run dev ``` Yarn 命令则为： ```bash yarn dev ``` 此时应该可以在默认端口（通常是 http://localhost:3000）上看到初始页面[^6]。 #### 使用 VSCode 打开项目 打开 VSCode 并加载该项目作为工作区的一部分： ```bash code . ``` 此命令会在当前路径下自动开启 VSCode 编辑器窗口[^7]。 #### 构建与预览生产环境代码 当准备部署应用程序时，可按照如下方式构建最终产物以及对其进行预览测试： - **Build**: ```bash npm run build ``` 或者 ```bash yarn build ``` - **Preview Build Output**: ```bash npm run preview ``` 或者 ```bash yarn preview ``` 这样就能通过指定 URL 地址审查编译后的静态资源成果[^8]。 --- ### 注意事项 尽管 React 被描述为具有简单的核心概念从而允许开发者专注于更高层次的设计模式而非单纯记忆 API 细节[^3]，Vue 类似地提供了直观易懂的数据绑定机制和组件化架构支持快速迭代复杂界面需求；因此熟悉其基础语法即可高效开展前端工程实践。