Vue3开发常规流程

概述

记录Vue3开发Web常规流程。

创建项目

# 首先，手动创建一个目录，如article_backend
# 然后，用vscode打开该目录
# 然后，在控制台创建vue3目录

npm init vue@latest

# 创建项目过程中，手动输入项目名称，然后一路选No即可
# 然后，按照提示执行一下命令：

cd article_backend
npm install
npm run dev

清理项目默认初始化内容

# 将assets目录下的文件全部删除
# 将components目录下的文件全部删除
# 将App.vue中的script, template, style标签中的内容清空
# 将main.js中导入main.css的语句删除
# 修改index.html中的标题

安装vue3开发常规库

# 组件库
npm install element-plus --save

# 网络库
npm install axios

# sass
npm install sass -D

# 路由
npm install vue-router

手动创建vue3开发常规目录

src/api -- 网络访问api统一封装在这里
src/assets -- 静态资源，如图片、全局css样式、全局js等
src/components -- 非路由对应的页面(.vue文件)
src/pages -- 路由对应的页面(.vue文件)
src/router -- 路由配置
src/utils -- 工具文件，如时间处理函数、网络访问返回值统一处理函数等

常规代码

main.ts

引入路由、组件库等。

import { createApp } from 'vue'
import App from './App.vue'

// 引入路由组件
import router from './router'

// 引入UI组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 创建全局唯一变量
// 声明使用路由和UI组件，并挂载根组件
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

api

网络访问接口文件：index.js

备注：若功能复杂，可将index.js拆分成各功能对应的js文件，如article.js，user.js等。

import request from '@/utils/request.js'

export function articleGetAllService() {
  return request.get('/article/getAll')
}

export function articleSearchService(conditions) {
  return request.get('/article/search', { params: conditions })
}

components

pages

router

路由配置文件：index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/pages/Home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    }
  ]
})
export default router

utils

网络访问返回值统一处理：request.js

import axios from 'axios'

//配置后台服务地址
const baseURL = 'http://localhost:8080'

//创建网络访问实例
const instance = axios.create({ baseURL })

//添加响应拦截器
instance.interceptors.response.use(
  (result) => {
    return result.data
  },
  (err) => {
    return Promise.reject(err)
  }
)

// 导出实例
export default instance

项目附件：点此下载