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

  • 作为市场人,一定要知道这几个互联网推广渠道!(成为市场)

    作为市场人,一定要知道这几个互联网推广渠道!(成为市场)

  • 开加一笔是什么(开加一笔是什么字一年级)

    开加一笔是什么(开加一笔是什么字一年级)

  • vivo虚拟按键怎么调出来(vivo调出虚拟按键)

    vivo虚拟按键怎么调出来(vivo调出虚拟按键)

  • 天猫超市可以退货吗(天猫超市可以退差价吗)

    天猫超市可以退货吗(天猫超市可以退差价吗)

  • 怎么取消芒果会员(怎么取消芒果会员自动续费)

    怎么取消芒果会员(怎么取消芒果会员自动续费)

  • 拼多多允许批发吗(拼多多允许批发商品吗)

    拼多多允许批发吗(拼多多允许批发商品吗)

  • 剪映导出闪退(剪映导出闪退怎么解决)

    剪映导出闪退(剪映导出闪退怎么解决)

  • 新版本手机qq怎么建群(怎样使用最新版的手机qq)

    新版本手机qq怎么建群(怎样使用最新版的手机qq)

  • 惠普打印机驱动安装时间过长(惠普打印机驱动官网下载)

    惠普打印机驱动安装时间过长(惠普打印机驱动官网下载)

  • 微信运动计步原理(微信运动计步器)

    微信运动计步原理(微信运动计步器)

  • 32微机中的32是指该微机的(32微机的32是指)

    32微机中的32是指该微机的(32微机的32是指)

  • 微信警告教育是什么(微信警告教育是封号吗)

    微信警告教育是什么(微信警告教育是封号吗)

  • 魅族aicy是什么意思(魅族china是什么型号)

    魅族aicy是什么意思(魅族china是什么型号)

  • 字体设计类型及特点有哪些(字体设计类型及特征)

    字体设计类型及特点有哪些(字体设计类型及特征)

  • 怎么知道对方是拉黑还是删除(怎么知道对方是不是二婚)

    怎么知道对方是拉黑还是删除(怎么知道对方是不是二婚)

  • 苹果如何关闭语音信箱(苹果如何关闭语音播报功能)

    苹果如何关闭语音信箱(苹果如何关闭语音播报功能)

  • OPPO k5照片水印怎么去掉(oppa5照片水印在哪设置)

    OPPO k5照片水印怎么去掉(oppa5照片水印在哪设置)

  • 苹果黑夜模式怎么开(苹果黑夜模式怎么添加到快捷菜单)

    苹果黑夜模式怎么开(苹果黑夜模式怎么添加到快捷菜单)

  • 拼多多购买如何备注(拼多多购买如何选择多个)

    拼多多购买如何备注(拼多多购买如何选择多个)

  • 误删好友火花多久恢复(误删好友后火花没了怎么办?)

    误删好友火花多久恢复(误删好友后火花没了怎么办?)

  • k歌直播声卡v8怎么用(k歌直播声卡v8怎么连接蓝牙手机)

    k歌直播声卡v8怎么用(k歌直播声卡v8怎么连接蓝牙手机)

  • ios13如何安装字体(苹果13字体怎么安装)

    ios13如何安装字体(苹果13字体怎么安装)

  • 电脑故障检测与维修基本知识(电脑故障检测与维护方法)

    电脑故障检测与维修基本知识(电脑故障检测与维护方法)

  • 便秘怎么办——居家自己治疗便秘最佳方法(便秘怎么办 女性)

    便秘怎么办——居家自己治疗便秘最佳方法(便秘怎么办 女性)

  • smbtree命令  基于文本的SMB网络浏览器工具(smitty命令用法)

    smbtree命令 基于文本的SMB网络浏览器工具(smitty命令用法)

  • 待抵扣进项税额转入进项税额
  • 企业所得税季度预缴
  • 财政补贴收入要交印花税吗
  • 母子公司的关联交易怎么看
  • 流动负债占比低于50%,是什么结构类型
  • 本地的住宿费怎么交
  • 固定资产更换零部件的入账价值
  • 购买旧固定资产的增值税进项税
  • 企业股权资本的组成
  • 非独立核算分公司个税怎么申报
  • 不征税收入的所得税处理
  • 事业单位上级拨入资金属于什么科目
  • 增值税和实际缴税不符
  • 出口退税进项抵扣了不退税可以吗
  • 公司注销房产如何转给个人
  • 净利润含不含所得税
  • 免税品销售有增值税吗
  • 简易征收是什么意思和一般纳税人
  • 待认证进项税额借贷方向
  • 利润表所得税费用计算公式
  • 工会经费什么时候返还给企业
  • 支付行业招商方案
  • 走pos对公账户扣多少手续费
  • 有哪些固定资产可以抵税
  • 电子税务局怎么查看已开发票
  • 城建附加减半征收文件
  • 收到一张免税发票能抵税吗
  • 竣工决算调整入库流程
  • 联想笔记本e49系列哪款好
  • 精英主板设置u盘启动
  • 打开文件夹变成黑底
  • 销售原材料计入哪里
  • 引入人工智能
  • windows11搜索
  • 代收代付的垃圾清运费没发票能入账吗
  • 车船使用税凭证还要过户吗怎么办
  • php ssl
  • php消息实时推送完整示例
  • 前端工程化的理解简书
  • 数据库防止重复数据
  • 结转增值税的账务处理
  • 劳务费过账
  • 小规模纳税人当月应交增值税怎么算
  • 陈列费怎么开票
  • 以前未入账固定资产补入账政府会计
  • 企业低值易耗品降成本措施
  • 出现什么情况企业不能持续经营
  • 无法收回的款项
  • 合作社增值税免税项目
  • 建行E信通贴现需要发票吗
  • 个人所得税多计提怎样冲销
  • 旅游费计入什么会计科目
  • 总账科目和明细账科目有哪些
  • 电子行程单如何下载
  • 购货方享受现金折扣增值税
  • 农业行业增值税
  • 项目成本的估算与预算有什么区别和联系?考试资料网
  • 注册公司没交社保
  • 成本费用率计算公式中包含税金及附加吗
  • 小企业会计准则主要按照什么计量
  • ef使用sql语句
  • microsoft window vista
  • 系统之家一键重装系统教程
  • win7 系统设置
  • 电脑任务栏中没有网络图标
  • 电脑ahci模式什么意思
  • win10安装vc++6.0
  • cocoscreator lua
  • 文件上传的三个条件
  • bat批处理删除
  • javascript运用
  • js原始值有哪些
  • shell函数参数
  • python中的字符型
  • 浅蓝色html代码
  • 备忘录全部笔记
  • 安卓实现代理
  • 一起学下载软件
  • 东莞市官网
  • 江苏印花税申报操作流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设