Vue + Spring Boot 项目实战(三):使用IntelliJ IDEA快速生成 Vue.js 项目

文章目录

  • 一、使用idea Vue插件生成项目结构
    • 1.1. Create New Project
    • 1.2. 设置项目地址
    • 1.3. 确认项目名称
    • 1.4. 项目描述
    • 1.5. 作者信息
    • 1.6. 编译模板
    • 1.7. 安装路由
  • 二、安装node_modules模块
  • 三、启动项目
  • 四、Vue 项目结构分析
    • 4.1. 概览
    • 4.2. index.html
    • 4.3. App.vue
    • 4.4. main.js
    • 4.5. 项目源码

一、使用idea Vue插件生成项目结构

这里注意 Project location 需要输入到项目文件夹一级而不是 Workspace。输入完成后点击 Next,等待 Vue CLI 初始化,然后在可视化界面上确认项目信息,修改或 Next 即可。

1.1. Create New Project

对于习惯使用 IDE 的同学,可以使用更直观的方式构建项目。以 IntelliJ IDEA 为例,点击 Create New Project,然后选择 Static Web -> Vue.js,点击 next,输入相关参数
在这里插入图片描述

1.2. 设置项目地址

在这里插入图片描述

1.3. 确认项目名称

在这里插入图片描述

1.4. 项目描述

在这里插入图片描述

1.5. 作者信息

在这里插入图片描述

1.6. 编译模板

在这里插入图片描述

1.7. 安装路由

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、安装node_modules模块

IDEA 构建出的 Vue 项目是不含 node_modules 的,所以要先调出终端,执行 npm install,如果有可跳过。
在这里插入图片描述

三、启动项目

执行命令:npm run dev
在这里插入图片描述
在这里插入图片描述
另外 IDE 嘛,总是在 UI 上下了很多功夫,我们还可以在 package.json 文件上点击右键,选择 show npm scripts
在这里插入图片描述
然后就会出来 npm 命令窗口,想要执行哪个命令直接双击运行就可以了。
在这里插入图片描述
这些命令都是在 package.json 文件里预定义的。dev 和 start 是一样的,start 即是执行 npm run dev 命令
在这里插入图片描述
另外使用这种方法,可以激活 IDE 右上角的按钮
在这里插入图片描述
上面的内容应该足够详细了,如果大家还是遇到了问题,可以在评论区反馈一下,我会第一时间解答。

四、Vue 项目结构分析

4.1. 概览

使用 CLI 构建出来的 Vue 项目结构是这个样子的
在这里插入图片描述
里面我们需要关注的内容如下图,重点需要关注的我用小红旗标了出来
在这里插入图片描述
其中我们最常修改的部分就是 components 文件夹了,几乎所有需要手动编写的代码都在其中。

接下来我们分析几个文件,目的是理解各个部分是怎么联系到一起的。

4.2. index.html

首页文件的初始代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>my-vue-test</title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>

就是一个普普通通的 html 文件,让它不平凡的是 <div id="app"></div> ,下面有一行注释,构建的文件将会被自动注入,也就是说我们编写的其它的内容都将在这个 div 中展示。

还有不普通的一点是,整个项目只有这一个 html 文件,所以这是一个 单页面应用,当我们打开这个应用,表面上可以有很多页面,实际上它们都只不过在一个 div 中。

4.3. App.vue

上面图上我把这个文件称为“根组件”,因为其它的组件又都包含在这个组件中。

.vue 文件是一种自定义文件类型,在结构上类似 html,一个 .vue 文件即是一个 vue 组件。先看它的初始代码

<template><div id="app"><img src="./assets/logo.png"><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

大家可能注意到了,这里也有一句 <div id="app">,但跟 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。

<script>标签里的内容即该组件的脚本,也就是 js 代码,export default 是 ES6 的语法,意思是将这个组件整体导出,之后就可以使用 import 导入组件了。大括号里的内容是这个组件的相关属性。

这个文件最关键的一点其实是第四行, <router-view/>,是一个容器,名字叫“路由视图”,意思是当前路由( URL)指向的内容将显示在这个容器中。也就是说,其它的组件即使拥有自己的路由(URL,需要在 router 文件夹的 index.js 文件里定义),也只不过表面上是一个单独的页面,实际上只是在根组件 App.vue 中。

4.4. main.js

前面我们说 App.vue 里的 <div id="app"> 和 index.html 里的 <div id="app"> 没有关系,那么这两个文件是怎么建立联系的呢?让我们来看入口文件 main.js 的代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

这里插一嘴,这个 js 文件有的同学可能看着不顺眼,比如没有分号(;),因为是 ES6 的语法,不这么写反而会提示错误,虽说可以把 es-lint 改了或者关了,但我想熟悉一下新的规则也挺好。

最上面 import 了几个模块,其中 vue 模块在 node_modules 中,App 即 App.vue 里定义的组件,router 即 router 文件夹里定义的路由。

Vue.config.productionTip = false ,作用是阻止vue 在启动时生成生产提示。

在这个 js 文件中,我们创建了一个 Vue 对象(实例),el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标,router 代表该对象包含 Vue Router,并使用项目中定义的路由。components 表示该对象包含的 Vue 组件,template 是用一个字符串模板作为 Vue 实例的标识使用,类似于定义一个 html 标签。

看完了以上三个文件,我想基本上就对前端项目的结构有所了解了。下一篇中我将用一个例子解释前后端分离的项目是如何联系起来的。

4.5. 项目源码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/521687.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

沙漠种水稻,88岁的袁隆平又创造奇迹!他参与的“袁米”还有个大计划

摘要&#xff1a; 今年88岁的袁隆平说&#xff0c;他退休之前想看到两件事情&#xff1a;一件是杂交稻大面积亩产1200公斤&#xff0c;另一件是海水稻研发成功。 这几天&#xff0c;关于海水稻的话题再次成为热点。 上周&#xff0c;在两院院士大会上&#xff0c;海水稻和杂交水…

八年磨一剑,阿里云ApsaraDB for HBase2.0正式上线

摘要&#xff1a; ApsaraDB for HBase2.0于2018年6月6日即将正式发布上线啦&#xff01; 它是基于社区HBase2.0稳定版的升级&#xff0c;也是阿里HBase多年的实践经验和技术积累的持续延伸&#xff0c;全面解决了旧版本碰到的核心问题&#xff0c;并做了很多优化改进&#xff0…

oracle 12.2 启用分片,关于Oracle Sharding,你想知道的都在这里

编辑手记&#xff1a;随着Oracle12.2的发布&#xff0c;Sharding技术也逐渐变得越来越强大&#xff0c;关于Sharding,你所关心的问题的答案&#xff0c;可能都在这里。注&#xff1a;本文来自Oracle FAQ文档翻译相关阅读&#xff1a;什么是Oracle ShardingOracle Sharding是为O…

看完这篇还不会kafka,我跪榴莲!

戳蓝字“CSDN云计算”关注我们哦&#xff01;Kafka 对外使用 Topic 的概念&#xff0c;生产者往 Topic 里写消息&#xff0c;消费者从中读消息。为了做到水平扩展&#xff0c;一个 Topic 实际是由多个 Partition 组成的&#xff0c;遇到瓶颈时&#xff0c;可以通过增加 Partiti…

软件开发实训需要用到的算法和结构_软件开发实习个人总结

软件开发实习个人总结软件开发实习不仅可以让我们掌握技术知识&#xff0c;更重要的是学习到很多新的东西。以下是软件开发实习个人总结&#xff0c;欢迎阅览!软件开发实习个人总结1这次实训使我们明白我们所欠缺的不仅仅是技术知识&#xff0c;更重要的是有一种处理事情的方法…

Vue + Spring Boot 项目实战(四):前后端结合测试(登录页面开发)

前面我们已经完成了前端项目 DEMO 的构建&#xff0c;这一篇文章主要目的如下&#xff1a; ①打通前后端之间的联系&#xff0c;为接下来的开发打下基础 ②登录页面的开发&#xff08;无数据库情况下&#xff09; 文章目录一、后端项目创建1.1. 项目/包名称1.2. web依赖1.3. 运…

探秘盒马机器人餐厅:老外目瞪口呆,90岁奶奶狂点赞

摘要&#xff1a; “菜来了。”一台小车停在餐桌旁&#xff0c;“张开”透明盒盖&#xff0c;瓮声瓮气的机器声提示取餐&#xff0c;它的“肚子”里&#xff0c;是一条热腾腾的清蒸鱼。 刚刚点菜的顾客兴奋地宣布&#xff0c;从下单到拿到菜&#xff0c;只花了11分钟。此时不到…

【漫画】AI小猪的一生

摘要&#xff1a; 6月7日&#xff0c;在上海云栖大会上&#xff0c;阿里云发布ET农业大脑。希望将人工智能与农业深入结合&#xff0c;目前已应用于生猪养殖、苹果及甜瓜种植&#xff0c;具备数字档案生成、全生命周期管理、智能农事分析、全链路溯源等功能。AI可以记录猪完整的…

oracle数据库并行数限制,Oracle数据库并行处理技术详解(上)

Oracle数据库并行处理技术是数据库的一项核心技术&#xff0c;它使组织能够高效地管理和访问TB级的数据。如果不能提供高效的Oracle数据库并行处理技术&#xff0c;这些大型数据库(通常用于数据仓库但也越来越多地出现在业务系统中)将不会存在。简而言之&#xff0c;并行处理就…

tcp实时传输kafka数据_tcp怎么传输大数据

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":7,"count":7}]},"card":[{"des":"阿里云实时计算(Alibaba Cloud Realtime Com…

苹果手机数据线充不了电_手机充电器充不了电?其实4招就能解决

无论科技有多么发达&#xff0c;智能手机怎么样变化&#xff0c;至少就目前使用的智能手机上来看&#xff0c;使用手机就离不开"电"。哪怕是即将开售的折叠手机&#xff0c;也还是需要充电才能够正常使用。所以说&#xff0c;对于是手机而言&#xff0c;"有电&q…

Vue + Spring Boot 项目实战(五):数据库的引入

文章目录一、引入数据库1.安装数据库2. 安装mysql3. MySQL客户端4. .使用 Navicat 创建数据库与表二、使用数据库验证登录1.项目相关配置2.登录控制器2.1. User 类2.2. UserDAO2.3. UserService2.4. LoginController2.5. 测试一、引入数据库 1.安装数据库 官网地址&#xff1…

三招提升数据不平衡模型的性能(附python代码)

摘要&#xff1a; 本文的主要目标是处理数据不平衡问题。文中描述了用来克服数据不平衡问题的三种技术&#xff0c;分别是集成交叉验证、类别权重以及过大预测 。对于深度学习而言&#xff0c;数据集非常重要&#xff0c;但在实际项目中&#xff0c;或多或少会碰见数据不平衡问…

为什么说「中台」程序员将来会最值钱?

戳蓝字“CSDN云计算”关注我们哦&#xff01;今年在国内互联网公司中真的是很流行中台这个概念&#xff0c;不&#xff0c;是非常流行&#xff0c;是相当流行。作为程序员真的非常有必要了解一下。国内中台概念的由来国内中台的这个概念最早是由阿里巴巴提出来的。据说故事是这…

springboot导包显示不存在_BOOT项目依赖另外一个模块的包,开发的时候都正常,执行clean package打包成jar时却提示依赖的模块包不存在。...

我在service1模块里依赖了common模块&#xff0c;开发的时候包都能正常引用到&#xff0c;启动也能正常测试访问&#xff0c;可是奇怪的是&#xff0c;当我要打包成jar包时&#xff0c;就提示service1里依赖common的包都不存在&#xff0c;之前从没遇到过这种问题&#xff0c;有…

别把机器学习和人工智能搞混了!

摘要&#xff1a; 原来机器学习就是人工智能的一小部分啊&#xff01;智力就是理性思考和控制行为的能力。人类有智慧去思考和利用常识来作出决定。人工智能就是一个构建智能代理的研究领域&#xff0c;因此未来我们打造出来的人工智能可以像人一样思考并理性行事。图灵测试由艾…

varclus变量聚类对变量有啥要求_互助问答第208期:递归的双变量probit模型问题...

递归的双变量probit模型的stata命令是什么&#xff1f;比如二元被解释变量为y1&#xff0c;内生的二元变量为t1&#xff0c;x1和x2是其他外生协变量&#xff0c;iv1为内生二元解释变量的工具变量&#xff0c;那么&#xff0c;递归双变量probit模型是否可以写为&#xff1a;bipr…

Vue + Spring Boot 项目实战(六):使用 Element 辅助前端开发

文章目录一、安装并引入 Element1.安装 Element2.引入 Element二、优化登录页面1.使用 Form 组件2.添加样式3.设置背景4.完整代码之前我们实现了登录功能&#xff0c;但不得不说登录页面实在是太简陋了。在这个看脸的社会&#xff0c;如果代码写的烂&#xff0c;界面也做得不好…

不止 5G 和鸿蒙,华为最新大招,扔出 AI 计算核弹

戳蓝字“CSDN云计算”关注我们哦&#xff01;华为发布全世界最快AI产品&#xff0c;集成1024颗业内最强芯片&#xff0c;训练ResNet-50只需59.8秒。近日&#xff0c;华为全联接大会开幕&#xff0c;推出又一重量级AI产品Atlas900。此前接受外媒采访时&#xff0c;任正非就已经预…

阿里90后工程师利用ARM硬件特性开启安卓8终端“上帝模式”

摘要&#xff1a; 本文以安卓8终端为载体&#xff0c;介绍阿里安全潘多拉实验室成员研究并提出的内核空间镜像攻击利用技巧。文/图 阿里安全潘多拉实验室 团控编者按&#xff1a;团控&#xff0c;阿里安全潘多拉实验室研究人员&#xff0c;该实验室主要聚焦于移动安全领域&…