目录
1、创建项目
选择一个文件夹，用终端打开，输入：
npm init vite@latest如下图所示，输入项目的文件名（这里是vuePro）--》选择vue--》再次选择vue
2、根据提示打开项目
依次输入以上三行命令，启动项目，画面是这个样子的⬇️
3、安装scss
⚠️注意是 sass 不是 scss ⬇️
（使用vite搭建项目只安装sass即可，不需要安装node-sass,sass-loader）
npm i sass若是后面用scss时报错了重启一下项目
4、引入element-plus
参考官网：安装 | Element Plus
4.1 安装
npm install element-plus --save4.2 完整引入
main.js：
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入el-icon（注意 icon 是需要额外引入的）
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
app.use(ElementPlus)
// el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}4.3 按需引入
安装：
npm install -D unplugin-vue-components unplugin-auto-importmain.js：（按需引入的方式引入 icon 就可以）
// 引入el-icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}按需引入需要在 vite.config.js 做一些配置，参考 5 ⬇️
5、vite.config.js文件
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // node中的内置模块
// elememt-plus按需引入才需要加上下面三行！！！！！！
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
const pathResolve = (dir) => {
return resolve(__dirname, ".", dir)
}
const alias = {
'@': pathResolve("src") // 别名，注意这个别漏了！！
}
alias['vue-i18n'] = 'vue-i18n/dist/vue-i18n.cjs.js'
// https://vitejs.dev/config/
export default ({ command }) => {
const prodMock = true;
return {
base: './',
resolve: {
alias
},
server: {
port: 3004, // 前端端口
host: '0.0.0.0',
open: true,
// proxy: { // 前端跨域 （需要跨域开启这一段）
// '/api': {
// target: 'http://192.168.xxx.x:8080', // 内网ip地址
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, '')
// },
// },
},
build: {
rollupOptions: {
output: {
manualChunks: {
}
}
}
},
plugins: [
vue(),
// AutoImport和Components是elememt-plus按需引入才需要加的！！！！！！！
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
]
};
}
6、App.vue
⚠️注意：不要漏掉<router-view></router-view>，每次都没加导致以为路由有问题！！！！
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script setup>
</script>
<style scoped>
</style>
7、新建vue页面
便于后续路由跳转测试
main--》index.vue：⬇️所有vue页面都套用这个基础模版（修改下name的值就可以）
<template>
<div>
我是首页
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'frontPage',
components: {
},
setup() {
}
})
</script>
<style lang="scss" scoped>
</style>8、配置路由Vue Router
8.1 安装
在此项目目录下打开终端，输入：
npm install vue-router@4 --save8.2 新建router相关文件
src下新建router文件夹，router下再新建index.js和routes.js
index.js：
import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes.js'
const router = createRouter({
history: createWebHashHistory(),// 开启历史模式
routes
})
export default routerroutes.js：
const routes = [
{
name:'index', // 首页
path: '/',
component: () => import('@/views/main/index.vue'),
},
{
name:'page2',
path: '/page2',
component: () => import('@/views/page2/index.vue'),
}
]
export default routes8.3 main.js引入
import router from './router'
app.use(router)现在的main.js长这样：
9、vuex
9.1 安装
在此项目目录下打开终端，输入：
npm i vuex9.2 新建vuex相关文件
index.js：
import { createStore, createLogger } from 'vuex'
import user from './user'
const store = createStore({
modules: {
user
}
})
export default storeuser.js：
const state = {}
const actions = {}
const mutations = {}
const getters = {}
export default { state, actions, mutations, getters }9.3 main.js引入
import store from './store'
app.use(store)10、axios
10.1 安装
npm i axios --save10.2 新建相关文件
根目录下新建 .env.development 和 .env.production
.env.development
（本地开发环境配置）
ENV = 'development'
# VITE_BASE_URL = http://localhost:3004/api
// 需要跨域的话写上面👆这个（前端地址），并且需要在vite.config.js加上 proxy 配置
VITE_BASE_URL = http://192.168.125.2:8080.env.production
（线上环境配置）
ENV = 'production'
VITE_BASE_URL = '线上地址'其他文件：
request.js
import axios from 'axios'
import store from '@/store'
import { ElMessage } from 'element-plus'
const baseURL = import.meta.env.VITE_BASE_URL
const service = axios.create({
baseURL: baseURL,
timeout: 5000
})
// 请求前的统一处理
service.interceptors.request.use(
(config) => {
// JWT鉴权处理
if (store.getters['user/token']) {
config.headers['token'] = store.state.user.token
config.headers['Authorization'] = ''
}
return config
},
(error) => {
console.log(error) // for debug
return Promise.reject(error)
}
)
service.interceptors.response.use(
(response) => {
const res = response.data
if (res.code === 200) {
return res
} else {
showError(res)
return Promise.reject(res)
}
},
(error)=> {
console.log(error) // for debug
const badMessage = error.message || error
const code = parseInt(badMessage.toString().replace('Error: Request failed with status code ', ''))
showError({ code, message: badMessage })
return Promise.reject(error)
}
)
function showError(error) {
if (error.code === 403) {
// to re-login
store.dispatch('user/loginOut')
} else {
ElMessage({
message: error.msg || error.message || '服务异常',
type: 'error',
duration: 3 * 1000
})
}
}
export default serviceuser.js
import request from '@/utils/system/request'
export function getApi(data) {
return request({
url: '',
method: 'post',
baseURL: '',
data
})
}页面请求：
<script>
import { defineComponent } from 'vue'
import { getApi } from '@/api/user.js'
export default defineComponent({
const getData = () => {
getApi()
.then(res => {
console.log(res)
})
.catch(error => {
console.log(error)
})
.finally(() => {
})
}
})
getData()
</script>11、综合 main.js
import { createApp } from 'vue'
import App from './App.vue'
// element-plus 完整引入才要下面这两行
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'
import router from './router'
import store from './store'
// 引入el-icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
// el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
// element-plus 完整引入才要下面这一行
// app.use(ElementPlus)
app.use(router)
app.use(store)
app.mount('#app')下面的内容因为之前写过了，就直接放链接吧
12、配置i18实现语言切换
vue3国际化（i18n简繁体及英文切换）_RainHg的博客-CSDN博客
13、配置scss全局变量
vue3+vite引入scss全局变量，设置主题颜色_RainHg的博客-CSDN博客_vite vue3 使用scss
14、自适应及自动添加前缀配置
vue3+vite使用postcss-pxtorem、autoprefixer实现自适应和自动添加前缀_RainHg的博客-CSDN博客_postcss-pxtorem vue3