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

  • timing怎么视频连麦

    timing怎么视频连麦

  • 华为芯片是哪国的(华为芯片是哪个公司)

    华为芯片是哪国的(华为芯片是哪个公司)

  • 电脑能进bios进不了系统(电脑能进bios进pe就关机)

    电脑能进bios进不了系统(电脑能进bios进pe就关机)

  • 闲鱼注销淘宝也会注销吗(闲鱼注销淘宝账号淘宝还能用吗)

    闲鱼注销淘宝也会注销吗(闲鱼注销淘宝账号淘宝还能用吗)

  • 小爱同学二维码丢了怎么连接(小爱同学二维码在哪找)

    小爱同学二维码丢了怎么连接(小爱同学二维码在哪找)

  • 手机暗怎么调回来(手机暗度怎么调最暗)

    手机暗怎么调回来(手机暗度怎么调最暗)

  • powerpoint的概念功能及其特点(介绍powerpoint的概念功能及其特点)

    powerpoint的概念功能及其特点(介绍powerpoint的概念功能及其特点)

  • 苹果手机返厂修的利弊(苹果手机返厂修好了寄回来要几天)

    苹果手机返厂修的利弊(苹果手机返厂修好了寄回来要几天)

  • 数据镜像与数据备份的区别(数据镜像与数据备份)

    数据镜像与数据备份的区别(数据镜像与数据备份)

  • 光驱是什么接口(光驱一般是什么接口)

    光驱是什么接口(光驱一般是什么接口)

  • 电脑主板自带的声卡怎么样(电脑主板自带的wifi天线)

    电脑主板自带的声卡怎么样(电脑主板自带的wifi天线)

  • 微信怎么发录音文件给好友(企业微信怎么发录音)

    微信怎么发录音文件给好友(企业微信怎么发录音)

  • 快手怎么进主播粉丝群(快手怎么进主播榜单)

    快手怎么进主播粉丝群(快手怎么进主播榜单)

  • 为什么提示数据透视表字段名无效(为什么提示数据流量不足)

    为什么提示数据透视表字段名无效(为什么提示数据流量不足)

  • 滴滴出行有7座车吗(滴滴出行有7座客车吗)

    滴滴出行有7座车吗(滴滴出行有7座客车吗)

  • 快手作品不显示时间(快手作品不显示点赞人)

    快手作品不显示时间(快手作品不显示点赞人)

  • 快手戳一下什么意思(快手戳一下干嘛用的)

    快手戳一下什么意思(快手戳一下干嘛用的)

  • 隔空投送传输失败原因(隔空投送传输失败怎么办)

    隔空投送传输失败原因(隔空投送传输失败怎么办)

  • cad标题栏如何设置(cad2016标题栏)

    cad标题栏如何设置(cad2016标题栏)

  • 线下门店为什么需要小程序(线下门店为什么不卖网球鞋)

    线下门店为什么需要小程序(线下门店为什么不卖网球鞋)

  • 电脑中的隐藏分区有什么用(隐藏分区怎么打开)

    电脑中的隐藏分区有什么用(隐藏分区怎么打开)

  • 马齿苋的功效与作用,马齿苋图片(马齿苋的功效与作用的功能与主治与用量)

    马齿苋的功效与作用,马齿苋图片(马齿苋的功效与作用的功能与主治与用量)

  • Echarts图表自适应?你可以这样做(echarts图大小设置)

    Echarts图表自适应?你可以这样做(echarts图大小设置)

  • JSP中的JSTL 标签库(jsp标签大全)

    JSP中的JSTL 标签库(jsp标签大全)

  • 应税劳务销售额怎么算
  • 收到退税如何记账
  • 窗帘属于固定资产
  • 通过网络手段获取用户行为的方法
  • 施工企业挂靠账务处理怎么做
  • 应纳税所得额就是企业所得税吗
  • 预收账款缴税的计算公式
  • 对供应商罚款通知单怎么写
  • 模具可以申请专利吗
  • 票据追索权向谁追索
  • 异地施工需要缴纳什么税
  • 个体户办营业执照需要什么证件和材料
  • 跨年度取得增值税发票
  • 金融保险定义
  • 增值税发票过期了,对方可以重开吗
  • 小规模纳税人季报需要报什么
  • 建造合同中甲供材选择一般计税还是简易计税更省税?
  • 携税宝可以不买吗
  • 增值税发票当期能抵扣吗
  • 电梯的运行与维护
  • 福利性补贴包括哪些
  • 免税的发票可以用来抵税吗
  • 因为质量问题
  • 赠送礼品的具体做法有许多技巧和讲究大致涉及
  • 在建工程会计账务处理是否有利润表
  • 超市发购物卡给员工会计分录
  • 公司设计费属于什么费用
  • 腾讯手游助手如何隐藏键位
  • php实现的一致性是什么
  • 纯净版 win10
  • 鸿蒙可以看小电影吗
  • 以前年度应扣未扣支出
  • 计提消费税的会计科目
  • wordpresscom
  • 通信原理简明
  • Vue Router4 ,prams 传参失效和报错问题
  • erp面试题目100及最佳答案
  • vue router 路由参数
  • 房租发票需要写备注吗
  • python导入模块的本质
  • mysql数据查询慢
  • 结转成本类账户及税金及附加到本年利润
  • 公司实行全成本核算工资怎么算
  • 货物已发出可以退款吗
  • 报关单金额大于出口发票金额
  • 单位交社保怎么取消居民医保
  • 职工福利费汇算清缴
  • 损益类科目如何记忆
  • 收到上月已付款的材料
  • 工程结算价超过合同价10%
  • 免税店为什么没有发票
  • 预包装食品加工及销售营业执照图片
  • 为什么要挂靠其他劳务派遣公司?有什么利弊?
  • 小规模发票跨月冲红税款可以退回吗
  • 私营公司预收账款怎么算
  • sqlserver重命名表名
  • sqlserver的基本语句
  • ubuntu安装后怎么启动
  • 怎么把硬盘安装到电脑上
  • 安装centos7.0
  • win8怎么查看ip地址
  • win7系统运行红警黑屏有声音
  • js正则用法
  • opengl 渲染yuv
  • nodejs连接mongodb副本集
  • js 函数写法
  • jquery设置禁用
  • javascriptz
  • python 嵌套
  • jquery版本区别
  • ubuntu没有xauthority
  • jquery js区别
  • js定义数据类型
  • jquery的validate前端表单验证
  • 纳税人虚假纳税申报
  • 非涉密网络严禁什么
  • 成品油消费税税目
  • 3.0t交强险
  • 什么督导组词
  • 季度财务会计报告怎么写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设