1.基础知识
1.1 js 的导入导出
#导出
export 内容
export {内容1,内容2}
export default {}
#导入
<script type="moudle">
import {...} from '...'
</script>
1.2 vue常用指令
指令 | 作用 |
---|---|
v-for | 列表渲染,遍历容器的元素或者对象的属性 |
v-bind | 为html标签绑定属性值,设置href、css样式等 |
v-if / v-else-if / v-else | 条件性的渲染某元素 |
v-show | 根据条件展示某元素,切换的是display属性的值 |
v-model | 在表单元素上创建双向数据绑定 |
v-on | 为html标签绑定事件 |
1.3 vue生命周期
状态 | 阶段周期 |
---|---|
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 载入前 |
mounted | 挂载完成 |
beforeUpdate | 数据更新前 |
updated | 数据更新后 |
beforeUnmount | 组件销毁前 |
unmounted | 组件销毁后 |
1.4 Axios请求接口
- method:请求方式
- url:请求地址
- data:请求体
1.5 vue文件结构
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style>
/* 全局样式 */
</style>
- template:相当于html
- script:相当于js
- style:相当于css
1.6 vue API风格
1.6.1 选项式API
选项式 API 是 Vue 2 中引入的编程风格,通过配置对象的不同选项(如 data、methods、computed 等)来组织组件的逻辑。
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
};
},
methods: {
updateMessage() {
this.message = 'Message Updated!';
}
}
};
</script>
1.6.2 组合式API
组合式 API 是在 Vue 3 中引入的新编程风格,通过 setup
函数和 Composition Functions 将逻辑组合在一起,使得逻辑复用更加灵活。
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('Hello, Vue!');
const updateMessage = () => {
message.value = 'Message Updated!';
};
</script>
- setup下的属性都是响应式属性,访问其内容都要.value
2.vue基础框架搭建
2.1 环境搭建
node.js(Node.js — Download Node.js®)
npm 全局配置:
npm config set prefix "nodejs安装目录"
更换npm源为淘宝的源(2024)
npm config set registry http://registry.npmmirror.com
检查是否成功
npm config get registry
2.2 vue项目创建
node18以上才支持
npm init vue@latest
下载过程中的一些提示(除了第一次安装create-vue选y,还有项目名字,其他的默认就好)
创建好了之后将项目拖进vscode,然后在项目所在目录运行 npm i
vscode中打开终端窗口的快捷键是 ctrl + `(tab上方那个)
2.3 目录调整
只供参考,根据个人习惯来(文件都在src目录下)
- 删除components下生成的文件
- 新建目录api、utils、views
- 删除App.vue中生成的内容
2.3 安装依赖
安装axios依赖
npm install axios
安装Sass依赖(根据个人习惯安装)
npm install sass -D
- 代码重用:使用变量、混合和继承来减少代码重复,简化样式管理。
- 模块化:将样式拆分为多个文件,提高代码的可维护性。
- 动态样式:通过函数和控制指令(如
@if
、@for
)生成复杂的动态样式。
2.4 vue 项目结构
- index.html 首页的内容是由 App.vue 根组件决定的
2.5 启动vue项目
npm run dev
2.6 接口封装
创建请求拦截器(src/util/request.js)
//导入axios npm install axios
import axios from 'axios';
import { ElMessage } from 'element-plus';
//定义一个变量,记录公共的前缀 , baseURL
const baseURL = '/api';
const instance = axios.create({baseURL})
//添加响应拦截器
instance.interceptors.response.use(
result=>{
if(result.data.code === 0){
return result.data;
}
ElMessage.error(result.data.errorMessage?result.data.errorMessage:"服务异常")
return Promise.reject(result.data)
},
err=>{
ElMessage.error('服务异常');
return Promise.reject(err);//异步的状态转化成失败的状态
}
)
export default instance;
创建某个页面的接口文档(src/api/xxx.js)
import request from '@/utils/request.js';
//注册
export const registerService = (registerData) => {
var params = new URLSearchParams()
for (let key in registerData) {
params.append(key, registerData[key])
}
return request.post('/user/register', params)
}
//登录
export const loginService = (loginData)=>{
var params = new URLSearchParams()
for(let key in loginData){
params.append(key,loginData[key])
}
return request.post('/user/login',params)
}
需要的文件中调用方法:
<script setup>
import {setxxx,getxxx} from '@/api/xxx.js';
import {ref} from 'vue';
const list = ref([]);
const getAllxxx=async function(){
let data = await getxxx();
list.value=data;
}
getAllxxx();
const confition = ref({
name:'',
age:''
})
const setAllxxx = async function(){
let data = await setxxx({...condition.value});
list.value = data;
}
</script>
2.7 接入ElementPlus
快速开始 | Element PlusA Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/guide/quickstart.html 目前vue3的web项目比较主流的组件库应该就是ElementPlus了
安装ElementPlus
npm install element-plus --save
main.js中引入(src/main.js,直接全部替换)
// main.js
import { createApp } from 'vue' //导入vue
import ElementPlus from 'element-plus' //导入element-plus
import 'element-plus/dist/index.css' //导入element-plus的样式
import App from './App.vue' //导入App.vue
const app = createApp(App) //创建应用实例
app.use(ElementPlus) //使用element-plus
app.mount('#app') //控制html元素
然后就可以直接在页面中使用了
2.8 解决跨域问题
修改vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
//配置代理
server: {
proxy: {
'/api': {
target: 'http://localhost:8080', // 后端服务器地址
changeOrigin: true, // 是否改变请求域名
rewrite: (path) => path.replace(/^\/api/, '')//将原有请求路径中的api替换为''
}
}
}
})
2.9 路由配置
2.9.1 安装vue-router
npm install vue-router@4
2.9.2 创建路由器
在src/router/index.js中创建路由器并导出
//导入vue-router
import { createRouter, createWebHistory } from 'vue-router'
//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'
//定义路由关系
const routes = [
{ path: '/login', component: LoginVue },
{ path: '/', component: LayoutVue }
]
//创建路由器
const router = createRouter({
history: createWebHistory(),
routes: routes
});
export default router
2.9.3 使用vue-router
在 src/main.js 中导入并应用 router
import router from '@/router'
app.use(router)
在 App.vue 中定义 router-view 标签
<template>
<router-view></router-view>
</template>
2.9.4 借助路由完成页面跳转
在要跳转到别的页面中的页面中导入路由
import { useRouter } from 'vue-router'
const router = useRouter();
在事件中跳转路径
router.push('/')
2.10 子路由配置
首先创建子页面
router/index.js 中导入子页面
import UserInfoVue from '@/views/user/UserInfo.vue'
配置子页面到对应主路由
{
path: '/',
component: LayoutVue,
//重定向
redirect: '/user/info',
//子路由
children: [
{ path: '/user/info', component: UserInfoVue },
]
}
在相应页面声明 router-view 标签
<el-main>
<div style="width: 1290px; height: 570px;border: 1px solid red;">
<router-view></router-view>
</div>
</el-main>
菜单绑定跳转路由
<el-menu-item index="/user/info">
<el-icon>
<Management />
</el-icon>
<span>用户信息</span>
</el-menu-item>
2.11 配置Pinia状态管理库
2.11.1 安装Pinia
npm install pinia
2.11.2 使用Pinia
在main.js中,引入pinia,创建pinia实例,并调用vue应用实例的use方法使用pinia
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)
2.11.3 定义store
在src/stores/token.js 中定义store
import { defineStore } from "pinia";
import {ref} from 'vue';
/*
defineStore参数描述:
第一个参数:给状态起名,具有唯一性
第二个参数:函数,可以把定义该状态中拥有的内容
defineStore返回值描述:
返回的是一个函数,将来可以调用该函数,得到第二个参数中返回的内容
*/
export const useTokenStore = defineStore('token',()=>{
//1.定义描述token
const token = ref('')
//2.定义修改token的方法
const setToken = (newToken)=>{
token.value = newToken
}
//3.定义移除token的方法
const removeToken = ()=>{
token.value=''
}
return {
token,setToken,removeToken
}
})
在需要的页面中使用store,比如登陆成功后将token保存下来
//导入token状态
import { useTokenStore } from '@/stores/token.js'
//调用useTokenStore得到状态
const tokenStore = useTokenStore();
//用于登录的事件函数
const login = async () => {
let result = await loginService(registerData.value)
//保存token
tokenStore.setToken(result.data)
ElMessage.success('登录成功!')
router.push('/')
}
需要取出的地方,导入store直接取就行
//导入@/stores/token.js
import { useTokenStore } from '../stores/token'
//获取token状态
const tokenStore = useTokenStore()
//在 pinia 中定义的响应式数据都不需要 .value
return request.get('/xxx', { headers: { 'Authorization': tokenStore.token } })
2.12 配置Pinia持久化插件-persist
Pinia是内存存储的,当刷新浏览器的时候会丢失token
2.12.1 安装persist
npm install pinia-persistedstate-plugin
2.12.2 pinia中使用persist插件
在main.js中
import { createPinia } from 'pinia'
//导入持久化插件
import {createPersistedState} from'pinia-persistedstate-plugin'
const pinia = createPinia()
const persist = createPersistedState()
//pinia使用持久化插件
pinia.use(persist)
app.use(pinia)
在token.js中持久化参数
,
//参数持久化
{
persist:true
}
)
2.13 配置 Axios 请求拦截器
修改request.js,这样其他接口请求时就不需要再携带token了
//定制请求的实例
//导入axios npm install axios
import axios from 'axios';
import { ElMessage } from 'element-plus';
import router from '@/router';
//定义一个变量,记录公共的前缀 , baseURL
const baseURL = '/api';
const instance = axios.create({baseURL})
//添加响应拦截器
instance.interceptors.response.use(
result=>{
if(result.data.code === 0){
return result.data;
}
ElMessage.error(result.data.errorMessage?result.data.errorMessage:"服务异常")
return Promise.reject(result.data)
},
err=>{
if(err.response.status === 401){
ElMessage.error("请先登录!")
router.push('/login')
}
ElMessage.error("服务异常");
return Promise.reject(err);//异步的状态转化成失败的状态
}
)
//导入token状态
import { useTokenStore } from '@/stores/token.js';
//添加请求拦截器
instance.interceptors.request.use(
(config)=>{
//在发送请求之前做什么
let tokenStore = useTokenStore()
//如果token中有值,再携带
if(tokenStore.token){
config.headers.Authorization=tokenStore.token
}
return config
},
(err)=>{
//如果请求错误做什么
Promise.reject(err)
}
)
export default instance;
3.vscode常用快捷键
格式化代码:Shift+Alt+F
打开终端:ctrl+`
4.打包部署
npm run build
将dist中的文件放到nginx的配置好的文件夹就行了