百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

安装Vue.js,搭建Vue环境(vue的安装步骤)

ccwgpt 2025-05-03 12:48 1 浏览 0 评论

一、Vue 开发环境:

Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

npm::Nodejs下的包管理器

webpack: Vue的模板文件。把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

vue-cli::用户生成Vue的脚手架。

二、Vue 环境搭建:

1.安装node.js:

从node.js官网下载并安装node,安装过程很简单,一直默认。

npm 版本需要大于3.0,如果低于此版本需要升级它。

查看版本:

node -v

npm -v

升级 npm:

npm install npm -g

2.使用淘宝NPM镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后可以用cnpm代替npm来安装依赖包

如果安装失败,可以npm cache clean清理缓存,重新安装。

三、Vue 安装vue-cli脚手架构建工具

cnpm install --global vue-cli

判断是否安装成功:

vue -V

卸载vue-cli脚手架

cnpm uninstall --global vue-cli

四、Vue 使用vue-cli构建项目

vue init webpack my-project

my-project是项目名称,接下来会进行一些设置。

参考:

arget directory exists. Continue? (Y/n) 直接回车默认(然后会下载模板,这里可能需要连代理)

Project name (vue-test) 直接回车默认

Project description (A Vue.js project) 直接回车默认

Author 直接回车默认

Install vue-router? 直接回车默认(安装路由)

Use ESLint to lint your code? No(严格代码检测)

pick an eslint preset. 默认Standard

set up unit tests with karma + mocha?No(单元测试不需要)

set up e2e tests with Nightwatch?No(单元测试不需要)

五、Vue 安装依赖

进入项目目录:

cd my-project

安装依赖:

cnpm install 或 npm install

项目结构里,多了一个node_modules文件夹

六、Vue 是否搭建成功

启动编译项目:npm run dev

在浏览里输入:localhost:8080(默认端口为8080)

七、Vue 发布项目

npm run build

八、安装Vue组件

一、AJAX(axios)安装

npm install axios --save

二、AJAX参数转换(qs)安装

npm install qs --save

三、Vuex 安装:

npm install vuex --save

四、前端框架(vue-beauty)安装

npm install vue-beauty --save

五、前端手机框架(Mint UI)安装

npm install mint-ui --save

六、前端框架(Element UI)安装

npm install element-ui --save

七、前端框架(Ant-design-vue)安装

npm install ant-design-vue --save

相关推荐

详解DNFSB2毒王的各种改动以及大概的加点框架

首先附上改动部分,然后逐项分析第一个,毒攻掌握技能意思是力量智力差距超过15%的话差距会被强行缩小到15%,差距不到15%则无效。举例:2000力量,1650智力,2000*0.85=1700,则智力...

通篇干货!纵观 PolarDB-X 并行计算框架

作者:玄弟七锋PolarDB-X面向HTAP的混合执行器一文详细说明了PolarDB-X执行器设计的初衷,其初衷一直是致力于为PolarDB-X注入并行计算的能力,兼顾TP和AP场景,逐渐...

字节新推理模型逆袭DeepSeek,200B参数战胜671B,豆包史诗级加强

梦晨发自凹非寺量子位|公众号QbitAI字节最新深度思考模型,在数学、代码等多项推理任务中超过DeepSeek-R1了?而且参数规模更小。同样是MoE架构,字节新模型Seed-Thinkin...

阿里智能化研发起飞!RTP-LLM 实现 Cursor AI 1000 token/s 推理技术揭秘

作者|赵骁勇阿里巴巴智能引擎事业部审校|刘侃,KittyRTP-LLM是阿里巴巴大模型预测团队开发的高性能LLM推理加速引擎。它在阿里巴巴集团内广泛应用,支撑着淘宝、天猫、高德、饿...

多功能高校校园小程序/校园生活娱乐社交管理小程序/校园系统源码

校园系统通常是为学校、学生和教职工提供便捷的数字化管理工具。综合性社交大学校园小程序源码:同城校园小程序-大学校园圈子创业分享,校园趣事,同校跑腿交友综合性论坛。小程序系统基于TP6+Uni-app...

婚恋交友系统nuiAPP前端解决上传视频模糊的问题

婚恋交友系统-打造您的专属婚恋交友平台系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包...

已节省数百万GPU小时!字节再砍MoE训练成本,核心代码全开源

COMET团队投稿量子位|公众号QbitAI字节对MoE模型训练成本再砍一刀,成本可节省40%!刚刚,豆包大模型团队在GitHub上开源了叫做COMET的MoE优化技术。COMET已应用于字节...

通用电气完成XA102发动机详细设计审查 将为第六代战斗机提供动力

2025年2月19日,美国通用电气航空航天公司(隶属于通用电气公司)宣布,已经完成了“下一代自适应推进系统”(NGAP)计划下提供的XA102自适应变循环发动机的详细设计审查阶段。XA102是通用电气...

tpxm-19双相钢材质(双相钢f60材质)

TPXM-19双相钢是一种特殊的钢材,其独特的化学成分、机械性能以及广泛的应用场景使其在各行业中占有独特的地位。以下是对TPXM-19双相钢的详细介绍。**化学成分**TPXM-19双相钢的主要化学成...

thinkphp6里怎么给layui数据表格输送数据接口

layui官网已经下架了,但是产品还是可以使用。今天一个朋友问我怎么给layui数据表格发送数据接口,当然他是学前端的,后端不怎么懂,自学了tp框架问我怎么调用。其实官方文档上就有相应的数据格式,js...

完美可用的全媒体广告精准营销服务平台PHP源码

今天测试了一套php开发的企业网站展示平台,还是非常不错的,下面来给大家说一下这套系统。1、系统架构这是一套基于ThinkPHP框架开发的HTML5响应式全媒体广告精准营销服务平台PHP源码。现在基于...

一对一源码开发,九大方面完善基础架构

以往的直播大多数都是一对多进行直播社交,弊端在于不能满足到每个用户的需求,会降低软件的体验感。伴随着用户需求量的增加,一对一直播源码开始出现。一个完整的一对一直播流程即主播发起直播→观看进入房间观看→...

Int J Biol Macromol .|交联酶聚集体在分级共价有机骨架上的固定化:用于卤代醇不对称合成的高稳定酶纳米反应器

大家好,今天推送的文章发表在InternationalJournalofBiologicalMacromolecules上的“Immobilizationofcross-linkeden...

【推荐】一款开源免费的 ChatGPT 聊天管理系统,支持PC、H5等多端

如果您对源码&技术感兴趣,请点赞+收藏+转发+关注,大家的支持是我分享最大的动力!!!项目介绍GPTCMS是一款开源且免费(基于GPL-3.0协议开源)的ChatGPT聊天管理系统,它基于先进的GPT...

高性能计算(HPC)分布式训练:训练框架、混合精度、计算图优化

在深度学习模型愈发庞大的今天,分布式训练、高效计算和资源优化已成为AI开发者的必修课。本文将从数据并行vs模型并行、主流训练框架(如PyTorchDDP、DeepSpeed)、混合精度训练(...

取消回复欢迎 发表评论: