位置: IT常识 - 正文

Vue.js安装与创建默认项目(详细步骤)(vue.js如何安装)

编辑:rootadmin
Vue.js安装与创建默认项目(详细步骤)

推荐整理分享Vue.js安装与创建默认项目(详细步骤)(vue.js如何安装),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:怎么安装vue.js,vue.js 安装,vue.js创建项目,vue.js部署,vue.js创建项目,vue.js如何安装,vue.js环境搭建,vue.js环境搭建,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

上一篇博文已经对Node.js的安装与配置进行了详细介绍,详见https://blog.csdn.net/qq_42006801/article/details/124830995

另外:文中项目存放的路径及项目名称可根据自身实际情况进行更改。

一、Vue.js简述

        Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。

二、搭建Vue脚手架1. 直接用 <script>标签引入

直接下载并用<script>标签引入,Vue 会被注册为一个全局变量。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2. 通过NPM安装Vue

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

2.1 安装Vue脚手架

在Cmd命令行窗口中输入如下命令安装Vue脚手架。

npm install @vue/cli -g

或者

cnpm install @vue/cli -g

当然前提是已安装配置了npm或者cnpm,如未安装可见博文:Node.js安装与配置(详细步骤)

Vue.js安装与创建默认项目(详细步骤)(vue.js如何安装)

执行cnpm install @vue/cli -g后如下图所示: 2.2 查看安装的Vue版本

cmd命令行窗口输入vue -V查看@vue/cli是否安装成功

vue -V

如下图所示,vue脚手架即安装成功

三、安装webpack及webpack-cli1.安装webpack

由于webpack5及以上的版本变动较大,所以如果是采用vue3创建vue项目,用webpack4的版本更能互相的兼容。此处安装webpack@4.42.0版本,命令如下:

cnpm install webpack@4.42.0 -g

安装成功后,cmd命令行窗口如下图所示:

2.安装webpack-cli

另外:由于webpack的版本需要webpack-cli一起配合使用,执行如下命令安装webpack-cli:

cnpm install webpack-cli -g

安装成功后,cmd命令行窗口如下图所示:

3.检查是否安装成功

cmd命令行窗口输入如下命令:

webpack -v

如下图所示,webpack和webpack-cli已经安装成功。

四、新建一个默认的Vue项目1.创建项目

首先进入【E:\codes\web】路径下(此处创建在E:\codes\web下,请根据自身实际情况更改),然后进入此文件夹的cmd命令行窗口。 执行如下命令创建一个名为【hello-vue】的Vue项目:

vue create hello-vue

点击回车后,会自动下载所需文件(包括node_modules),创建成功后如下图所示:

2.启动项目

首先进入【E:\codes\web\hello-vue】文件夹,然后进入此文件夹的cmd命令行窗口 执行如下指令运行该项目:

npm run serve

如上图项目启动成功,在浏览器打开http://localhost:8080/进行访问,效果如下图所示:

写在最后

本文链接地址:https://www.jiuchutong.com/zhishi/299613.html 转载请保留说明!

上一篇:做毕业设计,前端部分你需要掌握的6个核心技能(做毕业设计,前景如何)

下一篇:Python+chatGPT编程5分钟快速上手,强烈推荐!!!(python编程100例)

  • 非货币性资产交换补价大于25%的会计处理
  • etc开增值税票税率
  • 缴纳个人所得税怎么算
  • 电商行业会计核算的特点
  • 公司把股权转让给个人
  • 计提存货跌价准备的存货出售
  • 销售收入与营业费用的配比
  • 规划设计合同需要缴纳印花税吗为什么
  • 实收资本增加的印花税
  • 全年一次性奖金税率表
  • 小规模所得税税负率怎么计算
  • 增值税期初应补税额计算
  • 单位社保缴费基数怎么确定
  • 无形资产摊销以前年度摊多了
  • 小规模纳税人购置税控设备
  • 开立基本账户所需资料
  • 事业单位劳务派遣工作值得去吗
  • 固定资产折旧方法有几种
  • 外贸业务收境外人民币
  • 国内公司向境外公司借款
  • 小规模纳税人从哪里可以看出来
  • 增值税和消费税常用的公式
  • 营改增后企业要交哪些税
  • 总公司与分公司的账务处理销售
  • 预收账款期末余额在贷方
  • 2021年购买车辆的进项税能抵扣吗
  • 房地产土地增值税加计扣除20%
  • 个人所得税做账怎么做
  • 非正常损失和非正常损耗的区别
  • 投资类公司增资
  • 微信收款会计分录,然后提现有手续费
  • 电脑右下角弹窗广告怎么彻底清除
  • PHP:xml_set_default_handler()的用法_XML解析器函数
  • 事业单位固定资产计提折旧
  • php集成包
  • 固定资产内部抵消
  • 利润表中的收入是按什么确认的
  • 公司要交什么税个人卖给公司的二手车
  • 企业支付给员工的一次性伤残就业补助金计入哪项费用
  • 增值税专用发票怎么开
  • 弃置费用预计负债递延所得税怎么处理
  • 环境检测费计入什么科目
  • 目标检测yolov5
  • transformer模型包含哪些结构
  • cv计算机视觉定义
  • c++评测
  • 为什么盈余公积减少,未分配利润增加
  • 特殊银行账户上限
  • 税前利润弥补是什么意思
  • 电汇汇款方式的基本流程
  • 哪个命令可以对mysql数据库做完全备份
  • 金税四期一般纳税人开票先票后款行吗
  • 什么人可以申请免税
  • 应收账款调增调减?
  • 疫情期间统筹部工作总结
  • 公司交的物业费计入什么会计科目
  • 销项负数发票给对方哪一联
  • 直接人工成本项目
  • 明细分类账怎么打印
  • 会计软件什么范围分为单用户和多用户呢
  • 怎样计算存款利息?
  • 将sql语句的执行状态传递给主语言的是
  • Vista 新命令收集整理完整版
  • win7网页无法访问
  • ubuntu pdf编辑器
  • nvvsvc.exe是什么进程
  • win10系统本地用户和组怎么添加
  • string获取文件名
  • 安卓listview用法
  • app的架构设计
  • 打开指定文件夹命令
  • nodejs发送post请求socket hand up
  • 一波JavaScript日期判断脚本分享
  • 安装node-sass报错
  • jquery鼠标移动触发
  • 地税局 业务
  • 税务软件服务商
  • 深圳国委
  • 税务总局纪律作风
  • 湖北省税务局税务纪检委员时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设