鲜花网项目实战（一）
1、开发环境和技术栈
开发工具：vscode、Visual Studio 、sql server
前端：Vue3、TypeScript、SCSS、Element Plus、Router、axios、Vuex
后端：.NET6、Automapper、Autofac、Sql sugar、JWT、Log4Net
2、安装NodeJS环境
一、环境的作用
开发vue项目需要通过nmp命令来创建和启动，安装nodejs仅仅只是为了获得这个命令，和使用nodejs开发无关。
二、下载地址
http://nodejs.cn/download/
三、查看安装
通过node --version看版本号表示安装好了
3、安装Vue-CLI
一、脚手架工具介绍
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了功能齐备的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。
二、安装命令
npm install -g @vue/cli
三、查看安装
三、通过vue --version看版本号表示安装好了
4、创建前端项目，以及目录介绍
1、创建项目
一、通过命令创建vue create 项目名
二、项目目录介绍
node_modules 模块包
public 公共资源
src 项目目录
assets 静态资源
components 组件
App.vue 根组件、
main.ts 根函数入口，全局配置生效的地方
package.json 项目配置文件，项目的标题、版本，模块的版本等信息
5、安装TypeScript和SCSS
1、安装TypeScript
一、官网介绍https://www.tslang.cn/docs/home.html
二、下载/安装https://www.tslang.cn/index.html#download-links
三、在Vue项目中使用vue add typescript
2、安装SCSS
npm install sass
6、Element Plus的介绍和使用
一、框架介绍
Element Plus，基于Vue3，面向设计师和开发者的组件库（https://element-plus.gitee.io/zh-CN/）
二、安装命令
npm install element-plus
三、项目中导入
引入到main.ts里
import ElementPlus from 'element-plus' const app = createApp(App) app.use(ElementPlus) 123
7、网站模块划分
一、主页面
1、网站首页
HomePage
2、4个鲜花列表页
LoveFlower
BirthdayFlower
FriendFlower
WeddingFlower
3、鲜花详情页
FlowerDetail
4、鲜花支付页
FlowerPay
5、个人中心
PersonCenter
二、组件
1、网站头部尾部组件
HeaderCom
FooterCom
2、登录注册组件
LoginCom
RegisterCom
3、首页主体模块组件
HomeContent
4、鲜花列表组件
FlowerList
8、路由的配置与使用
一、路由的作用
URL地址和页面的适配
二、安装命令
npm install vue-router@next
三、新建相关页面
四、src目录下新建路由文件routes.ts
按下面代码块写入页面和路由映射关系
五、项目中导入
import router from './routes' app.use(router) 12
六、在App.vue里面加上路由标签
三、在routes文件下进行配置
import {createRouter,createWebHistory} from 'vue-router' import HomePage from "./views/HomePage.vue" import LoveFlower from "./views/LoveFlower.vue" const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: HomePage }, { path: '/loveflower', component: LoveFlower }, ], }) export default router 12345678910
相关知识
4月课程 | 喷灌与快速水景实战班/庭院施工实战班，开始报名啦
家庭养花实战手册
武乡鲜花预定,武乡县预定鲜花,长治武乡鲜花预订服务,一朵朵鲜花网
鲜花网官方网站
关于鲜花网
弥渡鲜花预定,弥渡县预定鲜花,大理弥渡鲜花预订服务,一朵朵鲜花网
鲜花网
中国鲜花网
江北鲜花预定,江北区预定鲜花,宁波江北鲜花预订服务,一朵朵鲜花网
鲜花网软件下载
网址: 鲜花网项目实战（一） https://m.huajiangbk.com/newsview505980.html
| 上一篇: 小区鲜花（一） |
下一篇: 常用于吉祥图案的花卉植物 |
