vue3基础知识+基础框架搭建

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的配置好的文件夹就行了