VUE项目搭建

121 阅读1分钟

安装Node

Node.js

安装完成之后。ctrl+R打开命令,查看是否安装成功。

  • 查看node版本号
node -v
  • 查看npm版本号
npm -v

image.png

安装Vue

image.png

在命令行中运行以下命令

npm create vue@latest

这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示:

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称: ... vue-project
√ 是否使用 TypeScript 语法? ... `否` / 是
√ 是否启用 JSX 支持? ... `否` / 是
√ 是否引入 Vue Router 进行单页面应用开发? ... `否` / 是
√ 是否引入 Pinia 用于状态管理? ... `否` / 是
√ 是否引入 Vitest 用于单元测试? ... `否` / 是
? 是否要引入一款端到端(End to End)测试工具? » - 使用箭头切换按Enter确√ 是否要引入一款端到端(End to End)测试工具? » 不需要
√ 是否引入 ESLint 用于代码质量检测? ... 否 / `是`
√ 是否引入 Prettier 用于代码格式化? ... `否` / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... `否` / 是

正在初始化项目 C:\Users\zhaohui\vue-project...

项目初始化完成,可执行以下命令:
  cd vue-project
  npm install
  npm run dev

这样我们就创建了一个名为vue-project的项目,然后我们继续在命令行输入

cd vue-project

它会启动vscode并打开这个项目

打开在vscode的终端,输入加载依赖的命令

npm i

加载完成之后项目中会多一个node_modules的文件夹

image.png

启动项目

npm run dev