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

  • 韩国12月制造业活动连续六个月萎缩

    韩国12月制造业活动连续六个月萎缩

  • 寻找一双合适的鞋(寻找一双合适的鞋子英文)

    寻找一双合适的鞋(寻找一双合适的鞋子英文)

  • 红米note11tPro如何看内存(红米note11tpro如何设置返回键)

    红米note11tPro如何看内存(红米note11tpro如何设置返回键)

  • 苹果手机可以呼叫转移到另一个手机上吗(苹果手机可以呼叫转移一个号码吗)

    苹果手机可以呼叫转移到另一个手机上吗(苹果手机可以呼叫转移一个号码吗)

  • oppo手机突然像警报一样响了(oppo手机突然像来电铃声一样,又找不到哪里有来电)

    oppo手机突然像警报一样响了(oppo手机突然像来电铃声一样,又找不到哪里有来电)

  • 表格的字怎么分两行

    表格的字怎么分两行

  • nfc是常开还是关闭(nfc功能一直开着安全吗)

    nfc是常开还是关闭(nfc功能一直开着安全吗)

  • 网易云为什么播放不了了(网易云为什么播完一首就停)

    网易云为什么播放不了了(网易云为什么播完一首就停)

  • 手机模式怎么调回来(手机模式怎么调回白色)

    手机模式怎么调回来(手机模式怎么调回白色)

  • 微信一条信息怎么发多个人(微信一条信息怎么发给全部好友)

    微信一条信息怎么发多个人(微信一条信息怎么发给全部好友)

  • 钉钉收藏后的东西在哪里看(钉钉收藏后的东西怎么转发到微信)

    钉钉收藏后的东西在哪里看(钉钉收藏后的东西怎么转发到微信)

  • 手机停机了影响微信吗(手机停机了影响征信吗)

    手机停机了影响微信吗(手机停机了影响征信吗)

  • qq粉丝群审核是什么意思(qq粉丝群审核是谁审核)

    qq粉丝群审核是什么意思(qq粉丝群审核是谁审核)

  • 为什么xr屏幕乱跳(为什么xr屏幕乱闪)

    为什么xr屏幕乱跳(为什么xr屏幕乱闪)

  • 手机相册不小心删了怎么恢复(手机相册不小心删除了怎么恢复)

    手机相册不小心删了怎么恢复(手机相册不小心删除了怎么恢复)

  • 主存储器和辅存储器区别(主存储器和辅存器的区别)

    主存储器和辅存储器区别(主存储器和辅存器的区别)

  • ie浏览器不兼容怎么弄(ie浏览器不兼容是什么意思)

    ie浏览器不兼容怎么弄(ie浏览器不兼容是什么意思)

  • 荣耀v20相机是否带防抖(荣耀v20相机使用技巧)

    荣耀v20相机是否带防抖(荣耀v20相机使用技巧)

  • 抖音里用户推荐是什么意思(抖音推荐用户是什么意思)

    抖音里用户推荐是什么意思(抖音推荐用户是什么意思)

  • 闪迪优盘发烫正常吗(闪迪u盘发热烫手是怎么回事)

    闪迪优盘发烫正常吗(闪迪u盘发热烫手是怎么回事)

  • WIFI信号微弱如何将450M和54M不同路由无线桥接(wifi信号弱了)

    WIFI信号微弱如何将450M和54M不同路由无线桥接(wifi信号弱了)

  • python用内置函数进行判断(python用内置函数来打开文件)

    python用内置函数进行判断(python用内置函数来打开文件)

  • 一般纳税人收到普票如何入账
  • 月初没报完税可以开票吗
  • 讲课费怎么代扣代缴个人所得税
  • 培训个人所得税计算
  • 什么是红字增值服务
  • 新个税年终奖计算公式
  • 农民工专户个税起征点2023四川省
  • 通用发票
  • 小规模开的专票能抵扣进项税吗
  • 冲红的发票要拿回来吗
  • 机票的电子发票和行程单有什么区别
  • 在项目地预缴税款有哪些税种
  • 自产的产品
  • 残保金上年在职职工工资总额怎么填
  • 外地建筑工程开票流程
  • 购房补贴退契税3个月没到账
  • 支票报销是怎么操作的
  • 人力资源外包服务增值税税率
  • 计提残疾人保障金的基数是什么
  • 文化传媒公司取名字不带文化
  • 印花税的计税依据怎么算公式
  • 工业设备基础
  • 民办非企业收入会计分录
  • 报关单上金额要和合同上一样吗
  • 年所得税12万申报
  • 服务类的企业发票税率
  • 养牛场增值税的税率是多?
  • 远程清卡显示清卡失败,证书已挂失怎么回事
  • 差额征税的差额怎么算
  • 公司账户流水要交税吗
  • 企业法人不发工资合法吗
  • 开发票回款是什么意思
  • 按键盘不起作用怎么办
  • 公司法人向公司借款未还,公司可以倒闭吗
  • 网络延迟高不稳定怎么办
  • 推荐一款免费的vba编辑器
  • 行政事业单位转让不动产
  • php编程基本语法是什么
  • 路径规划的基本流程和方法
  • html的标签大全
  • 公司年底封账时间
  • 公司股权转移怎么办理
  • 免征的教育费附加怎么做账
  • 清单应该盖公章还是财务章
  • 个体工商户可以开对公账户吗
  • 维修费应该计入什么科目
  • 收到个人所得税汇算清缴短信
  • php增删改查语句
  • 税费退库怎么做账
  • 个税累计预扣法导致税交多了
  • DB2专家王云谈商业智能BI
  • 房地产企业购买礼品赠送客户
  • 微信支付宝等第三方支付的优缺点
  • 股票股利发放形式是什么
  • 挂靠在运输公司的车辆为什么要记入"固定资产"科目?
  • 交易性金融资产入账价值怎么计算
  • 贷款利息进项税为什么不能抵扣
  • 净资产少于1元
  • 管理费用冲减其他费用
  • 事业单位扶贫费用怎么做账
  • 发票金额与实际金额不符怎么举报
  • 快递费专票可以报销吗
  • 保险可以税前扣除吗
  • executing c1.exe
  • linux系统怎么启动软件
  • javascript数据结构与算法项目计算找零
  • nodejs 视频切片
  • andriod 控件
  • opengl中点画圆算法
  • js原生dialog
  • 衬线字体和无衬线字体各自的用途
  • js中的json
  • jquery 右键菜单
  • python 列表排序 中文
  • js实现兼容性较好的方法
  • javascript.
  • python的面向对象和模块原理
  • 税务局 笔录
  • 北京海淀区国税有几个办税大厅?
  • 甘肃省张掖市国家储备林
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设