鲜花网项目实战（一）

鲜花网项目实战（一） 1、开发环境和技术栈2、安装NodeJS环境一、环境的作用二、下载地址三、查看安装 3、安装Vue-CLI一、脚手架工具介绍二、安装命令三、查看安装 4、创建前端项目，以及目录介绍1、创建项目一、通过命令创建 二、项目目录介绍 5、安装TypeScript和SCSS1、安装TypeScript一、官网介绍二、下载/安装三、在Vue项目中使用 2、安装SCSS 6、Element Plus的介绍和使用一、框架介绍二、安装命令三、项目中导入 7、网站模块划分一、主页面二、组件 8、路由的配置与使用一、路由的作用二、安装命令三、新建相关页面四、src目录下新建路由文件routes.ts五、项目中导入六、在App.vue里面加上路由标签三、在routes文件下进行配置

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://www.huajiangbk.com/newsview505980.html

上一篇: 小区鲜花（一）

下一篇: 常用于吉祥图案的花卉植物