spring boot +iview 前后端分离架构之前端工程的构建【CMD版】

左手的ㄟ右手 2021-11-26 13:32 188阅读 0赞

### spring boot 与 iview 前后端分离架构之前端工程的构建【CMD版】 ###

*  前端工程构建
 *   *  创建工作目录
     *  创建VUE工程
     *   *  工程名字
         *  工程描述
         *  工程作者
         *  工程构建
         *  是否安装路由
         *  是否需要ESLINT
         *  是否需要测试
         *  是否需要e2e的test
         *  是否马上就执行我们的依赖安装
         *  安装依赖
         *  运行程序

# 前端工程构建 #

在第一章我们采用的是用IDEA开发工具的方式来创建我们的vue工程，但是有部分小伙伴反应IDEA上找不到如何创建vue的工程，那么在本章我们将教大家如何使用命令行的形式来创建我们的vue工程。

## 创建工作目录 ##

首先打开我们的工作空间，创建我们的工作的目录，例如我在我的d盘创建一个名叫csdn的工具目录。

## 创建VUE工程 ##

接着我们运行我们的window的cmd命令，在cmd中输入以下的命令，进入到我们的工作目录。

d:
    cd D:\csdn

接着我们运行创建工程的命令：

vue init webpack bg-admin-web

若此时出现如下的页面，则我们执行以下的命令：  
![在这里插入图片描述][20190724091026889.png]

npm install -g @vue/cli-init

若是出现了上述的页面我们则再次执行我们的创建工程的命令，大家按着如下的步骤一步一步的配置我们的信息。

### 工程名字 ###

![在这里插入图片描述][20190724091236234.png]

### 工程描述 ###

![在这里插入图片描述][20190724091311286.png]

### 工程作者 ###

![在这里插入图片描述][2019072409133893.png]

### 工程构建 ###

默认选择第一个  
![在这里插入图片描述][20190724091430847.png]

### 是否安装路由 ###

输入Y，我们需要安装路由.  
![在这里插入图片描述][20190724091506317.png]

### 是否需要ESLINT ###

直接设置为n  
![在这里插入图片描述][20190724091547443.png]

### 是否需要测试 ###

直接设为n  
![在这里插入图片描述][20190724091652225.png]

### 是否需要e2e的test ###

直接设置为n  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]

### 是否马上就执行我们的依赖安装 ###

此处大家看各自的情况来选择，由于我已经安装了淘宝的镜像，因此此处我直接设置为不马上安装。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]

### 安装依赖 ###

若在上一步已经安装过依赖，则可以直接跳过此步骤。接着进入到我们的bg-admin-web工程目录，执行以下的命令来安装依赖。

cnpm install

### 运行程序 ###

到此处我们就完成了我们的工程的创建和相关依赖的下载，最后我们执行以下的命令启动我们的工程。

npm run dev

启动完成以后，我们直接访问http://127.0.0.1:8080 我们会看到如下的页面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]  
那么到此处我们就完成了我们的整个vue工程的构建了。

[20190724091026889.png]: /images/20211126/2d04e963b5604df9b1e566ebd2ba1540.png
[20190724091236234.png]: /images/20211126/80baf0af7b864eefb164c24206e7381a.png
[20190724091311286.png]: /images/20211126/90ac8ffe39074445abcfea162582093e.png
[2019072409133893.png]: /images/20211126/a7a1d577f66a4f2c890e50c170cd5e6b.png
[20190724091430847.png]: /images/20211126/0cf538b1d7234942a76b73f2afe7e1c2.png
[20190724091506317.png]: /images/20211126/74c3571dc22b4a0ca2fbea86e0151903.png
[20190724091547443.png]: /images/20211126/9eab38a7d6f0499f9e41791161db9c6b.png
[20190724091652225.png]: /images/20211126/f68fba1764d047bea0fdc3dcbf10c6e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20211126/784bb457d5fb43c7af2d0611ac59ea87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20211126/27015d2bc7de463a97db40d8dbab2fac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20211126/ceb83201ef254a669a8c1234e3d5864a.png