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

发布于:2024-05-22 ⋅ 阅读:(42) ⋅ 点赞:(0)
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

网站公告

今日签到

点亮在社区的每一天
去签到