位置: IT常识 - 正文

vue项目实战经验,相关库的安装,继续完善(vuecli项目实战)

编辑:rootadmin
vue项目实战经验,相关库的安装,继续完善 前言

推荐整理分享vue项目实战经验,相关库的安装,继续完善(vuecli项目实战),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue做项目,一个完整的vue项目介绍,vue3项目实战,vue做项目,vue项目工作流程,vue实战项目例子,vue项目经验怎么写,vue项目经验怎么写,内容如对您有帮助,希望把文章链接给更多的朋友!

最近在系统学习vue3的项目实战,这里是对学习过程中的总结,包括一些库,框架的网站。

项目介绍

本项目基于Vue3 + ElementPlus + Vite实战开发商城后台管理系统,其中包括Vite的使用,Vue3全新的

node.js的搭建1.node官网下载

https://nodejs.org/zh-cn/

2.npm 淘宝镜像安装npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm -v //查看版本号vite项目搭建1.vite官网和介绍

http://www.vitejs.net/ Vite 需要 Node.js 版本 >= 12.0.0。,通过

npm init vite@latest //查看版本号2.创建vue3项目#npm 7+, 需要额外的双横线:npm init vite@latest my-vue-app -- --template vue#npm 6.xnpm init vite@latest my-vue-app --template vue

再按要求勾选相关需要, npm run dev 运行。

Element Plus UI库引入1. Element Plus网站

https://element-plus.gitee.io/zh-CN/ Element Plus 是用于vue3的element库,vue2是element-ui 注意一下

2.库安装npm install element-plus --save3.引入UI库文件

main.js文件

import { createApp } from 'vue'import './style.css'// 引入element依赖文件import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import App from './App.vue'const app = createApp(App)app.use(ElementPlus)app.mount('#app')windicss 框架1.网站vue项目实战经验,相关库的安装,继续完善(vuecli项目实战)

https://windicss.org/

2.安装npm i -D vite-plugin-windicss windicss3.Vite 配置中添加插件 ,和Vite 入口文件中导入

vite.config.js 文件

import vue from '@vitejs/plugin-vue'import { defineConfig } from 'vite'import WindiCSS from 'vite-plugin-windicss'// https://vitejs.dev/config/export default defineConfig({plugins: [vue(),WindiCSS()],})

main.js 文件

import { createApp } from 'vue'import './style.css'// 引入element依赖文件import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import App from './App.vue'const app = createApp(App)app.use(ElementPlus)// 引入windi.cssimport 'virtual:windi.css'app.mount('#app')vue-router 路由1.网站

https://router.vuejs.org/zh/

2.安装npm install vue-router@4全局配置

router/index.js 文件

//1. 导入vue-router相关函数import { createRouter, createWebHashHistory } from "vue-router"// 2.路由规则const routes = [{path:"路由地址",name:"路由名称",component:组件名称}]// 3.路由对象实例化const router = createRouter({history: createWebHashHistory(),routes})// 暴露导出export default router

main.js 文件

import { createApp } from 'vue'import './style.css'// 引入element依赖文件import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'// 导入router配置文件import router from "./router"import App from './App.vue'const app = createApp(App)// 挂载文件app.use(ElementPlus)app.use(router)// 引入windi.cssimport 'virtual:windi.css'app.mount('#app')路径别名设置

vite.config.js 文件

import vue from '@vitejs/plugin-vue'import { defineConfig } from 'vite'import WindiCSS from 'vite-plugin-windicss'// 1.导入node的path路径模块import path from "path"// https://vitejs.dev/config/export default defineConfig({resolve: {alias: {// 配置别名"~": path.resolve(__dirname, "src")}},plugins: [vue(), WindiCSS()]})添加404页面

建好一个404页面组件,再路由index.js里

//1. 导入vue-router相关函数import { createRouter, createWebHashHistory } from "vue-router"// 导入页面组件import Home from "~/views/Home.vue"import NotFound from "~/views/Page404.vue"// 2.路由规则const routes = [{path: "/",redirect: "/home"},{path: "/home",component: Home},// 404页面设置{path: '/:pathMatch(.*)*',name: 'NotFound',component: NotFound},]// 3.路由对象实例化const router = createRouter({history: createWebHashHistory(),routes})// 暴露导出export default router登录页面布局1.创建Login.vue组件并配置路由

配置路由

//1. 导入vue-router相关函数import { createRouter, createWebHashHistory } from "vue-router"// 导入页面组件import Home from "~/views/Home.vue"import Login from "~/views/Login.vue"import NotFound from "~/views/Page404.vue"// 2.路由规则const routes = [{path: "/",redirect: "/home"},{path: "/home",name: Home,component: Home},{path: "/login",name: Login,component: Login},{path: '/:pathMatch(.*)*',name: 'NotFound',component: NotFound},]// 3.路由对象实例化const router = createRouter({history: createWebHashHistory(),routes})// 暴露导出export default router

Login.vue组件布局源代码

<!-- 视图层 --><template><el-row class="min-h-screen bg-indigo-500"><el-col :span="16" class="flex items-center justify-center"><div><div class="font-bold text-5xl text-light-50 mb-4">欢迎光临</div><div class="text-gray-200 text-sm">《vue3商城后台管理系统》</div><el-icon><Lock /></el-icon></div></el-col><el-col:span="8"class="bg-light-50 flex items-center justify-center flex-col"><h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2><divclass="flex items-center justify-center my-5 text-gray-300space-x-2"><span class="h-[1px] w-16 bg-gray-200"></span><span>账号密码登录</span><span class="h-[1px] w-16 bg-gray-200"></span></div><el-form :model="form" class="w-[250px]"><el-form-item><el-input v-model="form.username" placeholder="请输入用户名"><template #prefix><el-icon><UserFilled /></el-icon></template></el-input></el-form-item><el-form-item><el-input v-model="form.password" placeholder="请输入密码"><template #prefix><el-icon><Lock /></el-icon></template></el-input></el-form-item><el-form-item><el-buttonroundcolor="#626aef"class="w-[250px]"type="primary"@click="onSubmit">登 录</el-button>></el-form-item></el-form></el-col></el-row></template><!-- 逻辑层 --><script setup>import { reactive } from "vue";// 导入icon图标// import { Lock, UserFilled } from "@element-plus/icons-vue";// do not use same name with refconst form = reactive({username: "",password: "",});const onSubmit = () => {console.log("submit!");};</script><!-- 样式层 --><style lang="" scoped></style>2.表单验证

:rules=“rules” 绑定规则 ref=“formRef” 获取el-form表单组件实例对象 prop=“username” 关联指定对象 show-password 密码显示图标—–小眼睛

<el-form :rules="rules" ref="formRef" :model="form" class="w-[250px]"><el-form-item prop="username"><el-input v-model="form.username" placeholder="请输入用户名"><template #prefix><el-icon><UserFilled /></el-icon></template></el-input></el-form-item><el-form-item prop="password"><el-inputtype="password"v-model="form.password"placeholder="请输入密码"show-password><template #prefix><el-icon><Lock /></el-icon></template></el-input></el-form-item><el-form-item><el-buttonroundcolor="#626aef"class="w-[250px]"type="primary"@click="onSubmit">登 录</el-button></el-form-item></el-form>import { reactive, ref } from "vue";const form = reactive({username: "",password: "",});// 验证规则const rules = {username: [{required: true,message: "用户名不能为空",trigger: "blur",},],password: [{required: true,message: "密码不能为空",trigger: "blur",},],};// 获取form元素节点对象const formRef = ref(null);const onSubmit = () => {formRef.value.validate((valid) => {if (!valid) {return false;}console.log("验证通过");});};2.表单前后端数据交互
本文链接地址:https://www.jiuchutong.com/zhishi/299682.html 转载请保留说明!

上一篇:前端开发中常见的浏览器兼容性问题及解决方案(前端开发常见的兼容性问题)

下一篇:vue路由跳转取消上个页面的请求(vue关闭路由)

  • 苹果11与苹果x区别(苹果11和苹果x的区别)

    苹果11与苹果x区别(苹果11和苹果x的区别)

  • 中音喇叭有必要装吗(中音喇叭有必要要好的吗)

    中音喇叭有必要装吗(中音喇叭有必要要好的吗)

  • 手机正在通话中是怎么回事(手机正在通话中无法发起新的通话)

    手机正在通话中是怎么回事(手机正在通话中无法发起新的通话)

  • 小度音箱怎么恢复出厂设置(小度音箱怎么恢复原厂设置)

    小度音箱怎么恢复出厂设置(小度音箱怎么恢复原厂设置)

  • 抖音抖一下不成功(怎么抖音不行呢)

    抖音抖一下不成功(怎么抖音不行呢)

  • 开直播怎么样找货源(开直播怎么样找客服)

    开直播怎么样找货源(开直播怎么样找客服)

  • 抖音app扣费是怎么回事(抖音扣费在哪里扣)

    抖音app扣费是怎么回事(抖音扣费在哪里扣)

  • 一亿像素手机有哪些(一亿像素手机有什么区别)

    一亿像素手机有哪些(一亿像素手机有什么区别)

  • qq动态名片怎么设置(qq动态名片怎么制作)

    qq动态名片怎么设置(qq动态名片怎么制作)

  • 长边翻页和短边翻页的区别(长边翻页和短边翻页的图片)

    长边翻页和短边翻页的区别(长边翻页和短边翻页的图片)

  • 荣耀v9能用两张电信卡吗(荣耀v9能用两张移动卡吗)

    荣耀v9能用两张电信卡吗(荣耀v9能用两张移动卡吗)

  • 苹果手机怎么连接小米音响(苹果手机怎么连不上wifi)

    苹果手机怎么连接小米音响(苹果手机怎么连不上wifi)

  • 视频超过15分钟怎么发给朋友(视频超过15分钟怎么上传抖音)

    视频超过15分钟怎么发给朋友(视频超过15分钟怎么上传抖音)

  • 全屏华为手机怎样设置返回键(全屏华为手机怎么设置下面三个键)

    全屏华为手机怎样设置返回键(全屏华为手机怎么设置下面三个键)

  • 探探120限制什么时候恢复(探探上说310)

    探探120限制什么时候恢复(探探上说310)

  • mt6739是什么处理器(mt6739处理器相当于骁龙多少)

    mt6739是什么处理器(mt6739处理器相当于骁龙多少)

  • 为什么监控摄像头连不上网(为什么监控摄像头晚上会亮小红灯)

    为什么监控摄像头连不上网(为什么监控摄像头晚上会亮小红灯)

  • 字幕打轴是什么意思(字幕打轴软件)

    字幕打轴是什么意思(字幕打轴软件)

  • 手机怎么设置耳机模式(手机怎么设置耳机左右平衡)

    手机怎么设置耳机模式(手机怎么设置耳机左右平衡)

  • vivo手机怎么显示流量(vivo手机怎么显示时间和日期)

    vivo手机怎么显示流量(vivo手机怎么显示时间和日期)

  • Reno Ace充电速度慢怎么回事(opporenoace2充电速度)

    Reno Ace充电速度慢怎么回事(opporenoace2充电速度)

  • oppo手机电话号码怎么保存到卡上(oppo手机电话号码导入sim卡)

    oppo手机电话号码怎么保存到卡上(oppo手机电话号码导入sim卡)

  • vivox27pro有没有红外线(vivox27pro有没有红外遥控器功能)

    vivox27pro有没有红外线(vivox27pro有没有红外遥控器功能)

  • realme手机什么系统(realme系列)

    realme手机什么系统(realme系列)

  • 手环充电器通用吗(手环冲电器)

    手环充电器通用吗(手环冲电器)

  • 工资可以先计提不发吗
  • 个人账户发工资扣税吗
  • 结构性存款是
  • 冲减管理费用是红字还是在贷方
  • 委托加工的应税消费品收回后直接出售
  • 借款转资本公积怎么算税
  • 简易征收进项税额转出什么意思
  • 法人转钱进公账要交税吗
  • 商业承兑背书后退回怎么办
  • 房租当月无发票怎么办
  • 客户可以把现金存入对公户吗
  • 一般纳税人出售固定资产税率
  • 年终奖和工资个人所得税计算器
  • 免税企业以前年收入多少
  • 企业缴印花税分录
  • 机打发票丢失如何处理报销
  • 财税2018 39号文件
  • 网上勾选认证每月时间要求
  • 小微企业增值税收优惠政策
  • 企业所得税汇算清缴退税怎么做账务处理
  • 公司招投标卖标书的收入款财务作什么科目?
  • 购入土地使用权增值税税率
  • 个体工商户怎么交税
  • 关闭自动更新应用程序
  • 如何使用u盘安装软件
  • window11安装失败
  • directx安全吗
  • 固定资产核销是资产损失吗
  • php -i
  • php设计思路
  • 企业亏损注销税务会不会来查账
  • php验证码扭曲效果怎么做
  • framework 开发
  • 超级鸽卫星
  • 企业对于预支工资的建议
  • 拓展训练属于培训费吗
  • 财务费用税前扣除标准是多少
  • 代扣车船税手续费按多少返还
  • 预收账款挂多久确认收入
  • 工程分包需要注意什么
  • 设计公司成本核算分录
  • 社保里面的住房公积金买房可以便宜多少
  • 企业汇算清缴的工资薪金支出是怎么填
  • 企业贴现会计分录
  • 机会成本的特点有()
  • 企业缴纳耕地占补多少
  • 非货币性资产含义
  • 计提销售费用什么意思
  • 现金发放工资有什么风险
  • 餐费开增值税专用发票
  • 哪些企业需要社工
  • 股息红利等权益性投资收益
  • win7系统c盘太满了,如何清理
  • freebsd操作命令
  • gnu linux编程指南
  • win7开始菜单在哪个文件夹
  • 制作xp系统盘需要多大u盘
  • mssecsvr.exe病毒现象
  • gsicon.exe是什么进程 作用是什么 gsicon进程查询
  • linux 系统变量
  • [置顶] clauvio,Twitter小老鼠
  • 上传图片 js
  • Android 让EditText失去焦点避免自动弹出输入法
  • Cocos2dx3.2 Crazy Tetris 绘制不规则方块 遮罩(ClippingNode的使用)
  • python基本用法
  • 关于javascript事件响应的基础语法总结(必看篇)
  • angularjs1.5
  • js 获取图片大小
  • pm2启动nodejs
  • android 按键
  • Zero Clipboard js+swf实现的复制功能使用方法
  • 雷爵电动车官网
  • javascript中array数组对象的含义及常用方法
  • html js怎么调用
  • javascript bug
  • 银行关联方认定标准是什么
  • 国家税务总局公告2023第12号
  • 国税和地税是什么
  • 会计建账时一般需要哪几本账
  • 盐城购车补贴2024
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设