基于Springboot搭建java项目（二十六）——创建Vue前端项目

最新推荐文章于 2023-09-22 15:09:56 发布

dreamer_0423

最新推荐文章于 2023-09-22 15:09:56 发布

阅读量650

点赞数

分类专栏：基于springboot搭建java项目前端文章标签： vue.js 前端 java

本文链接：https://blog.csdn.net/m0_46616045/article/details/128835566

版权

基于springboot搭建java项目同时被 2 个专栏收录

38 篇文章 20 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

创建Vue前端项目

一、创建Vue前端项目

1、安装 Vue CLI

1.1、下载Node.js

因为需要使用 npm 安装 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 https://nodejs.org/en/，首页即可下载。

下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入 node -v，检查是否安装成功。

出现了版本号（根据下载时候的版本确定），说明已经安装成功了。同时，npm 包也已经安装成功，可以输入 npm -v 查看版本号

输入 npm -g install npm ，将 npm 更新至最新版本。

1.2、安装vue脚手架

使用 npm install -g vue-cli 安装脚手架

注意此种方式安装的是 2.x 版本的 Vue CLI，最新版本需要通过 npm install -g @vue/cli 安装。

2、创建Vue基础项目

第一步：首先，进入到我们的工作文件夹中，执行命令 vue init webpack bookkeeping_front，这里 webpack 是以 webpack 为模板指生成项目，还可以替换为 pwa、simple 等参数。 wbookkeeping_front 是我们的项目名称，大家也可以起别的名字。

第二步：在程序执行的过程中会有一些提示，可以按照默认的设定一路回车下去，这里还会问是否安装 vue-router，一定要选是，也就是回车或按 Y，vue-router 是我们构建单页面应用的关键。还有是否使用 es-lint，也选择Y，接下来等待项目构建完成就 OK 了。

第三步：可以看到 workspace 目录下生成了项目文件夹 wbookkeeping_front，里面的结构如图

第四步：进入项目目录，执行npm run dev，项目构建成功，这一步如果报错，可能是未能加载项目所需的依赖包，即 node_modules 里的内容，需要在该文件夹执行 npm install ，再执行 npm run dev

第五步：访问 http://localhost:8080，查看网页 demo，大工告成！

二、Vue 项目结构分析

1、项目目录分析

在这里插入图片描述

使用 CLI 构建出来的 Vue 项目结构是这个样子的， components 文件夹是最常修改的部分，2.x 时代没有创建 view 这个目录，我们也可以认为 Vue 把视图也当做“组件”的一部分。

2、index.html

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

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

项目只有这一个 html 文件，所以这是一个 单页面应用，当我们打开这个应用，表面上可以有很多页面.

，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。

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 对应。

dreamer_0423

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于Springboot搭建java项目（二十六）——创建Vue前端项目

因为需要使用 npm 安装 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 https://nodejs.org/en/，首页即可下载。下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入node -v，检查是否安装成功。出现了版本号（根据下载时候的版本确定），说明已经安装成功了。同时，npm 包也已经安装成功，可以输入npm -v查看版本号输入，将 npm 更新至最新版本。
复制链接

扫一扫

专栏目录