Vue项目从创建到开发以及模拟后端数据的主要步骤，精简实用

1、项目创建

1. 打开终端，以管理员身份运行
2. cd到需要创建项目的文件夹下
3. 执行代码： npm create vue\@latest
4. 输入项目名，其余全部选择否，即可创建项目
5. 运行提示的命令：npm install 与 npm run dev（这里如果有报错的话，可以在网上搜索）
6. 之后使用VSCode打开创建的文件夹即可

2、安装依赖

1. 第一步就是：npm -i安装依赖
2. 第二步：npm i vue-router 因为网站是多页面，所以安装vue-router
3. 第三步：npm i vuex vue的全局状态管理插件，还有一种更新的是pinia
4. 第四步：npm i axios 项目肯定是要发请求的
5. 第五步：npm i element-plus 组件不可能都是自己画，使用饿了么团队开发的UI库

3、删除不需要的代码

1. 把APP.vue文件中，只保留vue文件的基础框架，在templat标签中写入<router-view></router-view>
2. 将自动生成的views文件夹下的vue文件删除，写自己需要的内容

4、修改应用名称

1. 修改index.html文件中的title标签，填写自己应用的名称

5、配置路由

1. 在router文件夹中的index.js文件中，配置路由

import { createRouter, createWebHistory } from 'vue-router'
import home from '../views/home.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/test',
      name: 'test',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/test.vue')
    }
  ]
})

export default router

6、写页面

1. 当路由配置好之后，开始写具体页面，主要是画页面，也就是前端设计，也就是这时候就开始使用elementplus
2. 复制elementplus的代码以后，可以使用 “ Shift + Alt + F ” 的快捷键对代码进行格式化
3. 这里要注意在main.js中使用elementplus，比如：createApp(App).use(ElementPlus)
4. 按照自己的需求，修改复制过来的代码

7、配置baseURL

1. 在src文件夹中创建一个config文件夹，其中创建baseURL.js文件
2. 在baseURL.js中写入如下代码

export const baseURL_dev = "https://127.0.0.1"
export const baseURL_test = "https://127.0.0.1"

8、封装axios

1. 在src文件夹中创建utils文件夹，在其中创建request.js文件，在其中对axios进行封装
2. 在request.js文件中写入如下代码

import axios from "axios";
import { baseURL_dev } from "../config/baseURL.js"

//初始化一个axios对象
const instance = axios.create({
    baseURL: baseURL_dev,
    timeout: 10000,
  }); 


//get请求方法
export const $get = async (url, params) =>{
    let {data} = await instance.get(url, {params})
    return data
}

//post请求方法
export const $post = async (url, params) =>{
    let {data} = await instance.post(url, params)
    return data
} 

9、封装api，统一发请求

1. 在src文件夹下创建api文件夹，在其中新建admin.js文件
2. 在其中写入如下代码

import { $get, $post} from '../utils/request.js'

export const $Login = async (params)=>{
    let ret = await $post('admin/login', params)
    console.log(ret);
}

10、创建模拟数据

1. 安装node（已安装）
2. 使用命令行，安装json-server：npm i -g json-server
3. 一般情况下，在当前项目下创建一个data文件夹，在data文件夹中创建一个文件：data.json
4. 在data.json中编辑好模拟的数据
5. 然后在data.json所在的目录，打开命令行，数据命令启动服务。json-server --watch data.json -p 3008