vue3运行+UI+router安装

前置配置

• 使用vite安装，node需要安装16以上的版本

vue3通过vite安装

MyProject 是你的项目名字，可以手动更改

npm init vite@latest MyProject --template vue

配置选择

• 第一个确定项目名称

• 第二个确定使用的框架

• 第三个选择语法 默认的是js，下面有个ts的

切换到你创建的目录下面

cd MyProject

安装对应的依赖

npm install

运行项目

npm run dev

之后就运行了，结果如下图，默认的端口是3000，我开了其他的所以换了端口

这样一个通过vite的项目就构建好了，下面的是默认界面

elementUI组件安装

为了找一个好看的ui，我们得导入ui的组件

vue3的安装命令如下，2的话是element，3加了个plus

npm install element-plus --save

main.js配置

之后在src的main.js里面进行UI组件的全局导入 -- 复制粘贴即可

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

elementUI 网址+案例

同款日历链接，Calendar 日历 | Element Plus

• 不过颜色可能不是这样的，我这个属于浏览器的颜色了，这个服务器在国外，所以可能要点网速或者耐心的等待了

• 点进去之后直接cv 复制代码就可以都带走了，vite热部署的，所以只要ctrl + s保存就能用

router路由使用

路由安装

路由：作为实现页面跳转的神器，也是必不可少的啊

安装命令

npm install vue-router@next --save

main.js配置

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import router from './router'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus).use(router)
app.mount('#app')

router使用

• 先创建一个router的目录

• 在创建一个index.js的文件

• 将路径跳转的内容写在里面

• 这里的组件是你自己写的，之后根据路径就可以跳转了

import { createRouter, createWebHashHistory } from "vue-router";

//写你需要的路由
const routes = [
    {
        //路径选择
        path: "/",
        //路径名称
        name: "index",
        //组件导入
        component: () => import("../view/Index.vue"),
    },
    {
        path: "/login",
        name: "Login",
        meta: {
            title: '登录'
        },
        component: () => import( /* webpackChunkName: "login" */ "../view/Login.vue")
    }
];

//我也不懂，不动就好了，我c的
const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router;

项目的话 这个app的还是很好看的https://github.com/newbee-ltd/newbee-mall-vue3-app.git

到此为止，应该就可以开始漫长的学习之旅了

子组件传数据给父组件

• 子组件返回响应式数据

• 父组件创建响应式变量进行绑定

const sonRef = ref(null);

• 父组件创建变量获取

  const son = sonRef.value.（return的值）
  //在组件位置进行ref绑定
  <MyScore ref="sonRef"> </MyScore>

改变端口的方法

在package.json改变

  "dev": "vite --port 3000",

路由跳转

• 导入组件

  import { useRouter } from "vue-router";

• 创建对象

  const router = useRouter();

• 输入路径

  router.push("/index");

如何获取路由上的信息

id的获取

//userouter获取
const router = useRouter();
//按照路径找到id值
const id = router.currentRoute.value.params.id

vuex使用

• 安装依赖

  npm install vuex 

• main.js中导入

  import store from './store'
  
  app.use(ElementPlus).use(router).use(store)

• 创建store目录和index.js文件

  写入数据进行存储

  //index.js文件
  //导入vuex
  import {createStore} from 'vuex'

  export default createStore({
      //仓库存贮数据的地方
      state: {
          collapse: false
      },
      //修改state唯一的手段
      mutations: {  
       // 侧边栏折叠
          handleCollapse(state, data) {
              state.collapse = data;
          }
      },
      //处理自己的逻辑，可以书写自己的业务逻辑，也可以处理异步
      actions: {},
      modules: {}
  })

• 组件中引用

• 导入vuex

  import { computed } from "vue";
  import { useStore } from "vuex";

  • 创建变量 承接数据

    const store = useStore();
    const collapse = computed(() => store.state.collapse);

    • 把数据放在需要的位置

安装axios

• 安装命令

npm install axios

• axios中文文档|axios中文网 | axios

前后端如何进行连接

• 首先要有发送axios的文件 request.js

  获取axios 对指定端口发送axios请求，也就是后端服务器接口

  import axios from 'axios';
  
  const service = axios.create({
      //开发环境
      NODE_ENV: '"development"',
      //后端接口
      baseURL: 'http://localhost:8201',
      //响应超时
      timeout: 5000
  });

  • 配置个拦截器响应器，axios链接里有详细介绍

//请求拦截器
service.interceptors.request.use(
    //config配置对象
    config => {
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);
//响应拦截器
service.interceptors.response.use(
    response => {
        //响应成功的回调函数
        if (response.status === 200) {
            return response.data;
        } else {
            //失败的回调函数
            Promise.reject();
        }
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

• 最重要的一步

  记得给外部用

  export default service;

• 配置连接后端的文件

  • 导入axios的文件，路径是你自己的

    import request from '../../utils/request';

  • 配置给后端的接口

    export default {
        //根据id查询 不是最新的方法
        getById(id){
            return request({
                //地址 id动态传参
                url: `/后端地址/${id}`,
                //请求方法
                method: 'GET',
                //data：obj 如果后端传过来json数据就可以用data
            })
        },
    }

• 后端写好接口，加注解@@CrossOrigin，防止跨域

  @CrossOrigin

• 项目导入接口文件

  • name: 你使用时候的名字，名字随意

    后面是你文件的地址

    import name from "../api/index";

• 项目中使用

  • 定义方法：getInfoById （应该也不是最新的写法）

  • name：你自己定义的

  • getById(): 你定义文件中发送后端请求的地址的方法

  • params：你定义存储数据的变量

  • res.data：获取到后端的数据

      //根据id查询信息
      function getInfoById(id) {
        name.getById(id).then((res) => {
          params = res.data
        });
      }