Vue+TypeScript+ElementUI 项目搭建指南：前沿技术打造卓越应用

前端

2023-11-11 20:16:24

环境准备

1.1 Node.js

（1）下载安装

官网：https://nodejs.org/en/

（双击下载文件，一路 next 即可）

注：推荐下载最新稳定版

安装完成后分别输入命令：

n
node -v
npm -v

检查是否安装成功。

（2）配置环境变量

在环境变量中添加 Node.js 的安装路径，以便在命令行中直接使用 Node.js 命令。

1.2 Git

（1）下载安装

官网：https://git-scm.com/

（一路 next 即可）

（2）配置环境变量

在环境变量中添加 Git 的安装路径，以便在命令行中直接使用 Git 命令。

1.3 IDE

推荐使用 Visual Studio Code 或 WebStorm。

1.4 Vue CLI

（1）安装 Vue CLI

npm install -g @vue/cli

（2）检查是否安装成功

vue -V

项目创建

2.1 创建项目

vue create my-project

（选择默认选项即可）

2.2 安装 TypeScript

cd my-project
npm install typescript -D

2.3 安装 ElementUI

npm install element-ui -S

项目结构

my-project
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── main.js
│   ├── components
│   │   ├── HelloWorld.vue
│   ├── views
│   │   ├── Home.vue
│   │   ├── About.vue
│   ├── assets
│   │   ├── logo.png
│   ├── style
│   │   ├── index.css
└── vue.config.js