🏄‍♂️🏄‍♂️Vue项目攻略：从创建到打包部署一气呵成

知了知了__2024-01-18 16:21

1. 准备工作

首先在创建自己的vue项目之前，Node.js 和 npm 是必须要安装的。这两个没有的话可以在官方下载一下，访问 Node.js官方网站，点击 "LTS"（推荐版本）下载按钮，下载适合Windows的安装程序。默认情况下会同时安装Node.js和npm。

然后全局安装Vue CLI

具体步骤是：打开我们的编辑器，打开我们的项目文件夹，点击上边的导航栏里-查看-终端，在终端命令行中输入npm install -g @vue/cli，敲回车

bash 复制代码 
npm install -g @vue/cli

注意这里的-g是全局安装标志，除了-g之外，还有一些其他常见的标志。

  1. -g（全局安装）：

    • 用法：npm install -g package-name
    • 描述：全局安装一个包，使其可在系统的任何地方使用，通常用于安装命令行工具。

  2. -D（开发依赖）：

    • 用法：npm install -D package-name
    • 描述：安装一个包作为开发依赖项。这将把包添加到 package.json 文件的 devDependencies 中。开发依赖项是在开发过程中使用的，但在生产环境中不需要的工具和库。

  3. -S（生产依赖）：

    • 用法：npm install -S package-name
    • 描述：安装一个包作为生产依赖项。这将把包添加到 package.json 文件的 dependencies 中。生产依赖项是在应用程序运行时需要的工具和库。

2. 创建Vue项目

快速创建Vue项目有几种方式，其中最常用的方式是使用Vue CLI.

A. Vue CLI（官方推荐）

  • 使用Vue CLI是最常见的创建Vue项目的方式。Vue CLI提供了一套标准化的项目结构和一系列命令，创建、开发Vue项目都很方便。

    bash 复制代码 
    vue create my-vue-project

  • 然后按照命令行提示选择配置选项，这里的项目配置就看自己的项目需求了。

B. Vue UI（可视化界面）

  • Vue CLI还提供了一个可视化的用户界面，称为Vue UI。通过以下命令启动Vue UI：

    bash 复制代码 
    vue ui

  • 这样将在浏览器中打开一个图形用户界面，可以通过图形界面进行项目的管理配置。

C. 通过 Vite 创建项目

使用 npm init vite 方式创建 Vue 项目是一种在命令行中的方法。Vite 提供了一个快速初始化项目的命令行工具。

  1. 全局安装 Vite（如果未安装） 使用下面的命令进行全局安装：

    bash 复制代码 
    npm install -g create-vite

  2. 使用 npm init vite 初始化项目 在我们希望创建项目的目录中，运行以下命令：

    bash 复制代码 
    npm init vite my-vue-project

  3. 进入项目目录 进入新创建的项目目录：

    bash 复制代码 
    cd my-vue-project

  4. 安装依赖 安装项目依赖项：

    bash 复制代码 
    npm install

注意事项

  • 通过 Vite 创建的项目默认使用 Vue 3。

3. 开发阶段

开发阶段概括的描述应该有这些步骤：

下载依赖

安装路由（Vue Router）

安装状态管理库（Vuex）

创建和组织组件

编写业务逻辑

路由导航守卫

A.下载依赖

安装项目依赖项

使用npm install命令安装项目依赖项，这些依赖项通常包括Vue项目中可能需要使用的其他工具和库：

bash 复制代码 
npm install

安装其他依赖项

根据项目需求，可能需要安装其他依赖项，比如UI库、图表库等。例如，我们有可能会安装一个常用的UI库（以Element UI为例）：

bash 复制代码 
npm install element-plus

B.安装路由（Vue Router）

使用Vue CLI提供的插件安装Vue Router

Vue CLI提供了一个便捷的插件来安装Vue Router。

bash 复制代码 
vue add router

这将会引导你进行一些基本的配置，并自动安装Vue Router。

配置路由

在安装完成后，我们一般在 src/router/index.js 文件中配置路由。

我们随便举个配置路由的栗子：

javascript 复制代码 
// 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(),
  routes,
});

export default router;

C.安装状态管理库（Vuex / Pinia）：

这里以Vuex为例：

使用Vue CLI提供的插件安装Vuex：

运行以下命令来使用Vue CLI提供的插件安装Vuex：

bash 复制代码 
vue add vuex

后面会引导我们进行一些基本的配置，并自动安装Vuex。

配置和使用Vuex：

在安装完成后，我们可以在 src/store/index.js 文件中配置和使用Vuex。定义状态、mutations、actions等

javascript 复制代码 
// src/store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    // 定义状态
  },
  mutations: {

  },
  actions: {

  },
  modules: {
    // 模块定义
  },
});

D.创建和组织组件

创建Vue组件

我们一般在 src/components 目录中创建Vue组件。使用单文件组件（.vue文件）的方式编写组件

html 复制代码 
<!-- src/components/MyComponent.vue -->
<template>
  <div>
    <!-- 组件 -->
  </div>
</template>

<script>
export default {
  // 组件逻辑
}
</script>

<style>
/* 样式 */
</style>

E.编写业务逻辑

在组件中编写业务逻辑

我们经常使用Vue的生命周期钩子函数来执行特定的操作。例如，使用 mounted 钩子来在组件被挂载后执行一些初始化逻辑：

javascript 复制代码 
// src/components/MyComponent.vue
export default {
  mounted() {
    console.log('Component is mounted');
    // 执行初始化逻辑
  }
}

F.样式和布局

使用CSS、SCSS、LESS或其他样式预处理器：

选择样式预处理器：

  • 团队经验： 团队熟悉度对于选择预处理器很重要，如果团队成员已经熟悉某个预处理器，可能更容易做出选择。
  • 项目需求： 根据项目的需求来选择。例如，如果需要更强大的功能和生态系统，选择SCSS可能更合适；如果对学习曲线和编译速度有更高要求，可能选择LESS更好一点。

G.路由导航守卫：

根据需要使用路由导航守卫

在Vue Router中，可以使用路由导航守卫来处理路由跳转前后的逻辑。我们可以在 beforeEach 钩子中执行一些权限验证：

javascript 复制代码 
// src/router/index.js
router.beforeEach((to, from, next) => {
  // 进行权限验证等逻辑
  next();
});

4. 测试和调试

A.测试

  1. 单元测试（Unit Testing）：

    • 使用测试框架如Jest、Mocha、Vue Test Utils等进行单元测试。
    • 针对组件、函数和工具进行测试，确保它们的行为符合预期。

  2. 集成测试（Integration Testing）：

    • 测试多个组件之间的协作和集成，以确保整个应用的不同部分协同工作。
    • 使用工具如Cypress、TestCafe等进行集成测试。

  3. 端到端测试（End-to-End Testing）：

    • 使用工具如Cypress、Puppeteer等进行端到端测试，模拟用户与应用的交互。
    • 测试整个应用的流程，包括UI、功能和用户体验。

B.调试

  1. 浏览器开发者工具：

    • 使用浏览器自带的开发者工具进行调试。可以检查元素、查看网络请求、调试JavaScript代码等。

  2. Vue Devtools：

    • 安装Vue Devtools浏览器扩展，它提供了一个Vue专用的调试工具，可以在浏览器中实时查看和编辑Vue组件树、状态、事件等。

  3. Console 日志：

    • 在代码中插入console.log语句输出信息，帮助查找问题。
    • 使用console.warn和console.error输出警告和错误信息。

  4. Vue CLI 调试模式：

    • 使用Vue CLI提供的调试模式，通过命令行启动调试服务器。例如：npm run serve -- --inspect。
    • 使用Node.js的调试器工具，如Chrome DevTools、Visual Studio Code等进行远程调试。

  5. Vue Test Utils 调试：

    • 在单元测试中使用Vue Test Utils提供的调试方法，例如wrapper.debug()，来输出组件的当前状态。

  6. Network 请求调试：

    • 使用浏览器的网络面板检查请求和响应，查看是否有错误或者优化的空间。

  7. 性能优化工具：

    • 使用Chrome DevTools中的Performance面板进行性能分析，找到性能瓶颈。
    • 使用Vue Devtools的性能面板进行Vue应用的性能分析。

  8. 错误追踪工具：

    • 集成错误追踪工具，如Sentry、Bugsnag等，用于收集和分析生产环境中的错误信息。

5. 构建生产版本

这一步是指将项目代码经过优化、压缩，以便在生产环境中部署和运行。

  • 通常是运行构建命令，通过Vue CLI提供的 npm run build 命令
  • 构建过程将生成一个优化过的、用于生产环境的版本，存储在dist目录中。

当然现在都会用更好用的打包工具比如：webpack、Parcel、Rollup、Grunt等等，有兴趣的话可以在网上查一下怎么用。

6. 部署到服务器

  • 将构建好的生产版本部署到服务器。可以使用FTP、SSH等方式进行部署。
  • 配置服务器以支持Vue应用程序。

7. 配置域名和SSL证书（可选）

  • 如果有自定义域名，配置服务器以响应该域名，并考虑添加SSL证书以启用安全的HTTPS连接。

8. 监控和维护：

  • 一旦部署完成，监控应用程序并根据需要进行维护。
  • 使用各种工具监测性能、错误和日志。

9. 更新和扩展：

  • 定期更新依赖项，保持项目的安全性和稳定性。
  • 根据需求扩展项目，添加新功能或改进现有功能。
相关推荐
工业互联网专业2 分钟前
毕业设计选题：基于springboot+vue+uniapp的驾校报名小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
J不A秃V头A31 分钟前
Vue3:编写一个插件(进阶)
前端·vue.js
司篂篂1 小时前
axios二次封装
前端·javascript·vue.js
姚*鸿的博客1 小时前
pinia在vue3中的使用
前端·javascript·vue.js
宇文仲竹2 小时前
edge 插件 iframe 读取
前端·edge
Kika写代码2 小时前
【基于轻量型架构的WEB开发】【章节作业】
前端·oracle·架构
天下无贼！3 小时前
2024年最新版Vue3学习笔记
前端·vue.js·笔记·学习·vue
Jiaberrr3 小时前
JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)
前端·javascript·tree·树形·过滤筛选
赵啸林3 小时前
npm发布插件超级简单版
前端·npm·node.js
罔闻_spider4 小时前
爬虫----webpack
前端·爬虫·webpack
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04苍穹外卖面试总结05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CCF-CSP认证考试 202406-3 文本分词 100分题解08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10软件工程从理论到实践客观题汇总(头歌第一章至第八章)