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

  • 支付宝背景图在哪里设置(支付宝背景图怎么还原)

    支付宝背景图在哪里设置(支付宝背景图怎么还原)

  • 微信怎么换绑定的银行卡(微信怎么换绑定的身份证)

    微信怎么换绑定的银行卡(微信怎么换绑定的身份证)

  • 怎么查看微信黑名单(怎么查看微信黑名单里的人)

    怎么查看微信黑名单(怎么查看微信黑名单里的人)

  • 华为nova5充电提示音在哪里设置(华为nova5充电提示音怎么关闭)

    华为nova5充电提示音在哪里设置(华为nova5充电提示音怎么关闭)

  • 手机APP闪退的原因(手机里app闪退)

    手机APP闪退的原因(手机里app闪退)

  • clock是什么键(clocks是什么)

    clock是什么键(clocks是什么)

  • 苹果8plus原装充电器(苹果8plus原装充电器多少瓦)

    苹果8plus原装充电器(苹果8plus原装充电器多少瓦)

  •  戴尔显示器型号解读(戴尔显示器型号解读 后缀)

    戴尔显示器型号解读(戴尔显示器型号解读 后缀)

  • 电视一会正常一会闪屏,怎么回事(电视一会正常一会闪屏)

    电视一会正常一会闪屏,怎么回事(电视一会正常一会闪屏)

  • 微信发朋友圈只发文字怎么发(微信发朋友圈只允许一个人看,对方会知道吗)

    微信发朋友圈只发文字怎么发(微信发朋友圈只允许一个人看,对方会知道吗)

  • 表格打开是灰色点不了(表格打开是灰色的怎么回事)

    表格打开是灰色点不了(表格打开是灰色的怎么回事)

  • 华为mate7上市时间(mate7发售价格)

    华为mate7上市时间(mate7发售价格)

  • 小米10支持5g吗(小米10支持5g嘛)

    小米10支持5g吗(小米10支持5g嘛)

  • 手机耳机可以在电脑上不能用吗(手机耳机可以在ipad上用吗)

    手机耳机可以在电脑上不能用吗(手机耳机可以在ipad上用吗)

  • 微信公众号设了星标有什么用(微信公众号设了私密号别人看得见吗)

    微信公众号设了星标有什么用(微信公众号设了私密号别人看得见吗)

  • 华为p40pro刷新率是多少hz(华为p40pro刷新率设置)

    华为p40pro刷新率是多少hz(华为p40pro刷新率设置)

  • 苹果x信息特效怎么设置(iphonex短信特效)

    苹果x信息特效怎么设置(iphonex短信特效)

  • 手机伴侣是什么(手机伴侣的真正意义是什么)

    手机伴侣是什么(手机伴侣的真正意义是什么)

  • 拼多多怎么弄备注(拼多多怎么弄备注留言)

    拼多多怎么弄备注(拼多多怎么弄备注留言)

  • 抖音里作品怎么删除(抖音里作品怎么删掉)

    抖音里作品怎么删除(抖音里作品怎么删掉)

  • 苹果nfc功能在哪里设置(苹果nfc功能在哪里感应)

    苹果nfc功能在哪里设置(苹果nfc功能在哪里感应)

  • 苹果手机购买项目在哪扣钱(苹果手机购买项目怎么删除记录)

    苹果手机购买项目在哪扣钱(苹果手机购买项目怎么删除记录)

  • 朋友圈封面下面的文字怎么设置(朋友圈封面下面的文字怎么添加)

    朋友圈封面下面的文字怎么设置(朋友圈封面下面的文字怎么添加)

  • 手机模式在哪里设置(手机换模式在哪里设置)

    手机模式在哪里设置(手机换模式在哪里设置)

  • 抖音只能拍15秒吗(抖音视频只能拍15秒)

    抖音只能拍15秒吗(抖音视频只能拍15秒)

  • note8和note9区别(note8和9a)

    note8和note9区别(note8和9a)

  • 小米手环4怎么显示微信内容(小米手环4怎么设置密码)

    小米手环4怎么显示微信内容(小米手环4怎么设置密码)

  • 调整系统保留带宽(调整系统保留带宽的命令)

    调整系统保留带宽(调整系统保留带宽的命令)

  • 寓意幸福和团圆的春节灯笼,中国 (© d3sign/Moment/Getty Images)(寓意幸福和团圆的网名)

    寓意幸福和团圆的春节灯笼,中国 (© d3sign/Moment/Getty Images)(寓意幸福和团圆的网名)

  • 一般户付款能开增值税票吗
  • 离职员工个税申报时员工状态依然是雇员
  • 年报和汇算清缴报表数字不一致
  • 金税盘证书口令被锁死自己能解吗
  • 处置固定资产产生的净损失
  • 金税盘无法连接jk开票
  • 所得税费用期初有余额吗
  • 工商登记执照号码怎么查询
  • 股权转让如何避免印花税
  • 总公司收回未分配利润如何入账?
  • 股权转让金是什么意思
  • 年底结账会计处理
  • 增值税专用发票和普通发票的区别
  • 实收资本印花税最新规定
  • 员工误餐费的会计分录
  • 本年利润期末
  • win11 zen1
  • xampp如何运行php项目
  • php stream_get_meta_data返回值
  • 汇算清缴时业务招待费税收金额为零是什么原因
  • 财政补助收入的账务处理
  • 应缴纳个人所得税的是托儿补助费
  • 业务招待费应计入期间费用的哪项费用
  • dotnetfx.exe
  • 液晶显示器容易坏点
  • 独资企业弥补亏损怎么办
  • phpstudy8
  • element-ui dialog
  • php传值和传引用的区别
  • 相思树学名叫什么
  • 购买办公用品怎样写备注
  • 本月职工工资
  • php执行linux命令无效
  • php sha1加密 解密
  • 职工教育经费是不是教育费附加
  • javascript背景图片怎么导入
  • 路径规划原理
  • vue axios.all
  • 公司迁移到外省 税务局需要注销吗
  • 建筑企业其他应付款
  • 网上学电脑
  • 固定资产入账是税前还是税后
  • dedecms51
  • 业务招待费汇算清缴怎么填表
  • 收到员工交来现金怎么入账
  • 账实核对是指各种财产物资与债权债务的账面余额
  • 委托加工物资科目贷方登记的内容有什么
  • 发票红冲操作流程
  • 开出银行承兑汇票一张,面值30000元,用于抵付
  • 附加税多计提了怎么做分录
  • 以前年度漏扣个税怎么处理
  • 增值税加计抵扣账务处理
  • 政府补助计入资本公积吗
  • 股本是什么类科目怎么记
  • WIN10系统怎么删除3Dmax
  • Windows Server 2003报错无法定位程序输入点DecodePointer解决方法
  • Linux磁盘分区的作用
  • macbookpro登陆
  • centos7.0安装教程
  • win8怎么查看ip地址
  • linux 删除 用户
  • vps如何搭建ss
  • 360对win7支持多久
  • win8 开机后无法进入系统
  • cocos2dx键盘控制移动
  • cocos输入框
  • 网页制作颜色搭配
  • linux curl命令详解
  • pypy 使用
  • android 多个权限合并 弹窗
  • 遍历字符串python
  • js操作对象的方法
  • 企业所得税汇总纳税备案表
  • 3.0排量 车船税
  • 收到税务局税收返还
  • 随子女定居外省好吗
  • 江西国税电子税务局
  • 湖北省国家税务局官网
  • 苏30参数
  • 发票多久作废不了
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设