新建vite vue2 项目

1.1 创建项目
注意：这里vite的版本采用2.8.0的,最新的版本创建后续会出现问题

npm init [email protected]
后续，安装如图

创建好项目后依次运行以下命令

// 1.进入项目
cd vite-vue2
​
// 2.安装依赖
npm install
​
// 3.启动项目
npm run dev
访问效果如下

1.2 安装vite对vue2支持的插件
在vite-vue2安装：vite-plugin-vue2

// 注意：vite-plugin-vue2的版本为1.9.3
npm install [email protected] -D
在根目录创建vite.config.js文件，来注册插件

import { defineConfig } from 'vite' // 动态配置函数
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'
​
export default () =>
defineConfig({
plugins: [createVuePlugin()],
server: {
open: true, //自动打开浏览器
port: 1567 //端口号
},
resolve: {
// 别名
alias: [
{
find: '@',
replacement: '/src'
}
]
}
})
1.3 安装vue依赖
npm命令安装

npm install [email protected] [email protected] -S
1.4 修改项目文件结构
1.4.1 创建src目录
在项目根目录下创建src目录，然后修改main.js并将其移入src目录里

import Vue from 'vue'
import App from './App.vue'
​
new Vue({
render: h => h(App)
}).$mount('#app')
1.4.2 修改index.html
修改项目启动的入口文件

// index.html
<script type="module" src="/src/main.js"></script>
1.4.3 src目录下创建App.vue文件
代码如下：

<template>
<div>Hello Vite Vue2</div>
</template>
1.5 运行一下项目
再次运行下项目检验一下之前配置有无问题

npm run dev

2、vue-router
2.1 安装
npm install [email protected] -S
2.2 新建router目录
2.2.1 创建路由表
在src目录下创建router目录，并在router目录下创建index.js文件和module目录，在module目录下创建home.js和index.js。这里采用分模块来存放路由表

// /src/router下index.js
import { module } from './module/index'
import VueRouter from 'vue-router'
import Vue from 'vue'

// 使用VueRouter
Vue.use(VueRouter)

const routes = [
...module
]

const router = new VueRouter({
mode: 'history',
base: '/',
routes
})

export default router
// /src/router/module/home.js
export const home = [
{
path: '/home',
meta: { title: '首页' },
component: () => import('@/views/home/Index.vue')
}
]
// /src/router/module/index.js
import { home } from './home'

export const module = [...home]
2.2.2 创建路由指向的页面组件
在 src 目录下创建 views 目录，用来存放页面组件。

在 src/views/home 目录下创建1个页面：Index.vue

<template>
<div>
Home
</div>
</template>

<script>
export default {
name: "Index.vue"
}
</script>

<style scoped>

</style>
2.3 全局注册
2.3.1 在main.js里注册
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'//引入router路由

new Vue({
router,//注册router路由
render: h => h(App)
}).$mount('#app')
2.3.2 创建路由跳转标签
修改App.vue文件

<template>
<div id="app" class="app">
<router-view></router-view>
</div>
</template>
3、vuex(可选)
vuex作为大型单页面的状态管理器，使用起来十分方便，在有mapState、mapMutation等语法糖的引入变得更加的简单，但当项目比较小的时候可以不引入，可能会变得臃肿起来，这里为了学习就引入进来了~

3.1 安装
npm install [email protected] -S
3.2 新建vuex目录
在src目录下创建store目录，并在store目录下创建index.js

// index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) // 使用Vuex
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
actions: {},
modules: {}
})
3.3 全局注册
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store'

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
4、组件库
这里组件库我采用了element-ui，注意不是plus版本plus版本是Vue3的

引入方式参考官方文档

4.1 安装
npm i element-ui -S
4.2 完整引入
在 main.js 中写入以下内容：

import Vue from 'vue'

import ElementUI from 'element-ui';//引入ElementUI组件库
import 'element-ui/lib/theme-chalk/index.css';//引入ElementUI样式
import App from './App.vue'
import router from './router/index.js'//引入router路由

Vue.use(ElementUI);//注册ElementUI

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

4.3 按需引入参考文档操作
Element - The world's most popular Vue UI framework

5、axios
5.1 安装
npm install axios -S
5.2 封装axios
在src创建http目录，在其下面创建request.js和home.js

// request.js
import axios from 'axios'
import {Message, Loading} from 'element-ui';

//创建loading实列
let loadingInstance = undefined

// 创建axios实例
// 创建请求时可以用的配置选项

// 配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
const contentType = 'application/json;charset=UTF-8'

const apiUrl = 'http://ip:port/XXXAPI'

const instance = axios.create({
/**
* 是否携带cookie,注意若携带cookie后端必须配置
* 1.Access-Control-Allow-Origin为单一域名(具体到IP + port,用localhost貌似不行)
* 2.需要带上响应头Access-Control-Allow-Credentials
*/
// withCredentials: true,
timeout: 60000,
baseURL: apiUrl,
headers: {
'Content-Type': contentType
}
})
// axios的全局配置
instance.defaults.headers.post = {
'Content-Type': 'application/x-www-form-urlencoded'
}
instance.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest',
}
//instance.defaults.headers['Access-Control-Allow-Origin']='*'

// 添加请求拦截器(post只能接受字符串类型数据)
instance.interceptors.request.use(
config => {
if(config.loading === undefined || config.loading === true){
loadingInstance = Loading.service({
lock: true,
text: '接口请求中...',
background: 'rgb(0 120 212 / 28%)'
})
}
return config
},
error => {
if (loadingInstance) {
loadingInstance.close()
}
return Promise.reject(error)
}
)
const errorHandle = (status, other) => {
switch (status) {
case 400:
Message.error('信息校验失败')
break
case 401:
Message.error('认证失败')
break
case 403:
Message.error('token校验失败')
break
case 404:
Message.error('请求的资源不存在')
break
default:
Message.error(other)
break
}
}

// 添加响应拦截器
instance.interceptors.response.use(
// 响应包含以下信息data,status,statusText,headers,config
res => {
// 请求通用处理
if (loadingInstance) {
loadingInstance.close()
}
return res.data
},
err => {
if (loadingInstance) {
loadingInstance.close()
}
// Message.error(err)
const {response} = err
if (response) {
errorHandle(response.status, response.data)
return Promise.reject(response)
}
Message.error('请求失败')
return true
}
)

export default instance
import request from './request'
​
export default {
getList(model) {
return request({
url: '/theme/list',
method: 'post',
data: model
})
},
}
5.3 在页面中使用
<script>
import $http from '@/http/home.js'
export default {
mounted() {

},
methods: {
async onSubmit(){
const res = await $http.getList({});
console.log(res)
}
}
}
</script>
————————————————

原文链接：https://blog.csdn.net/weixin_37947181/article/details/130617988