0
点赞
收藏
分享

微信扫一扫

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,输入相关参数

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

1.2. 设置项目地址

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

1.3. 确认项目名称

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

1.4. 项目描述

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

1.5. 作者信息

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

1.6. 编译模板

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

1.7. 安装路由

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


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


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


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


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


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


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


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


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

二、安装node_modules模块

IDEA 构建出的 Vue 项目是不含 ​​node_modules​​​ 的,所以要先调出终端,执行 ​​npm install​​,如果有可跳过。

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

三、启动项目

执行命令:​​npm run dev​

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


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


另外 IDE 嘛,总是在 UI 上下了很多功夫,我们还可以在 package.json 文件上点击右键,选择 ​​show npm scripts​

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


然后就会出来 npm 命令窗口,想要执行哪个命令直接双击运行就可以了。

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


这些命令都是在 ​​package.json​​ 文件里预定义的。dev 和 start 是一样的,start 即是执行 ​​npm run dev​​ 命令

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


另外使用这种方法,可以激活 IDE 右上角的按钮

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


上面的内容应该足够详细了,如果大家还是遇到了问题,可以在评论区反馈一下,我会第一时间解答。

四、Vue 项目结构分析

4.1. 概览

使用 CLI 构建出来的 Vue 项目结构是这个样子的

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


里面我们需要关注的内容如下图,重点需要关注的我用小红旗标了出来

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


其中我们最常修改的部分就是 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. 项目源码


举报

相关推荐

0 条评论