一、环境准备

1. 安装 Node.js 和 npm

确保开发环境已安装 Node.js 和 npm，可通过以下命令检查版本：

node -v
npm -v

若未安装，可从 Node.js 官网 下载安装。

2. 安装 Vue CLI

Vue CLI 是一个用于快速创建 Vue 项目的命令行工具。在终端中运行以下命令来安装 Vue CLI：

npm install -g @vue/cli

验证安装是否成功：

vue --version

二、项目创建

1. 使用 Vue CLI 创建项目

在终端中运行以下命令创建新项目：

vue create my-project

在创建过程中，你可以：

• 选择默认的配置（快速开始）
• 或者根据项目需求进行自定义配置，如选择 Vue 版本（Vue 2）、安装所需的插件（如 Vuex、Vue Router、Axios 等）

2. 进入项目目录

cd my-project

3. 项目结构介绍

典型的 Vue 项目结构如下：

my-project/
  ├── node_modules/          # 项目依赖的第三方库
  ├── public/                # 静态资源文件
  │     ├── index.html       # 项目的入口 HTML 文件
  │     └── ...              # 其他静态资源（如图标、图片等）
  ├── src/                   # 源代码文件
  │     ├── assets/          # 项目资源文件（如图片、样式表等）
  │     ├── components/      # Vue 组件
  │     ├── views/           # 页面级组件
  │     ├── router/          # 路由配置
  │     ├── store/           # 状态管理
  │     ├── api/             # API 请求相关
  │     ├── utils/           # 工具函数与辅助功能
  │     ├── locales/         # 国际化语言文件
  │     ├── config/          # 项目配置
  │     ├── __tests__/       # 测试文件
  │     ├── App.vue          # 根组件
  │     └── main.js          # 入口文件
  ├── .babelrc               # Babel 配置文件
  ├── .gitignore             # Git 忽略文件
  ├── package.json           # 项目配置文件
  └── README.md              # 项目的说明文件

三、项目开发

1. 配置开发环境

• 安装 ESLint 和 Prettier：确保代码质量和一致性，安装代码风格规范工具。
• 配置 Vue DevTools：在浏览器中安装 Vue DevTools 插件，方便调试 Vue 应用。

2. 构建路由和状态管理

Vue Router

安装路由

• Vue2 要安装 vue-router3

  npm i vue-router@3
  

• Vue3 要安装 vue-router4

  npm i vue-router@4
  

如果报错

npm i vue-router@3 --legacy-peer-deps

配置 vue-router 环境并使用

在 main.js 中：

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;
// 导入路由器对象
import router from "./router";

const vm = new Vue({
    
    
  render: (h) => h(App),
  // 一旦使用了vue-router插件，那么new Vue的时候就可以直接传递一个配置项
  // 注册路由器对象，router
  router
}).$mount("#app");
console.log(vm);

在 src 目录下，新建一个 router 文件夹，新建 index.js，配置路由器对象，并暴露：

// 导入Vue
import Vue from "vue";
// 导入VueRouter
import VueRouter from "vue-router";
// 注册VueRouter
Vue.use(VueRouter);

// 导入路由组件
import Home from "@/views/home.vue";
import News from "@/views/news.vue";
import Car from "@/views/car.vue";
import My from "@/views/my.vue";

const router = new VueRouter({
    
    
  // routes 配置路由规则，配置一组组路由关系,数组
  // 每一组路由关系都是一个对象：
  // key：路径==>path
  // value：组件==>component
  routes: [
    {
    
    
      path: "/home", //注意要以/开头
      component: Home,
    },
    {
    
    
      path: "/news",
      component: News,
    },
    {
    
    
      path: "/car",
      component: Car,
    },
    {
    
    
      path: "/mine",
      // 路径要以/开头,路径名与文件名可以不一样
      // 这里的路径名是mine，但是文件名是my.vue
      // 路径是用来跳转URL
      component: My,
    },
  ],
});

export default router;

使用路由关系

在 MyFooter.vue 中：

<template>
  <div>
    <!-- 第二步：routerlink的to属性，配置好路由关系 -->
    <!-- to 配置路由路径 ，点击时会跳到对应路径的路由组件-->
    <router-link :to="nav.path" v-for="nav in navList" :key="nav.name">{
   
   {
      nav.name
    }}</router-link>
    <!-- <a href="#" >{
   
   { nav }}</a> -->
  </div>
</template>

<script>
export default {
  name: "MyFooter",
  data() {
    return {
      navList: [
        {
          name: "首页",
          path: "/home",
        },
        {
          name: "新闻",
          path: "/news",
        },
        {
          name: "购物车",
          path: "/car",
        },
        {
          name: "我的",
          path: "/mine",
        },
      ],
    };
  },
};
</script>

<style></style>

路由组件显示

在 app.vue 中：

<template>
  <div class="app">
    <MyHeader class="myheader" title="首页" />
    <!-- <Home class="mycontent" /> -->
    <!-- 第三步：告诉路由器，路由组件显示的位置 -->
    <div class="mycontent">
      <!-- 告诉路由器，路由组件显示在这个位置 -->
      <router-view />
    </div>

    <Myfooter class="myfooter" />
  </div>
</template>

注意事项：

1. 路由组件一般会和普通组件分开存放，路由组件放到 pages 或 views 目录，普通组件放到 components 目录下。
2. 路由组件在进行切换的时候，切掉的组件会被销毁，可用 destroyed 生命周期钩子证实
3. 路由组件的两个属性：$route 和 $router
   • $route：属于自己的路由对象。
   • $router：多组件共享的路由器对象。

Vuex

安装 Vuex

npm install vuex

在 Vue 原型上配置 $axios

在 main.js 文件中引入 axios：

// 导入axios
import axios from "axios";
// 将axios放到Vue原型上，这样vm，vc身上就都有axios了
Vue.prototype.$axios = axios;

在组件中使用

<template>
  <div>
    <button @click="getDate">点击发送请求</button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    async getDate() {
      let res = await this.$axios.get("http://localhost:3000/list");
      console.log(res.data);
    },
  },
};
</script>

3. 开发页面和组件

• 创建可复用的 Vue 组件：在 src/components/ 目录下创建和编辑 Vue 组件，设计页面布局、样式和交互。
• 创建页面级组件：在 src/views/ 目录下创建页面组件，并在 src/router/index.js 中配置相应的路由。

4. API 集成和数据交互

• 安装 Axios：用于与后端 API 进行数据交互。
• 创建 API 请求封装文件：在 src/api/ 目录下创建 API 请求封装文件，统一管理请求配置和错误处理。

四、项目测试

1. 开发服务器

在开发过程中，使用 Vue CLI 提供的开发服务器来运行项目：

npm run serve

这将启动一个本地开发服务器，通常在 http://localhost:8080 上可以访问项目。

2. 单元测试

• 安装 Jest 及相关依赖：

  npm install --save-dev jest vue-jest @vue/test-utils babel-jest
  

• 在 package.json 中添加 Jest 配置：

  "jest": {
        
        
    "moduleFileExtensions": ["js", "json", "vue"],
    "transform": {
        
        
      "^.+\\.vue$": "vue-jest",
      "^.+\\.js$": "babel-jest"
    }
  }
  

• 编写测试用例：在 __tests__ 目录下创建测试文件，例如：

  import {
        
         mount } from "@vue/test-utils";
  import Counter from "@/components/Counter.vue";
  
  describe("Counter.vue", () => {
        
        
    it("renders the initial count", () => {
        
        
      const wrapper = mount(Counter);
      expect(wrapper.text()).toContain("Count: 0");
    });
  
    it("increments count on button click", async () => {
        
        
      const wrapper = mount(Counter);
      await wrapper.find("button").trigger("click");
      expect(wrapper.text()).toContain("Count: 1");
    });
  });
  

• 运行测试：

  npx jest
  

3. 端到端测试

• 安装 Cypress：

  npm install --save-dev cypress
  

• 初始化配置：

  npx cypress open
  

• 编写 E2E 测试用例：在 cypress/integration 目录下创建测试文件，例如：

  describe("Home Page", () => {
        
        
    it("displays the welcome message and counter", () => {
        
        
      cy.visit("/");
      cy.contains("h1", "Welcome to Vue.js");
      cy.contains("p", "Count: 0");
  
      cy.get("button").click();
      cy.contains("p", "Count: 1");
    });
  });
  

• 运行测试：

  npx cypress open
  

五、项目构建与部署

1. 构建项目

在项目开发完成后，使用 Vue CLI 构建项目以生成生产环境的静态文件：

npm run build

这将在项目根目录下生成一个 dist 文件夹，其中包含构建后的静态文件。

2. 部署项目

将 dist 文件夹中的文件部署到服务器上，可以选择以下几种方式：

• 本地服务器：将文件复制到本地服务器的指定目录下。
• 云服务器：将文件上传到云服务器（如 AWS、阿里云等）的指定目录下。
• 静态托管服务：使用静态托管服务（如 GitHub Pages、Netlify、Vercel 等）来托管和部署静态文件。

六、项目结束

在项目结束时，需要完成以下关键步骤：

1. 确保代码库的完整性和可维护性

• 进行代码审查，确保代码质量和一致性。
• 确保所有代码都已提交到版本控制系统（如 Git），并打上适当的标签。
• 确保关键逻辑和复杂部分有详细的注释。

2. 清理无用的资源和依赖

• 使用工具检查并删除未使用的依赖包。
• 删除未使用的静态资源文件。

3. 编译和打包项目

• 配置打包工具，确保项目能正确编译和打包。
• 运行打包命令，生成生产环境的静态文件。
• 检查打包结果，确保所有必要的文件都已生成，并且没有错误。

4. 更新和编写项目文档

• 编写 README 文件，详细描述项目的目的、功能、安装步骤、使用方法、部署流程等信息。
• 如果项目涉及后端接口，确保 API 文档的完整性和准确性。
• 更新 CHANGELOG，记录项目的主要变更和版本历史。

5. 部署到生产环境

• 选择合适的部署平台。
• 根据平台要求，配置部署设置。
• 将打包好的静态文件部署到生产环境，并进行必要的测试，确保运行正常。

6. 备份项目文件和数据

• 将代码库备份到多个版本控制平台。
• 如果项目涉及数据库操作，确保数据库的备份和恢复策略到位。
• 备份项目中的重要配置文件。

以上就是一个完整的 Vue 项目从创建到结束的操作流程。在实际开发中，可以根据项目的需求和团队的协作方式进行调整和优化。