从零搭建开发脚手架 Vue + Element 前后端半分离环境搭建以及Hello world入门示例

布满荆棘的人生 2023-01-20 14:57 31阅读 0赞

### 文章目录 ###

*   *  前言
     *  个人需求
     *  开发准备
     *   *  Idea安装Vue插件
         *  Idea安装Element插件
         *  Vue+Element引入
     *  Hello world 页面
     *  问题

## 前言 ##

前端小白级别，我记得我写前端的时候，还是JSP、jQuery时代，后面又学了点LayUI，现在咨询了相关人士，建议我使用vue+element ui.

> 就想玩玩前端儿，无需太深入，毕竟个人精力有限。

## 个人需求 ##

*  前端框架技术简单易上手
 *  前端不想装其他额外的开发工具，就Idea就行
 *  前后端开发半分离

## 开发准备 ##

### Idea安装Vue插件 ###

直接插件市场搜索`vue`安装即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FidTkzNTAwOTA2Ng_size_16_color_FFFFFF_t_70_pic_center][]

### Idea安装Element插件 ###

直接插件市场搜索`element`安装即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FidTkzNTAwOTA2Ng_size_16_color_FFFFFF_t_70_pic_center 1][]

### Vue+Element引入 ###

**官网地址**

*  [vue官网][vue]
 *  [element官网][element]

**版本选择**

2.x版本

**CDN引入**

*  vue

*  element - 目前可以通过 [unpkg.com/element-ui][unpkg.com_element-ui] 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

**建议引入规范**

## Hello world 页面 ##

这里是element官网例子

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
      <div id="app">
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
          <p>Try Element</p>
        </el-dialog>
      </div>
    </body>
      
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script> new Vue({ el: '#app', data: function() { return { visible: false } } }) </script>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FidTkzNTAwOTA2Ng_size_16_color_FFFFFF_t_70_pic_center 2][]

## 问题 ##

**Spring Boot项目修改html页面不重启不生效？**

*  Spring Boot项目改为`DEBUG`启动
 *  每次修改完毕手动点击`构建项目`快捷方式`Ctrl+F9`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FidTkzNTAwOTA2Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/d8929128a12d4e99b21fe265c4b104ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FidTkzNTAwOTA2Ng_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221021/7df7cd905d8c4a0a825dc2577909f62c.png
[vue]: https://cn.vuejs.org/
[element]: https://element.eleme.cn/#/zh-CN
[unpkg.com_element-ui]: https://unpkg.com/element-ui/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FidTkzNTAwOTA2Ng_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221021/fb5f962ef4eb485680bccf3d30708ae7.png