移动电商项目实战（一）

实战（一）"/>

移动电商项目实战（一）

移动电商项目实战

• 一、目标导航
• 二、项目所需技术栈
• 三、开发工具
• 四、前段项目搭建
• • • 1.node.js
    • 2.pnpm
    • 3.创建项目
    • • 3.1项目文件介绍
    • 4.项目配置
    • • 4.1安装SASS
    • 5.路由
    • • 5.1安装路由
      • 5.2使用路由
    • 6.Vant:轻量、可靠的移动端 Vue 组件库
    • • 5.1安装Vant
      • 5.1按需导入组件
    • 7.使用组件完成页面

一、目标导航

1.学习前端基础，掌握环境搭建和项目构建过程
2.学习后端基础，web api提供服务支持
3.学习数据库访问，为服务提供数据支撑

二、项目所需技术栈

前端：VUE3 ; Vite ; TypeScript ; SCSS ; Vant ; Router ; axios
后端：.Net 6 ; Minimal Api ; Sql sugar

三、开发工具

前端开发：VS Code
后端开发：VS 2022
数据库开发：SQL Server Management studio

四、前段项目搭建

1.node.js

1.安装Node.js环境:

一、开发VUE项目需要npm（包管理器，可以创建或下载一些包） 命令，安装node.js主要就是为了获取这个命令

二、下载地址：/（推荐下载稳定版）

三、通过查看 node --version看版本号是否安装好了

2.pnpm

2.安装pnpm:

一、官网介绍：

二、安装：nom install -g pnpm@next-7

PS : 之所以用pnpm 而不是用npm的原因：npm有时网络不稳定会下载包失败，因为有些包是国外的; 所有使用npm安装包的命令都可以替换成pnpm,同时 pnpm dev 等价于 npm run dev

3.创建项目

一、在本地新建文件夹，比如/Code2

二、使用VS Code打开文件夹，在终端输入以下命令：
nom create vite @latest demo

选VUE+Typescript

PS:在cmd中也可以执行这个命令，放在VS Code中执行只是为了放在后面接着写代码

出现这个图片的样子，说明你项目的创建是没有任何问题的

3.1项目文件介绍

1、node+modules:模块包
我们下载的包都放在这里，下载的包是从package.json来的

2、public:可以放图片
ps:不要把public放在src下，否则打包后，会找不到图片路径

3、assets:放静态资源的

4、components:放各种组件的

5、App.Vue:根组件
类似于后端的程序启动入口（一切开始的地方）

6、main.js:传值配置生效的地方
在main里导入了import ‘./style.css’，那么你所有的组件样式都会用这个
不想用可以注释掉，换成别的

7、vite_env.d.ts：带这种.d的都是声明文件

8、.gitignore ：过滤文件
创建完项目以后把 .gitignore 初始化一下，方便以后我们在修改代码的时候，可以看到自己的一个改动

9、index.html ：是我们的一个提示文件
可以通过这个文件来改标题之类的

10、tsconfig.json：用来配置ts的
这个include就是到时候我们要在项目里引入的资源文件

11、vite.config.ts：因为我们的项目是使用vite来构建的，所以会有vite的配置文件
这个可以设置自定义端口号，也可以设置自动打开浏览器。这里还会有更多的配置：比如说配置他的代理；有一些插件的自动导入也会在这个文件给他配上去

4.项目配置

在这里我就配置了一个自动打开浏览器（在vite.config.ts下配置的）

4.1安装SASS

一、官网介绍：/

二、安装命令：nom install sass

三、目的：支持嵌套CSS编写，支持定义变量

5.路由

5.1安装路由

一、官网介绍：.html

二、安装命令：nom install vue-router@4

5.2使用路由

安装完成后：
在src下，新建文件夹router，在router下新建文件index.ts
（src-router-index.ts）

先把路由导入index.ts : import { } from “vue-router”;

{}里面要导2个东西：1、创建路由的方法，2、创建路由的模式

标准代码:

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

定义一个list集合，放我们路由的配置

let list= [{ name:"list", path:"/",component:() => import("../views/HomePage.vue")},{ name:"detail", path:"/detail:id",component:() => import("../views/DetailPage.vue")}//参数匹配
]

多参数匹配的话，可以按照下面来写：

{ name:"detail", path:"/detail:id/:type",component:() => import("../views/DetailPage.vue")}//多参数匹配

路由配置好以后，来定义一个路由对象：

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

定义完后，我们把路由导出去

export default router

路由配置好以后，回到main.js里，将路由导进去,再use一下就可以了

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

6.Vant:轻量、可靠的移动端 Vue 组件库

5.1安装Vant

一、官网介绍：

二、安装命令：nom i vant

5.1按需导入组件

一、安装插件：npm i unplugin-vue-components -D

二、配置插件：

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';export default {plugins: [vue(),Components({resolvers: [VantResolver()],}),],
};

这样就实现了按需导入
PS:这样你使用样式的时候就不用import了，因为我们已经实现了自动导入。

7.使用组件完成页面

列表页的结构和功能由五部分构成：搜索，分类，排序，上拉加载，下拉刷新

在HomePage页面下输入以下代码（定义一个响应式变量）

<template><div><van-search v-model="searchVal" placeholder="请输入搜索关键词" /></div>
</template>
<script lang="ts" setup>
import {ref} from "vue"
const searchVal = ref()
</script>

通过ref关键字，定义一个响应式变量

组件：分类
基础用法

const searchVal = ref()
const ProductType = ref("");const TypeList = ref([{ text: '全部商品', value: 0 },{ text: '新款商品', value: 1 },{ text: '活动商品', value: 2 },]);const ProductOrder = ref("");const OrderList = [{ text: '默认排序', value: 'a' },{ text: '好评排序', value: 'b' },{ text: '销量排序', value: 'c' },];

实现后：

组件：上拉加载
基础用法

可自行点击链接查找