位置: 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关闭路由)

  • iminicam摄像机连不上(ip camera摄像头怎么连接wifi)

    iminicam摄像机连不上(ip camera摄像头怎么连接wifi)

  • 荣耀手机怎样隐藏桌面上的应用(荣耀手机怎样隐藏桌面图标)

    荣耀手机怎样隐藏桌面上的应用(荣耀手机怎样隐藏桌面图标)

  • 华为平板横屏无法全屏(华为平板横屏无法全屏钉钉)

    华为平板横屏无法全屏(华为平板横屏无法全屏钉钉)

  • 电脑熄屏 按什么键唤醒(电脑熄屏 按什么键关机)

    电脑熄屏 按什么键唤醒(电脑熄屏 按什么键关机)

  • 腾讯视频vip可以几个人用(腾讯视频vip可以投屏到电视上看吗)

    腾讯视频vip可以几个人用(腾讯视频vip可以投屏到电视上看吗)

  • nova6截屏快捷怎么操作(华为nova6截图按哪个)

    nova6截屏快捷怎么操作(华为nova6截图按哪个)

  • 支付宝账号被限制了,啥时能恢复正常(支付宝账号被限制了可以注销吗)

    支付宝账号被限制了,啥时能恢复正常(支付宝账号被限制了可以注销吗)

  • qq密码被盗了怎么找回来吗(qq密码被盗了怎么办用手机改回)

    qq密码被盗了怎么找回来吗(qq密码被盗了怎么办用手机改回)

  • 微星显卡是一线吗(微星显卡属于几线显卡)

    微星显卡是一线吗(微星显卡属于几线显卡)

  • qq曾经加过的好友怎么查询(qq曾经加过的好友删了怎么找回来)

    qq曾经加过的好友怎么查询(qq曾经加过的好友删了怎么找回来)

  • 戴尔一开机就准备自动修复(戴尔电脑为什么一开机就让你要重启?)

    戴尔一开机就准备自动修复(戴尔电脑为什么一开机就让你要重启?)

  • 锐龙r53500x相当于i几(锐龙r53500怎么样)

    锐龙r53500x相当于i几(锐龙r53500怎么样)

  • 小米8性能模式干嘛的(小米8性能模式在哪)

    小米8性能模式干嘛的(小米8性能模式在哪)

  • 支付宝账号就是电话号码吗(支付宝账号就是淘宝会员名)

    支付宝账号就是电话号码吗(支付宝账号就是淘宝会员名)

  • 苹果8停产了吗(苹果8停产了吗2020)

    苹果8停产了吗(苹果8停产了吗2020)

  • word2003怎么设置脚注(word2003怎么设置双面打印)

    word2003怎么设置脚注(word2003怎么设置双面打印)

  • 计算机网络特点是什么(计算机网络特点包括)

    计算机网络特点是什么(计算机网络特点包括)

  • 手机关机还能收到短信吗(手机关机还能收到微信消息吗)

    手机关机还能收到短信吗(手机关机还能收到微信消息吗)

  • 华为hd是什么意思(华为手机hd是啥)

    华为hd是什么意思(华为手机hd是啥)

  • 小米8se屏幕是什么材质(小米8se屏幕是什么)

    小米8se屏幕是什么材质(小米8se屏幕是什么)

  • 云闪付乘车码找不到了(云闪付乘车码找不到深圳)

    云闪付乘车码找不到了(云闪付乘车码找不到深圳)

  • 电视怎么登录爱奇艺vip(电视怎么登录爱家畅享会员)

    电视怎么登录爱奇艺vip(电视怎么登录爱家畅享会员)

  • 微信etc怎么取消订单(怎样取消微信etc)

    微信etc怎么取消订单(怎样取消微信etc)

  • 微信群视频最多几个人(微信群视频最多可以邀请多少人)

    微信群视频最多几个人(微信群视频最多可以邀请多少人)

  • 唯品会如何解绑银行卡(唯品会如何解绑身份证)

    唯品会如何解绑银行卡(唯品会如何解绑身份证)

  • vue-day01 使用cdn引入使用(vuetify cdn)

    vue-day01 使用cdn引入使用(vuetify cdn)

  • 异地预缴附加税需要计提吗
  • 视同销售行为涉税处理?
  • 年报资金数额要怎样填
  • 机械设备租赁印花税谁交
  • 企业收到的政府补贴交所得税吗
  • 红字专用发票信息表用什么纸打印
  • 待摊费用可以转入固定资产吗
  • 中小企业对应的是
  • 集团公司内部调动
  • 怎样填列分析资产负债表
  • 港币转人民币怎么转账
  • 已认证抵扣的进项发票,次月开具红字发票信息表,凭证
  • 何为自然人股东
  • 计提坏账准备的前提条件
  • 父母的股权给子女可以怎样认证
  • 印花税购销合同和买卖合同有什么区别
  • 股东租车给公司押金
  • 其他应付款需要做预算会计吗
  • 融资性售后回租按什么缴纳增值税
  • 小微企业增值税最新优惠政策
  • 员工承担补缴社保的责任
  • 免税和退税的区别出口企业
  • 长期待摊会计处理
  • 支付税点是什么意思
  • 附加税是销项税减去进项税
  • 领用原材料业务
  • 如何把文件夹加密码锁手机
  • 个体工商户应申报套餐无增值税吗
  • PHP:xml_error_string()的用法_XML解析器函数
  • thinkphp invoke
  • vue怎么做兼容
  • psd格式文档
  • 办公楼装修费两万合理吗
  • php数组操作函数
  • yii2带搜索功能的下拉框实例详解
  • vue父组件怎么调用子组件的方法
  • 借银行存款贷预收账款
  • idea2020.2.3创建web
  • linux 常用命令大全及其详解
  • 弃置费用摊销例题
  • 劳务费发票如何入账
  • 海洋cms有安卓版下载
  • 简易征收销售额是什么意思
  • 金蝶软件如何建立新账套
  • 不能税前扣除的业务招待费怎么处理
  • 当月进项税大于销项税怎么办
  • 企业与企业之间借款都需要交什么税
  • 研发费用加计扣除新税收政策2023
  • 应收票据周转率公式
  • 企业税负是否包含增值税
  • 收到供应商的赔偿款要开票吗
  • 公司车辆做账交增值税吗
  • 报销的发票抬头怎么填
  • 个体工商户纳税申抿
  • 年底奖金怎么入账
  • 房地产企业的土地使用权计入什么科目
  • sqlserver表排序
  • win10上如何安装hd4850驱动
  • 微软软件安装
  • 电脑程序在运行桌面不显示的解决方法
  • Ubuntu系统怎么截图
  • window如何删除输入法
  • win10系统怎么设置默认打印机
  • 家用电脑是什么机型
  • win8怎么查ip地址查询
  • 宏基win8改win7
  • windows10 禁用u盘
  • Javascript之String对象详解
  • drawand paint
  • linux怎样过滤一个关键字
  • anaconda使用指南
  • 关于H1的位置解析
  • shell自定义函数以及使用
  • shell脚本编写 方法
  • node.js的理解
  • 数字图像处理软件idl和matlab有什么异同点
  • python 技巧
  • jquery实例
  • jquery实现图片横向移动
  • 打印个人住房信息查询记录需要什么资料
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设