用CScode创建vue前端的环境配置

简介

vue官网

Vue.js - 渐进式 JavaScript 框架 | Vue.js

vite官网

Vite中文网

Vite 是一种具有明确建议的工具，具备合理的默认设置。您可以在功能指南中了解 Vite 的各种可能性。通过插件，Vite 支持与其他框架或工具的集成。如有需要，您可以通过配置部分自定义适应你的项目。

Vite 还提供了强大的扩展性，可通过其插件 API 和 JavaScript API 进行扩展，并提供完整的类型支持。

Nodejs安装及环境配置

下载安装

点击这里下载

根据自己电脑系统及位数选择，我这里选择windows64位.msi格式安装包

下载完成后，双击安装包，开始安装，一直点next即可，安装路径默认在C:\Program Files下，也可以自定义修改

安装完成后，.msi格式的安装包已经将node.exe添加到系统环境变量path中,如果你下载的是.zip格式，因为没有安装过程，所以需要手动将node.exe所在目录添加到环境变量path中，查看系统变量验证

如何用vite创建一个vue项目

在cmd下输入命令

首先输入npm create vite@latest

然后name后面输入文件夹名称

选择Vue项目和JavaScript脚本语言

根据产生的run，依次进入三个命令

Done. Now run:
 1、 cd 20231114-02
 2、npm install
 3、npm run dev

PS E:\2201software\20231114> cd ..
PS E:\2201software> npm create vite@latest
输入项目名称
√ Project name: ... 20231114-02
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
  选择vue项目
 ----------------------------------------------------------------------------------------------------
    √ Select a framework: » Vue
? Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
>   JavaScript
    Customize with create-vue ↗
    Nuxt ↗
选择脚本语言
 ----------------------------------------------------------------------------------------------------
Scaffolding project in E:\2201software\20231114-02...

Done. Now run:
  cd 20231114-02
  npm install  
  npm run dev  

PS E:\2201software>
Done. Now run:

  cd 20231114-02
  npm install
  npm run dev

PS E:\2201software> cd 20231114-02
PS E:\2201software\20231114-02> npm install
[#########.........] | idealTree:20231114-02: timing idealTree:#root Compl
----------------------------------------------------------------------------------------
运行项目  npm run dev

PS E:\2201software\20231114-02> npm run dev

> [email protected] dev
> vite

  VITE v4.5.0  ready in 556 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help