SSM+VUE项目上手训练——Vue项目创建，前端环境搭建

目录

Vue项目创建

前端环境搭建

---

Vue项目创建

首先创建一个空文件夹，用于存放整个项目，然后在地址栏全选输入cmd按回车，就会进入到当前文件夹目录下的终端

在命令行中输入vue create ssm-ui 创建一个新的vue项目，ssm-ui是项目文件夹的名字

这样表示当前vue项目正在下载，当加载完成后，输入以下俩条命令，就可以运行我的vue项目

 

项目加载完成后出现一个地址，可以根据这个地址，在网页上访问我们的vue项目

前端环境搭建

打开我们的idea，进入到初始页面，打开文件，选择我们刚刚创建项目的总包，把我们的项目放在idea上面，这样方便我们操作。

进入idea打开我们的项目后，在idea下面的选择栏，选择我们的终端，输入npm install vue-router@4，配置我们的vue-router

安装完毕后，在我们vue项目的包下，打开src新建一个router文件夹，新建一个index.js文件

在文件中加入用来配置我们的的路由信息

// 导入用来创建路由和确定路由模式的两个方法
import {
    createRouter,
    createWebHistory
} from 'vue-router'
​
/**
 * 定义路由信息
 *
 */
const routes = [
   
]
​
// 创建路由实例并传递 `routes` 配置
// 我们在这里使用 html5 的路由模式，url中不带有#，部署项目的时候需要注意。
const router = createRouter({
    history: createWebHistory(),
    routes,
})
​
​
// 全局的路由守卫
router.beforeEach(() => {
// router.beforeEach((to, from) => {
    // console.log(to)
    // console.log(from)
    //每次进行路由切换都判断一下有没有登入，如果没有则路由到登入页面，否则放行
​
    return true
})
​
// 讲路由实例导出
export default router

将我们router下的index.js配置装到我们的全局中

打开我们vue项目的Mian.js文件

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";
​
let app = createApp(App);
//全局安装路由组件
app.use(router).mount('#app')

然后再配置我们方便我们在多个组件中获取响应数据的vuex

在终端下面输入npm install vuex@next点击回车

然后我们在src目录下创建store/modules文件夹，在文件夹下面创建一个user.js

​

const user = {
    },
    getters:{
    },
    mutations: {
    },
    actions: {
    }
}
​
export default user

在store目录下创建一个index.js

import { createStore } from 'vuex'
import user from '@/store/modules/user'
​
const store = createStore({
    modules: {
        user
    },
})
​
export default store

然后将其安装到mian.js中

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";
import store from "@/store";
​
let app = createApp(App);
//全局安装路由组件
app.use(router).use(store).mount('#app')

然后安装我们前后端异步通讯的Axios，在终端输入npm install axios

然后在src目录下创建一个目录API，创建index.js，对我们的axios进行配置

/**
 * 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:800/',
    // 超时
    timeout: 10000,
    // 设置Content-Type，规定了前后端的交互使用json
    headers: {'Content-Type': 'application/json;charset=utf-8'}
})
export default request


然后在API下面创建和后端联通的文件，专门用来记录前后通讯地址的user.js

import request from "@/api";
​
// 用户登入接口
export function login(data) {
    return request({
        url: '/login',
        method: 'post',
        data: data
    })
}