SSM+vue基础项目从零开始练习前端1

1、登陆码云，选择右上角的“+”按钮，选择新建仓库：

 仓库地址 https://gitee.com/shgm/ydl_wssm.git

 3、使用git命令克隆我们的仓库至本地：

我的仓库命令如下：

git clone https://gitee.com/shgm/ydl_wssm.git

 可以新增一个.gitignore文件

HELP.md
target/
!.mvn/wrapper/maven-wrapper.jar
!**/src/main/**
!**/src/test/**

### STS ###
.apt_generated
.classpath
.factorypath
.project
.settings
.springBeans
.sts4-cache

### IntelliJ IDEA ###
.idea
*.iws
*.iml
*.ipr

### NetBeans ###
/nbproject/private/
/nbbuild/
/dist/
/nbdist/
/.nb-gradle/
build/

### VS Code ###
.vscode/


mvnw
mvnw.cmd
.mvn/

*.log

创建vue工程 

vue create ydl-ui

选择vue3.0版，将项目直接建立在仓库的根目录中

 

cd ydi-ui
进入目录
npm run serve
启动 vue服务

 

http://localhost:8080/

本地访问

 配置vue-router

npm

https://next.router.vuejs.org/zh/index.html

#（1）安装依赖

npm install vue-router@4

创建router目录结构

创建router目录，并创建index.js文件

// 导入用来创建路由和确定路由模式的两个方法
import {
    createRouter,
    createWebHistory
} from 'vue-router'

/**
 * 定义路由信息
 * 
 */
const routes = []

// 创建路由实例并传递 `routes` 配置
// 我们在这里使用 html5 的路由模式，url中不带有#，部署项目的时候需要注意。
const router = createRouter({
    history: createWebHistory(),
    routes, 
})


// 全局的路由守卫
router.beforeEach((to, from) => {
    console.log(to)
    console.log(from)
    return true
})

// 讲路由实例导出
export default router

​​​​​​​

  全局安装

import router from '@/router'
createApp(App).use(router).mount('#app')

 配置vuex

Vuex 是什么？ | Vuex

安装依赖

 npm add vuex@next

创建目录结构

user模块

const user = {
    state: {
    },
    getters:{   
    },
    mutations: {
    },
    actions: {
    }
}

export default user

index.js

import { createStore } from 'vuex'
import user from '@/store/modules/user'
import actions from '@/store/actions'
import mutations from '@/store/mutations'


const store = createStore({
    modules: {
        user
    },
    actions,
    mutations
})

export default store

 全局引入

import store from '@/store'

createApp(App).use(router).use(store).mount('#app')

配置axios

http://www.axios-js.com/

npm  add axios

创建文件目录

新建文件夹api，以后所有和后端api交互的内容全部放在此文件夹中：

/**
 * axios的基本api
 * // 发送 POST 请求
 * axios({
 *  method: 'post',
 *  url: '/user/12345',
 *  data: {
 *    firstName: 'Fred',
 *    lastName: 'Flintstone'
 *  }
 *});
 * 
 */

import axios from 'axios'

// 创建axios实例
const request = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: 'http://localhost:8080/ydl/',
    // 超时
    timeout: 10000,
    // 设置Content-Type，规定了前后端的交互使用json
    headers: {'Content-Type': 'application/json;charset=utf-8'}
})
export default request

写几个user相关的接口，测试一下：

import request from "@/api";

// 新增用户
// 查询用户列表
export function listUser(query) {
    return request({
        url: '/user',
        method: 'get',
        params: query
    })
}

// 新增用户
export function addUser(data) {
    return request({
        url: '/user',
        method: 'post',
        data: data
    })
}

注意路径 否则启动很容易出错

安装ui组件

npm add element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

let app=createApp(App);
//全局安装路由组件
app.use(router).use(store).use(ElementPlus).mount('#app')

组件参考 ​​​​​​​

Element - The world's most popular Vue UI framework

任意一个组件 测试  

npm run serve

运行项目