项目实训（一）Vue配置

已于 2024-06-16 18:39:54 修改
阅读量340 收藏
点赞数
分类专栏： 项目实训 文章标签： vue
于 2021-07-31 00:08:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyr___/article/details/119221669
版权
这篇博客详细介绍了如何配置Vue项目，包括全局安装Vue、Webpack，安装Vue脚手架，创建Vue项目并运行，以及在IDEA中配置Vue插件和设置运行配置。
摘要由CSDN通过智能技术生成

Vue配置
注意使用管理员身份运行命令行

一、安装Vue

npm install vue -g
安装完成后输入 vue -V运行

二、安装webpack

npm install webpack -g
安装完成后webpack -v 查看版本号

三、安装脚手架
npm install -g vue-cli

四、创建Vue项目
创建一个文件夹放置项目，cd到文件夹中

vue init webpack 项目名

完成后cd到项目中，npm run dev运行
访问http://localhost:8080看到demo

五、IDEA配置
File–>Settings–>Plugins 搜索vue安装
在这里插入图片描述
用IDEA打开工程
Run–>Edit Configurations
![在这里插入图片描述](https://img-blog.csdnimg.cn/1439997918d64bb7bc8fef69ae212a6c.png
点击OK，就可点击运行
在这里插入图片描述

cyr___
关注
专栏目录
vue 项目实战一
qq_38127637的博客
10-17 709
本人是一个vue爱好者，今天就从项目第一步开始来实现我们的vue后台管理开发 首先 大家vue项目是运行在nodejs环境，安装我这里就不阐述了。大家根据提示去安装 然后就我们就开始构建我们的第一个vue项目了 进入黑窗口模式 然后进去我们想要放项目的盘 构建 接下来就是等待然后根据提示一步步确定 从ESLint 这一步开始 我都选择NO 接下来就等着项目构建完成了 到了这一步就代表构建完成了 黄色字体提示你 进去my项目目录 通过npm run dev 去启动vue项...
Vue.js项目实训
weixin_44805285的博客
05-28 3977
课上写了一个项目实训作业，历经千辛万苦终于弄完，记录以下，并且分享给大家。 一、基础工作 首先要保证你的webpack基础配置正确并且安装脚手架vue-cli，这个前期工作挺艰难的，我配的时候花了几个钟才配好。 二、创建项目 按着书上的配置进行。 三、过程 四、测试 在vscode中，保存一个txt文件在项目那，然后Ctrl+Shif+p打开外部终端，输入npm run serve启动项目，如果项目启动成功，在谷歌浏览器中输入本地域名，“http://localhost:8080/，可以打开谷歌浏览器的
(vue)项目实践
黑胡子大叔的博客
11-24 2942
项目实践小记笔记项目构建项目别名网络请求封装配置路由\构建视图正式开发组件拆分组件一组件二点击切换li标签颜色的实现组件三 小记 终于可以进入实践阶段了 笔记 项目构建 项目别名 完成项目构架后，对项目别名，要不后面改的东西太多 后续的使用如下： js中： html中： ~别名 css中： 网络请求封装 其中网络模块进行了进一步的封装 基础的网络请求封装在request.js中 import axios from 'axios' export function request(config){
计算机毕业设计django+vue+Vue实习实训管理系统【开题+论文+程序】
最新发布
sheji306的博客
07-25 1443
该系统将成功整合并管理学生、教师、实习任务、实习计划、实习日志、实习报告、实习成绩、实习基地、新闻信息、留言信息等各项实习实训相关数据，为师生提供一个便捷、高效的实习实训管理平台。随着教育改革的不断深入和信息技术的发展，实习实训作为高等教育中不可或缺的一环，其管理方式和效率的提升成为了亟待解决的问题。因此，开发一个基于Django和Vue框架的实习实训管理系统，旨在通过信息化手段优化实习实训管理流程，提升管理效率，促进教育资源的合理配置与利用，为师生提供更加便捷、高效的实习实训服务。
项目实训-vue（四）
weixin_64015449的博客
05-30 1098
在本次的创新实训中，我们所做的项目是多模态的医疗图像辅助诊断系统，其中用户端是通过小程序进行开发的，而医生端以及医院系统是通过web页面的方式开发的。在进行医院系统开发时主要使用的框架是Vue+element ui，使用 Vue 进行开发，因为它提供响应式数据绑定、组件化开发、易学易用且性能优化的优势。结合 Element UI，可以利用其丰富的组件库、一致的设计风格和详细的文档，快速构建高质量的企业级应用，显著提升开发效率和用户体验。
实训-vue框架
qq_44737958的博客
10-13 524
程序开发方式 程序=框架+框架 后端=springMvc+mybatis+spring 前端=vue+axios vue的标签管理功能 程序员写一个配置对象，在配置对象中配置标签的id,然后再启动框架，框架中从配置对象中找标签id,根据id创建一个js对象，再设置js对象的背景色。 function Vue(config){ 1.从配置对象中找标签 2.根据标签，创建一个js对象 3.设置js对象的背景颜色 } <!DOCTYPE html> <html> <head&gt
项目实训代码.zip
05-28
【Vue.js项目实训】是一个针对前端开发人员的实践性学习环节，主要使用Vue.js这一流行的JavaScript框架进行。Vue.js是一个轻量级的、基于组件的前端框架，它以数据驱动和声明式渲染著称，使得构建用户界面变得更加...
毕设&课设&项目&实训-基于webpack 4.X配置vue项目脚手架.zip
02-08
可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，...
《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx
06-15
《Vue.js前端框架技术与实战》是一门针对计算机及相关专业的必修或选修课程，旨在教授学生Vue.js这一流行的前端框架。课程分为理论和实践两部分，共计64学时，其中48学时为理论教学，16学时为上机实践。这门课程不仅...
实训项目-vue常用指令在项目中的应用、vantui组件的使用
m0_71814235的博客
06-30 201
实训项目-vue常用指令在项目中的应用、vantui组件的使用
Vue--实训知识点
老男孩的粉丝团
07-28 292
day02 vue.js 思维：mvvm 数据渲染：类似mvc，用于java端 MVC：model:pojo view:jsp; control:servlet，把model放进作用域，转发页面 mvvm:类似于前端的mvc 用作用域的方式动态加载数据，支持js对数据修改 model页面加载数据 view：html vm:数据控制 引入vue.js new Vue({ }) 1、页面引入方式，用 单价： 总价：{{sum}} {{getsum()}}
vue_project-wm:Vue的实践项目——仿饿了么外卖
05-30
仿饿了么的vue项目 项目启动： npm install 下载模块 npm start 启动项目 下载配合该项目的后台项目vm-server util的sms_util中加入自己使用的容联云id、令牌等信息，此处因个人信息并未上传 之后步骤同1、2，启动后台服务器 描述 目前是无错误的稳定版本，已将eslint的提示错误也修正了。 第三方库的使用： mintUI构建界面，better-scroll库实现页面滑动 使用vue-router开发单页应用 使用axios向后台发送请求，使用mockjs模拟后台数据接口 使用vuex管理组件共享数据 已实现的功能有： 账号密码登陆或手机号验证码登陆 首页轮播、商家列表及总购物车 商家商品、评价、信息界面展现，实现购物车加购功能 刷新购物车数据保存的功能 也许还有一些错误或者可以优化的地方，欢迎和我交流，共同学习，一起改进。
【暑期项目实训】Vue 4-1
RoNeV的博客
07-25 137
4-1
Vue简单练习项目
A_Common_Man的博客
05-10 1345
涉及到computed计算属性，数组驱动视图，es6数组的求和方法，vue的相关指令和修饰符等知识点。实现简单的增加和删除功能。
创新实训【6】——创建vue前端项目
weixin_43710646的博客
04-06 248
项目介绍 本系统为山东大学舆情分析系统，采取网页展示，使用vue构建前端项目。本篇记录创建前端项目的准备过程。 使用工具 vscode 具体步骤 打开vue项目管理器 在cmd中输入vue ui。 输入上面网址http://localhost:8000,打开vue项目管理器。 创建项目 在创建中选择自己项目所在的文件夹，点击在此创建新项目。 在创建新项目中输入文件名，包管理器选择npm，选择下一步。 预设选择手动，下一步。 使用配置文件，打开Router路由，使用配置文件，关掉Form
Vue项目实战
老余的博客
02-20 3410
新建common组件文件夹,新建对应的Header、Footer、Menu这些文件,然后完成Menu菜单,并且新建学生列表、作业列表、信息列表、考勤管理页面，并且配置路由，之后去写面包屑组件。添加 --legacy-peer-deps 指令在下载对应版本的指令后，保证各个依赖之间的不同版本的共存；然后在axios的二次封装的请求头里携带上token,至此,我们的axios二次封装和跨域完美解决。3、开需求分析会（甲方、SE、开发、测试）简单的进行首页、登录页、404页面的搭建。
山东大学软件学院2022项目实训——（一）vue环境的搭建
m0_51588039的博客
04-19 1143
环境的配置： 首先需要需要下载npm包管理器，在官网即可下载： http://nodejs.cn/download/ 各种帖子中有相关的下载安装教程，不再赘述。下载安装后使用cmd控制台，输入npm -v和node -v命令查看版本，检验安装是否成功。 官网上有相关vue的安装教程，使用npm，使用npm install -g @vue/cli命令，即可安装vue。 官网网址： https://cn.vuejs.org/index.html 在合适位置创建一个文件夹，在文件夹内打开cmd。 使用命令vue
项目实训：登录注册——前端实现与交互（vue）
m0_61661094的博客
05-30 1399
登陆注册，前端实现与交互
做一个vue的实训项目
06-01
好的，以下是一个简单的 Vue 实训项目： 项目名称：留言板 项目描述： 该项目是一个基于 Vue 的留言板应用。用户可以通过填写表单发布留言，查看留言列表，并删除自己发布的留言。 功能需求： 1. 用户可以在表单中填写姓名和留言内容。 2. 用户可以点击“发布”按钮将留言发布到留言列表中。 3. 用户可以查看留言列表，每条留言包括姓名和内容，并且按发布时间倒序排列。 4. 用户可以删除自己发布的留言。 技术实现： 1. 使用 Vue CLI 创建项目。 2. 使用 Vuex 管理状态。 3. 使用 Vue Router 实现路由跳转。 4. 使用 Axios 发送请求。 5. 使用 ElementUI 实现界面。 项目结构： ``` |-- src |-- components |-- MessageForm.vue // 留言表单组件 |-- MessageList.vue // 留言列表组件 |-- router |-- index.js // 路由配置 |-- store |-- index.js // 状态管理器配置 |-- views |-- Home.vue // 首页视图 |-- App.vue // 根组件 |-- main.js // 入口文件 ``` 以上是一个简单的 Vue 实训项目，你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值