Vue + Element UI（一）：搭建开发环境

小灰灰 2022-09-10 14:19 300阅读 0赞

### 文章目录 ###

*   *  一、环境准备
     *  二、安装NodeJs
     *  三、安装 webpack
     *  四、安装vue-cli
     *  五、淘宝镜像
     *  六、安装 Yarn
     *  七、创建 & 启动 项目

--------------------

> 饿了么提供的UI框架：[Element UI][]

## 一、环境准备 ##

*  [Node JS（npm）][Node JS_npm]
 *  Hbuilder 或者 Visual Studio Code（前端IDE）
 *  环境安装

--------------------

## 二、安装NodeJs ##

下载地址：[http://nodejs.cn/download/][Node JS_npm]

到官网下载自己系统对应的版本，这里我们下载Windows系统的64位zip文件，下载完成后解压，可以看到里面有一个node.exe的可执行文件。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_14_color_FFFFFF_t_70_g_se_x_16]

如果你安装的是旧版本的 npm，可以很容易得通过 npm 命令来升级。

sudo npm install npm -g  #linux
    npm install npm -g　　# windows

更多NodeJS教程可以参考以下资料：

*  中文官网：[http://nodejs.cn/api/][http_nodejs.cn_api]
 *  菜鸟学堂：[https://www.runoob.com/nodejs/nodejs-tutorial.html][http_nodejs.cn_api]

## 三、安装 webpack ##

安装好 npm 之后，就可以通过 npm 命令来下载各种工具了。

安装打包工具 webpack，-g 表示全局安装。

npm install webpack -g

更多webpack教程可以参考以下资料：

*  菜鸟学堂：[http://www.runoob.com/w3cnote/webpack-tutorial.html][http_www.runoob.com_w3cnote_webpack-tutorial.html]

## 四、安装vue-cli ##

安装 vue 脚手架项目初始化工具 vue-cli，-g 表示全局安装。

npm install vue-cli -g

## 五、淘宝镜像 ##

因为 npm 使用的是国外中央仓库，有时候下载速度比较“感人”，就像 Maven 有国内镜像一样，npm 在国内也有镜像可用。这里建议使用淘宝镜像。

安装淘宝镜像，安装成功后 用 cnpm 替代 npm 命令即可，如： `cnpm install webpack -g`

npm install -g cnpm --registry=https://registry.npm.taobao.org

## 六、安装 Yarn ##

Yarn 是 Facebook 发布的 node.js 包管理器，它比 npm 更快、更高效，可以使用 Yarn 替代 npm 。

如果你安装了node，就安装了npm，可以使用下面的命令来安装：

npm i yarn -g --verbose

npm官方源访问速度实在不敢恭维，建议使用之前切换为淘宝镜像，在yarn安装完毕之后执行如下指令：

yarn config set registry https://registry.npm.taobao.org

到此为止我们就可以在项目中像使用npm一样使用yarn了。

使用 Yarn 跟 npm 差别不大，具体命令关系如下：

npm install  => yarn install
    npm install --save [package] => yarn add [package]
    npm install --save-dev [package] => yarn add [package] --dev
    npm install --global [package] => yarn global add [package]
    npm uninstall --save [package] => yarn remove [package]
    npm uninstall --save-dev [package] => yarn remove [package]

## 七、创建 & 启动 项目 ##

环境已经搭建完成，现在我们通过 vue-cli 来生成一个项目，名称为 kitty-ui。

//可能需要先安装cli-init
    npm i -g @vue/cli-init
    //然后再执行下面的命令
    vue init webpack kitty-ui

一路根据提示输入项目信息，等待项目生成。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
生成的目录结构：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_15_color_FFFFFF_t_70_g_se_x_16]  
进入到项目根目录，按照指示执行命令，启动项目。

cd kitty -ui
    npm run dev

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
浏览器访问对应地址，如这里的: [http://localhost:8080][http_localhost_8080]，会出现 vue 的介绍页面。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
到此，我们的项目脚手架就建立起来了。

[Element UI]: https://element.eleme.cn/#/zh-CN/component/installation
[Node JS_npm]: http://nodejs.cn/download/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/8fc615498901466da2b21c9a5f61fb63.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/85cca4cb8c2b433e907aa6fe4363d56d.png
[http_nodejs.cn_api]: http://nodejs.cn/api/
[http_www.runoob.com_w3cnote_webpack-tutorial.html]: http://www.runoob.com/w3cnote/webpack-tutorial.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/4ed7713bf96c465f9b16ecf0239326ed.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/486e633609f1471ea89d455c3081ac23.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/42157cb1c9694994be82f898857d0428.png
[http_localhost_8080]: http://localhost:8080
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/2a78f64ca72243d2be004c46699ab106.png