Vue项目创建启动+目录结构+开发流程附代码

Vue项目介绍

首先是创建,可以用命令行

vue create xxxx

或者UI界面
(安装Vue CIL,如果已安装,此步忽略)

npm install -g @vue/cli

安装成功后如图
在这里插入图片描述

1.首先cmd随便进入一个文件夹:
在这里插入图片描述
2.cmd中接着输入 vue ui即可
在这里插入图片描述
在这里插入图片描述
接着点创建项目,补充相关信息选项后即可,相应的cmd和文件夹也会变化
在这里插入图片描述
在这里插入图片描述

Vue目录结构

某马
更详细的Vue目录结构介绍如下:

vue_project/
├── public/
│   ├── index.html           # 入口 HTML 文件
│   └── favicon.ico          # 网站图标
├── src/
│   ├── assets/              # 资源文件夹,如图片、字体等
│   ├── components/          # 组件文件夹
│   │   ├── HelloWorld.vue   # 示例组件
│   ├── views/               # 页面级组件文件夹
│   │   ├── Home.vue         # 示例页面组件
│   ├── router/              # 路由配置文件夹
│   │   └── index.js         # 路由配置文件
│   ├── store/               # 状态管理文件夹
│   │   ├── index.js         # 状态管理入口文件
│   │   ├── mutations.js     # mutations 定义
│   │   ├── actions.js       # actions 定义
│   │   └── getters.js       # getters 定义
│   ├── styles/              # 样式文件夹,如 CSS、Sass、Less 等
│   │   └── main.scss        # 主样式文件
│   ├── utils/               # 工具函数文件夹
│   │   └── api.js           # API 请求封装
│   ├── App.vue              # 根组件
│   └── main.js              # 入口 JavaScript 文件
├── .babelrc                 # Babel 配置文件
├── .eslintrc.js             # ESLint 配置文件
├── vue.config.js            # Vue CLI 配置文件
└── package.json             # 项目配置文件

Vue项目启动

某马总结的很好,这里一图以盖之:
在这里插入图片描述

Vue开发流程

1.初始化项目:使用 Vue CLI 初始化一个新的 Vue 项目。

vue create my-project
cd my-project

2.编写和组织组件:在 src/components/ 目录下编写各种 Vue 组件,比如 HelloWorld.vue:

<!-- HelloWorld.vue -->
<template>
  <div class="hello-world">
    <h1>{{ greeting }}</h1>
    <button @click="changeGreeting">Change Greeting</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello, World!'
    };
  },
  methods: {
    changeGreeting() {
      this.greeting = 'Bonjour, le monde!';
    }
  }
};
</script>

<style scoped>
.hello-world {
  font-size: 24px;
}
</style>

3.配置路由:在 src/router/ 目录下配置路由,比如 index.js:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

4.管理状态:在 src/store/ 目录下使用 Vuex (最重要的一点,vuex存的数据是响应式的,即当数据改变后,Vue会通知到使用该数据的代码,从而使视图自动更新)来管理应用的全局状态,比如 index.js:

**// src/store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

5.处理样式:在 src/styles/ 目录下编写样式文件,比如 main.scss:

// src/styles/main.scss
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

6.处理数据请求:在 src/utils/ 目录下封装 API 请求函数,比如 api.js:

// src/utils/api.js
import axios from 'axios';

const API_BASE_URL = 'https://api.example.com';

export const fetchData = async () => {
  try {
    const response = await axios.get(`${API_BASE_URL}/data`);
    return response.data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
};

7.调试和测试,编写测试用例并进行测试,使用浏览器F12等工具进行调试。
8.打包:使用 npm run build 命令将项目打包成署所需的文件

npm run build
  • 23
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 要将SpringBoot+Vue项目部署到IDEA中,需要执行以下步骤: 1. 在IDEA中导入项目,选择项目目录下的pom.xml文件,等待依赖下载完成。 2. 在项目中打开终端,进入到Vue项目的根目录下,执行命令`npm install`,等待依赖下载完成。 3. 执行命令`npm run build`,将Vue项目打包生成静态文件。 4. 将打包后的静态文件复制到SpringBoot项目的src/main/resources/static目录下。 5. 运行SpringBoot项目,即可在浏览器中访问部署好的应用程序。 以上就是将SpringBoot+Vue项目部署到IDEA中的步骤。 ### 回答2: 要将Spring Boot Vue项目部署到IDEA中,可以按照以下步骤进行操作: 1. 在IDEA中导入Spring Boot项目:打开IDEA,选择“File” -> “New” -> “Project from Existing Sources”,然后选择项目的根目录,点击“OK”导入项目。 2. 配置Maven依赖:在项目的根目录下找到pom.xml文件,在其中添加所需的依赖项。例如,添加Spring Boot和Vue相关的依赖。完成后,点击"Maven Projects"窗口的"Refresh"按钮,以确保依赖项正确加载。 3. 配置Spring Boot运行配置:点击IDEA右上角的“Add Configuration”按钮,在弹出的配置窗口中选择“Spring Boot”,然后在“Main class”字段中选择Spring Boot项目的主类。点击“Apply”保存配置。 4. 配置前端构建:进入前端项目目录,在命令行中执行`npm install`命令安装项目所需的依赖。然后执行`npm run build`命令,将前端代码编译为静态资源。 5. 配置后端运行端口:可以在Spring Boot项目的配置文件(如application.properties)中配置后端运行的端口号。 6. 启动项目:回到IDEA中,点击顶部工具栏中的“Run”按钮,选择刚刚配置好的Spring Boot运行配置,并点击“Run”。此时,Spring Boot项目将会启动。 7. 访问项目:在浏览器中输入“http://localhost:端口号”(替换为实际的端口号),即可访问部署在IDEA中的Spring Boot Vue项目。 以上是将Spring Boot Vue项目部署到IDEA的简要步骤。具体操作可能因项目结构和依赖库的差异而有所不同,但总体流程是相似的。希望对你有帮助! ### 回答3: 将Spring Boot Vue项目部署到IntelliJ IDEA可以按照以下步骤进行: 1. 首先,确保已经安装好了IntelliJ IDEA,并且具备Spring Boot和Vue.js开发环境。 2. 打开IntelliJ IDEA,点击“File”菜单,选择“New” > “Project”,在弹出的窗口中选择“Spring Initializr”作为项目类型。 3. 在下一步中,选择你的项目的基本配置,包括项目的名称、位置和语言等。 4. 在“Dependencies”一栏中,选择你需要的Spring Boot和Vue.js的依赖,例如Web、Vue.js等。 5. 点击“Finish”按钮创建项目,等待IntelliJ IDEA自动生成项目的基本结构。 6. 导入前端Vue项目,在IntelliJ IDEA左侧的Project窗口中,右键点击项目名称,选择“New” > “Module from Existing Sources”,然后选择你的Vue项目所在的文件夹,点击“OK”按钮导入项目。 7. 在导入的Vue项目中,运行“npm install”命令安装所需的依赖。 8. 通过修改Spring Boot项目中的application.properties或application.yml文件来配置后端服务的端口和其他配置。 9. 在IDEA中,找到Spring Boot的启动类,右键点击选择“Run 'XXX'”(XXX代表你的启动类名称),启动后端服务。 10. 在Vue项目中,运行“npm run dev”命令来启动前端开发服务器。 11. 现在,你的Spring Boot Vue项目已经部署到IDEA中了。你可以在浏览器中访问前端开发服务器的URL,查看项目的效果。 通过以上步骤,你可以成功将Spring Boot Vue项目部署到IntelliJ IDEA,并进行开发和调试。如果有需要,你还可以进一步配置和优化项目开发环境。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值