一、使用脚手架搭件基础Vue框架
1、安装Node.js环境，打开终端命令界面，确保Node.js和npm已经安装。你可以在终端中运行以下命令来检查它们的版本：

node -v
npm -v

2、安装Vue CLI：

npm install -g @vue/cli

3、在终端进入你想创建的项目目录，用以下命令创建Vue项目：

vue create my-project

4、创建完成后进入项目目录，并运行:

cd my-project
npm run serve

现在，你可以在浏览器中访问http://localhost:8080来预览你的Vue应用程序。

二、引入项目常用依赖
1、Element UI
因为需要做一个列表，所以需要引入Element UI来快速搭建
(1)输入以下命令安装

npm install element-ui

（2）安装完成后，在你的Vue项目的入口文件（通常是main.js）中导入Element UI的样式和组件。在文件的顶部添加如下代码：

import Vue from 'vue';
import ElementUI from 'element-ui'; // 引入element ui 组件
import 'element-ui/lib/theme-chalk/index.css'; // 引入element ui 样式

Vue.use(ElementUI);

接下来你就可以随意创建一个Vue文件，按照element ui的官网给的代码粘贴就可以了。

2、Vue-Router
因为项目不可能是单页面，多个页面会根据不同的URL实现跳转
比如我在components目录下写了两个页面：

HomePage.vue

<template>
  <div>
    <h1>Home Page</h1>
    <!-- 页面内容 -->
  </div>
</template>

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

<style>
/* 组件样式 */
</style>

AboutPage.vue

<template>
  <div>
    <h1>About Page</h1>
    <!-- 页面内容 -->
  </div>
</template>

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

<style>
/* 组件样式 */
</style>

要实现这两个页面的跳转，Vue-Router可以很好的解决
使用方法：
(1)下载依赖

npm install vue-router

(2)新建一个目录为router.js的文件

// 引入Vue和Vue Router
import Vue from 'vue';
import VueRouter from 'vue-router';

// 引入页面组件
import HomePage from './components/HomePage.vue';
import AboutPage from './components/AboutPage.vue';

// 使用Vue Router插件
Vue.use(VueRouter);

// 创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/', component: HomePage },
    { path: '/about', component: AboutPage },
    { path: '/home', component:HomePage},
  ],
});

// 导出路由实例
export default router;

(3)在main.js文件中引入路由实例

import Vue from 'vue'
import ElementUI from 'element-ui'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css';
import router from './router';
Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

(4)可以看到，mian.js中新建了一个Vue实例，并且渲染了id为app的内容，使用脚手架搭件的项目是带有哥App.vue的文件的，我们将默认的里面的内容改为根据router跳转

<template>
  <div id="app">
     <router-view/>
  </div>
</template>

<script>


export default {
  name: 'App',
  
}
</script>
<style lang="scss" scoped></style>

然后在浏览器输入localhost:8080/abount,就会返回AboutPage.vue组件的内容，输入ocalhost:8080/home,就会返回HomePage.vue组件的内容

注：如果你搭建的是Vue2，可能无法实现跳转，因为npm install vue-router默认会直接下载最新的版本4.1.6，这个适合Vue3的版本，与Vue2不兼容，需要运行如下命令并重启：

npm uninstall vue-router
npm install --save vue-router@3

查看依赖的版本见项目目录下的package.json文件，一般有如下片段

"dependencies": {
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.13",
    "moment": "^2.29.4",
    "vue": "^2.6.14",
    "vue-router": "^3.6.5"
  },

3、Axios
做完上面这些，编写静态的页面已经没有问题了，接下来实现前后端对接，前端需要向服务器发送http请求。

在 Vue 中封装 Ajax 请求可以使用 Axios 库，Axios 是一个流行的基于 Promise 的 HTTP 客户端，可以用于发起异步请求。
(1)首先安装

npm install axios

(2)在项目中新建一个ajax.js文件，用于封装Ajax请求

import axios from 'axios';

// 创建一个 Axios 实例
const service = axios.create({
  baseURL: 'http://api.example.com', // 设置接口的基础URL
  timeout: 5000, // 设置请求超时时间
});

// 请求拦截器，在发送请求之前做一些处理
service.interceptors.request.use((config) => {
  // 在这里可以添加请求头信息等操作
  return config;
}, (error) => {
  return Promise.reject(error);
});

// 响应拦截器，处理返回的数据
service.interceptors.response.use((response) => {
  // 在这里可以根据响应数据做一些统一处理
  return response.data;
}, (error) => {
  return Promise.reject(error);
});
Vue.prototype.$http = service

export default service;

(3)接下来，可以在你页面对应的目录下添加一个request.js文件，用于编写当前页面请求服务器的接口

import ajax from '@/ajax.js'
const suppliersList = function (params) {
    return ajax.post('/api/Suppliers/GetSuppliersList', params)
}
export { suppliersList }

(4)再去你编写的页面那里导入接口,比如上面的HomePage.vue，下面是我的一个例子

<script>
import { suppliersList } from './request.js'
export default {
  // 组件逻辑
  data() {
        return {
            loading: false,
            pageHeight: 0,
            pageIndex: 1,
            pageSize: 15,
            sortField: 'SortNum',
            sortOrder: 'ASC',
            total: 0,
            tableData: [],
            keyword: ''
        }
    },
   methods: {   
 	      loadData() {
            let param = {
                PageIndex: this.pageIndex,
                PageSize: this.pageSize,
                Keyword: this.keyword
            }     
            suppliersList(param).then(res => {
                if (res.data.success) {
                    this.tableData = res.data.data.rows
                    this.total = res.data.data.total;
                }
                console.log(this.tableData,"???")
            }).catch(() => {
                this.$message({
                    type: 'error',
                    message: '查询错误',
                })
            })
        }
    },
    // 钩子函数，初始化页面
    mounted() {
        this.loadData()
    }

}
</script>

如此，前后端对接完成

4、moment
这个通常是用来格式化时间的，有时候，后端传过来的时间不易理解，需要前端过滤一下，比如变成这种形式：YYYY-MM-DD HH:mm:ss
我们可以写个全局过滤，方法：
(1)下载依赖

npm install moment

(2)在根目录创建一个filters.js,内容如下：

import Vue from 'vue';

Vue.filter('formatDate', function(value, format) {
  if (!value) return '';

  return Vue.prototype.$moment(value).format(format);
});

(3)在main.js文件中引入filters.js

import Vue from 'vue';
import moment from 'moment';
import 'moment/locale/zh-cn';
import './filters'; // 引入filters.js文件

Vue.prototype.$moment = moment

(4)在需要使用全局过滤器的Vue组件中，可以直接在模板中应用该过滤器。

<template>
  <div>
    <p>{{ myDate | formatDate('YYYY-MM-DD HH:mm:ss') }}</p>
  </div>
</template>

完成

常用的依赖已说完，另外说一下在写代码的过程中，难免需要调试使用debugger，但是可能会直接报错如下：

Unexpected 'debugger' statement.eslintn

这个错误是由ESLint代码检查工具抛出的，它指出代码中存在一个 debugger 语句，这是一个调试工具的断点。然而，通常在生产环境中使用 debugger 语句是不被允许的，因此ESLint会将其视为一个错误。
你可以在package.json文件中添加配置：

{
  // 其他配置项
  "eslintConfig": {
    "rules": {
      "no-debugger": "off"
    }
  }
}

好了，文章结束