[项目实战] 使用Idea构建单页面Vue3项目（不使用node、npm）

﹏ヽ暗。殇╰゛Y 2023-10-13 16:21 5阅读 0赞

## 前言 ##

某天张三对小花说，我需要在一台新电脑上实现一个前端的漂亮页面：比如京东手机首页(m.jd.com)。  
小花这时吭哧吭哧的去新电脑上安装nodejs、npm，然后在本地使用npm构建vue3项目，在项目里下载安装element-plus、axios。下一步进入编码阶段，写好的文件最后打包dist文件，放在nginx里去运行。

一套流程走下来，耗时耗力，此时我们应该使用更简单的方法来构建这种单页面的项目：单页面html直接引入Vue3。

## 1、单页面Vue架构 ##

1、构建html项目；  
2、创建单个html页面；  
3、在head区域引入Vue3、Element-plus、Axios等组件；  
4、在< div id=“app”>区域编写前端代码；  
5、在App里定义data、methods，创建VueApp；  
6、在data里定义数据模型；  
7、在methods里写事件交互，业务逻辑；  
![在这里插入图片描述][8ae42a4852ac45bfaded96657a0729bb.png]

## 2、构建html项目 ##

通过Idea新建一个空项目，设置项目名称、项目存储路径  
![在这里插入图片描述][22f02811d9dd44699cb1568d56c2b8a0.png]

## 2、创建单个html页面 ##

### 2.1、创建html目录![在这里插入图片描述][54ef1d6aebb740f689e8d43415e55ee8.png] ###

### 2.2、创建html页面 ###

在html目录下，创建HTML 文件  
![在这里插入图片描述][d6d02beb41834ac887a4c2ced2ed129e.png]  
![在这里插入图片描述][6279a9f467414daaa1b34d15856ab365.png]

### 2.3、在head区域引入Vue3、Element-plus、Axios等组件 ###

以CDN文件形式，引入Vue3、Element-plus、Axios等组件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>单页面引入Vue3演示</title>
        
        <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
        
        <script src="//unpkg.com/vue@3"></script>
        
        <script src="//unpkg.com/axios/dist/axios.min.js"></script>
        
        <script src="//unpkg.com/element-plus"></script>
    
    </head>
    <body>
    </body>
    </html>

### 2.4、在< div id=“app”>区域编写前端代码 ###

### 2.5、在App里定义data、methods，创建VueApp ###

### 2.6、在data里定义数据模型 ###

### 2.7、在methods里写事件交互，业务逻辑 ###

### 2.8、查看效果 ###

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

## 3、构建首页轮播图 ##

### 3.1、html区域使用Element-plus的Carousel 走马灯组件 ###

<div id="app">
    
            <h2>{
       {msg}}</h2>
    
            
            <div class="block">
                <el-carousel :interval="4000"  height="400px"  >
                    <el-carousel-item v-for="item in carouseData" :key="item">
                        <div class="pic_item">
                            <img :src="item.picture" style="width: 100%;height: 400px;" alt=""/>
                            <span class="title">{
       {item.title}}</span>
                            <span class="subTitle">{
       {item.subTitle}}</span>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
            
    
        </div>

### 3.2、脚本区域 ###

### 3.3、准备图片数据 ###

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

### 3.4、轮播图mock数据 data.json ###

{
        
      "success" : {
        
        "code" : 200 ,
        "message" : "成功",
        "data" :[
          {
        "picture": "../img/index/zlzx.png" , "title": "专注Web软件定制开发" , "subTitle": "平台软件+定制开发+多端互联" },
          {
        "picture": "../img/index/jkzhzx.png" , "title": "服务为本 客户至上" , "subTitle": "专业，敬业，周到"},
          {
        "picture": "../img/index/hysdp.png" , "title": "让技术驱动进步成长" , "subTitle": "以快捷，安全，自主，轻便技术能力为核心宗旨"},
          {
        "picture": "../img/index/cjkbdp.png" , "title": "让技术驱动进步成长" , "subTitle": "以快捷，安全，自主，轻便技术能力为核心宗旨"}
    
        ]
      } ,
      "fail" : {
        
        "code" : 400 ,
        "message" : "请求失败，请稍后再试！"
      }
    }

### 3.5、效果图 ###

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

## 总结 ##

通过单页面加载Vue3，可以在感受Vue3便捷的语法同时，还不需要安装node.js、npm等繁琐的工具，在独立的1-2个页面开发时，非常方便。

[8ae42a4852ac45bfaded96657a0729bb.png]: https://img-blog.csdnimg.cn/8ae42a4852ac45bfaded96657a0729bb.png
[22f02811d9dd44699cb1568d56c2b8a0.png]: https://img-blog.csdnimg.cn/22f02811d9dd44699cb1568d56c2b8a0.png
[54ef1d6aebb740f689e8d43415e55ee8.png]: https://img-blog.csdnimg.cn/54ef1d6aebb740f689e8d43415e55ee8.png
[d6d02beb41834ac887a4c2ced2ed129e.png]: https://img-blog.csdnimg.cn/d6d02beb41834ac887a4c2ced2ed129e.png
[6279a9f467414daaa1b34d15856ab365.png]: https://img-blog.csdnimg.cn/6279a9f467414daaa1b34d15856ab365.png
[76dab512efbb4158b5a26d60677a6a6f.png]: https://img-blog.csdnimg.cn/76dab512efbb4158b5a26d60677a6a6f.png
[d04c7eee5a204d32b312f732a14d8a48.png]: https://img-blog.csdnimg.cn/d04c7eee5a204d32b312f732a14d8a48.png
[a3aa061cf8124d7b81002e2eee5c67a8.png]: https://img-blog.csdnimg.cn/a3aa061cf8124d7b81002e2eee5c67a8.png