移动电商项目实战
- 一、目标导航
- 二、项目所需技术栈
- 三、开发工具
- 四、前段项目搭建
- 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主要就是为了获取这个命令
二、下载地址：http://nodejs.cn/download/（推荐下载稳定版）
三、通过查看 node --version看版本号是否安装好了
2.pnpm
2.安装pnpm:
一、官网介绍：https://www.pnpm.cn
二、安装：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
一、官网介绍：https://www.sass.hk/guide/
二、安装命令：nom install sass
三、目的：支持嵌套CSS编写，支持定义变量
5.路由
5.1安装路由
一、官网介绍：https://router.vuejs.org/zh/introduction.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
一、官网介绍：https://vant-contrib.gitee.io/vant/#/zh-CN
二、安装命令：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' },
];实现后：
组件：上拉加载
