.NET经销商实战(六)——vue前端项目的搭建,开发登录界面及商品列表界面的开发

本章教程是用的vue-cli，如果大家想要更快速的方式创建项目，那就选择vite
学习本教程前，请先学习一些vue基础语法，本教程只专注于写项目，对于基本语法没有介绍，如有需要了解基础语法，请转到官网vue官网
本章教程会用TS

1.检查npm，node是否安装，及创建前端项目

如何安装node这里就介绍了，自行百度
npm -v 出现对应的版本号，即代表成功！
'node -v' 同上
npm install @vue/cli -g 安装vue脚手架
vue -V 查看脚手架版本
'vue create 项目名称' 通过vue脚手架命令创建vue项目，具体的配置如下图
我当前的vue-cli是vue-cli v5.0.4版本

因为我们后面要用到axios，所以需要安装axios
'npm i axios -g'安装axios的命令

2.修改App.vue

将两句多余代码删掉，如下

2.router路由的配置

在项目文件夹下，找到router文件夹，新增一个index.ts文件
在这个文件下写入如下代码

点击查看代码 
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Login from '../views/Login.vue'
import Main from '@/views/Main.vue'
import layout from '@/views/Layout.vue'
import productList from '@/views/ProductList.vue'
const routes: Array = [
  {
    path: '/',
    name: 'Login',
    component: Login,
  },
  {
    path: '/layout',
    name: 'layout',
    component: () =>
      layout,
    redirect: "/Main",
    children: [
      {
        path: '/Main',
        name: 'main',
        component: Main,
      },
      {
        path: '/productList',
        name: 'productList',
        component: productList,
      },
    ]
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router

有些路径你的编译器可能会报错，文件找不到，不要急，继续往下看

3.axios的使用

新增一个文件夹，名称叫httpRequests,在这个文件夹下，新增一个loginRequest.ts
这里定义的是登录的接口
代码如下:

点击查看代码 
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:5011/"
export const login = async (data: any) => {
	var res = await axios.post("Login/CheckLogin", data);
	return res.data;
}

4.写Layout布局页面

在views文件夹中新增一个文件Layout.vue

点击查看代码

5.接口文件夹

我们需要一个接口文件夹，因为我们基本用的都是vue3的语法，所以需要定义一些接口，
在项目的根目录下，新增一个Interfaces文件夹，新增一个Login.ts

点击查看代码 
export interface ILoginInfo {
  userNo: string,
  password: string,
  login: Function
}

方便我们后续使用

6.写登录页面

在views新增一个Login.vue
代码如下:

点击查看代码

7.主体代码

在views新增一个文件Main.vue

点击查看代码

8.商品列表代码:

点击查看代码

这里很多死数据，后期会修改，耐心等待朋友们

001.NET

相关

标签