首页 > 其他分享 >Vue项目简介

Vue项目简介

时间:2024-03-17 17:29:18浏览次数:25  
标签:vue 项目 简介 element nginx 点击 Vue 组件

Vue项目的创建: 

1)在桌面上创建一个Vue文件夹,打开后在搜索栏中 输入cmd,打开命令窗,输入 vue ui  调出图形化界面。

2)创建一个项目

3)点击手动 

4)将路由打开router

5)vue版本选择为2X,语法检测选择第一项。

6)创建好项目之后,直接用vscode打开vue文件夹,以下为所创建的文件夹目录介绍。

7)运行项目

在项目终端中输入:  npm run serve   即可运行项目。

点击项目中的package.jason 即可看到左下栏目中出现 NPM脚本,点击运行。 

8)修改端口号

在vue.config.js文件中增加devServer:{

port: 7000

}

在命令栏中按下CTRL+C 输入Y 即可停止服务器,然后再重启即可。

Vue组件库Element: 

1)首先在当前工程目录中安装element组件库

在项目终端中输入 npm install [email protected],即可将其安装到当前项目中。 

2)将element ui组件库引入main.js中,然后在Views中创建新的文件element,将所有组件elementView放入该目录下。

在默认情况下,系统展示的是App.vue组件下的内容,想要展示自己所创建组件的内容,首先,将App.vue组件中的内容删除,只留下框架。

在div中输入<element-   .编译器会自动补全。 

 

按下Ctrl+Alt+L  能够将element文档中复制下来的代码进行格式话,使得代码更加的美观。 

3)要在vue项目中使用Axios请求,首先要安装AXois, 需要使用时,再导入。

 

vue路由 

 

 

 

打包以及部署: 

1)打包

在NPM脚本栏中点击build即执行打包操作,执行完成后会生成一个dist目录,可以打开文件夹查看。

 

2)部署

 

 

 

nginx端口号默认为80端口,如果点击nginx.exe没有反应的话,那么点击conf文件夹中的nginx.conf,打开 将80改为其它未被占用的端口即可90。

 

打开后,在任务管理器中搜索ngnix,查看有没有nginx的进程,如果能看到进程,说明nginx已经在运行,那么打开浏览器,输入网址 localhost: 90 回车即可。

标签:vue,项目,简介,element,nginx,点击,Vue,组件
From: https://blog.csdn.net/LYH_010312/article/details/136691457

相关文章

  • 基于SpringBoot+Vue实现的二手交易系统
    系统介绍校园二手交易网站是一种专门针对有二手物品交易需求用户的二手交易的网站。它的设计和开发主要是为了满足用户之间的二手物品交易需求,方便大家在线买卖二手物品。近年来,随着互联网技术的发展,人们越来越喜欢在线购物,二手交易也不例外。功能模块图技术选型开发工......
  • 项目整合管理
    整合管理概述项目整合管理包含识别、定义、组合、统一和协调项目管理过程组的各个过程和项目管理活动,项目整合管理贯穿项目始终。项目整合管理的目标包括:1.资源分配;2.平衡竞争性需求;3.研究各种备选方法;4.裁剪过程以实现项目目标;5.管理各个项目管理知识领域之间的依......
  • Vue3 组件通信方式小结
    也是零零散散用vue3来搞一些前端的页面,每次在组件通信,主要是传数据这块总是忘记,大多无非父传子,子传父等情况,这里再来做一个小结.父传子Props最常见的就是父组件给子组件传递数据,不论是传字符串也好,还是数组,对象,函数等,都可以通过属性传值的方式,子组件......
  • 【SpringBoot】头条新闻项目实现CRUD登录注册
    文章目录一、头条案例介绍二、技术栈介绍三、前端搭建四、基于SpringBoot搭建项目基础架构4.1数据库脚本执行4.2搭建SprintBoot工程4.2.1导入依赖:4.2.2编写配置4.2.3工具类准备4.3MybatisX逆向工程五、后台功能开发5.1用户模块开发5.1.1jwt和token介绍5.1.......
  • 基于springboot实现大学生租房平台项目设计与实现演示【附项目源码+论文说明】
    基于springboot实现大学生租房平台的设计与实现演示摘要互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对大学生租房信息管理混乱,出错率高,信息安全性差,劳动强......
  • 基于SpringBoot实现网上订餐系统项目演示【附项目源码+论文说明】
    基于SpringBoot的网上订餐系统演示摘要随着我国经济的飞速发展,人们的生活速度明显加快,在餐厅吃饭排队的情况到处可见,近年来由于新兴IT行业的空前发展,它与传统餐饮行业也进行了新旧的结合,很多餐饮商户开始通过网络建设订餐系统,通过专门的网上订餐系统,一方面节省了用户订餐......
  • 项目管理工具Maven(一)
    1.Maven的相关概念1.1为什么要用maven?在今天的Javaweb 开发领域,有大量的第三方框架和工具可以供我们使用。要使用这些jar包最简单的方法就是复制粘贴到WEB-INF/lib目录下。但是这会导致每次创建一个新的工程就需要将jar包重复复制到lib目录下,从而造成工作区中存......
  • 项目管理工具maven(五)-私服
    4.maven私服架构 4.1maven私服介绍    4.1.1私服介绍正式开发,不同的项目组开发不同的工程。maven-dao工程开发完毕,发布到私服maven-service从私服下载dao。公司在自己的局域网内搭建自己的远程仓库服务器,称为私服,私服服务器即是公司内部的maven远程仓库,......
  • Java毕业设计-200套基于Springboot+vue的毕设项目实战(源码+论文+演示视频)
    大家好!我是岛上程序猿,感谢您阅读本文,欢迎一键三连哦。......
  • 计算机毕业设计-200套基于Springboot的Java项目实战(附源码+论文+演示视频)
    大家好!我是职场程序猿,感谢您阅读本文,欢迎一键三连哦。......