基于Vue+ElementUI前端开发环境的搭建

一、工具的安装

1.安装node.js

下载Node.js安装包

官网地址
历史版本下载
这里以node-v12.18.0-x64.msi版本为例
1、下载
百度网盘地址(提取码：jzum)
2、安装
更改安装路径，点击下一步安装。

2.安装VS Code

下载VS Code安装包

官网地址
这里以VSCodeSetup-x64-1.42.1.exe版本为例
1.下载
百度云盘链接(提取码：iywr)
2.安装
更改安装路径，点击下一步安装。

3.安装完成

二、创建项目

1.安装中文插件(可选)

Vscode是一款开源的跨平台编辑器。默认情况下，vscode使用的语言为英文(en)

• 打开VsCode工具
• 使用快捷键ctrl+shift+p 组合快捷键在出现的搜索框中输入”configure display language“ 按回车键
  
• 安装简体中文
  
• 重新启动VsCode工具
  
• 中文插件安装完成
  

2.创建前端工程目录

在欢迎页面点击添加工作区文件，选择一个文件夹至工作区，作为工程目录，如图所示：

3.设置镜像

打开VSCode，Ctrl+Shift+`打开控制台，在右侧下拉框中选择cmd，如图所示：

1. 输入命令npm -v测试，node环境是否就绪；如果npm命令不能识别，请重启VSCode
   
2. 执行npm config get registry 查看当前镜像地址，默认为https://registry.npmjs.org/
   
3. 执行npm config set registry https://registry.npm.taobao.org，更换为淘宝镜像地址
   
   也可以执行npm install -g cnpm --registry=https://registry.npm.taobao.org
   安装淘宝镜像，安装后可以通过cnpm来执行相关npm命令.

4.安装脚手架

1. 执行npm install -g @vue/cli，安装vue脚手架
2. 执行 vue -V 或者 vue --version检查是否安装成功
   

5.创建vue项目

1. 执行npm install -g @vue/cli-init 安装初始化插件
   

2. 执行vue create vue-demo 创建一个vue项目vue-demo
   

3. 执行 cd vue-demo进入项目目录

4. 执行npm run serve命令可启动项目
   

5. 访问项目 http://localhost:8080/
   
   

三、组件安装

1.安装Element组件

1. 关闭服务，按ctrl+c 输入 Y 停止服务
2. 执行命令vue add element
3. 如有提醒，分别选择

• Full Import? Enter
• SCSS support? N
• ZH-CN
  

4. 执行命令 npm run serve 启动项目
5. 访问http://localhost:8080/，如下图，出现按钮代表element引入成功
   

2.安装Router组件

1. 关闭服务，按ctrl+c 输入 Y 停止服务
2. 执行vue add router，如果有提醒，选择 yes “回车”，“回车”…,启动项目
   
   
3. 打开新项目：文件–》打开文件夹–》选择对应的项目
   
   

目录介绍

项目目录介绍

实战操作

添加表格

添加导航栏

新增路由地址

安装axios组件

请求后台接口

代理设置

调试

打包

部署