基于Vite的Vue3前端项目搭建

工具

• Vue3

  前端开发框架，组件化开发

• ElementPlus

  提供丰富的组件

• Axios

  用于发送http请求

• VueRouter

  Vue官方的路由插件，管理url到组件的路由

• Pinia

  状态管理库，跨组件共享数据

• Mockjs

  拦截Ajax请求模拟数据返回

环境准备

1. 安装nodejs
2. 通过脚手架创建项目,创建过程中会提供配置选项

npm create vue@latest

接下来的操作在新建的项目目录下完成

3. 在package.json中引入依赖,也可直接项目目录下 npm install 包名

"dependencies": {
  "core-js": "^3.8.3",
  "vue": "^3.2.13",
  "element-plus": "^2.7.0",//ElementPlus
  "axios": "^0.24.0",//Axios
  "vue-router": "^4.3.1",//VueRouter
  "pinia": "^2.1.7",//Pinia
  "mockjs": "^1.1.0",//Mockjs
},

4. 在项目目录下运行以下指令

npm install

5. 编写 src/main.js

import {createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'
//设置请求根URL
axios.defaults.baseURL='http://localhost:8088'
//实例化组建件
const app=createApp(App)
//全局使用ElementPlus
app.use(ElementPlus)
//禁止生成提示
app.productionTip=false
//将axios绑定至全局变量$http
app.config.globalProperties.$http=axios
//将app挂载到public/index.html中id="app"的元素上
app.mount('#app')

其他

1. 运行项目

npm run dev

2. 构建项目

npm run build

npm run 的含义详见[当在一个Vite构建的Vue项目目录下运行npm run dev后，都发生了什么](当在一个 Vite 构建的 Vue 项目目录下运行 npm run dev 后，都发生了什么)