位置: 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例)

  • 华为gt3怎么取消接电话功能(华为gt3怎么取消微信提醒)

    华为gt3怎么取消接电话功能(华为gt3怎么取消微信提醒)

  • thinkpad键盘上的红点有什么作用(thinkpad键盘背光灯怎么开)

    thinkpad键盘上的红点有什么作用(thinkpad键盘背光灯怎么开)

  • 手滑点赞马上取消别人能看到吗(手滑点赞马上取消别人能看到吗小红书)

    手滑点赞马上取消别人能看到吗(手滑点赞马上取消别人能看到吗小红书)

  • 苹果11感觉画质模糊怎么解决(苹果11感觉画质模糊)

    苹果11感觉画质模糊怎么解决(苹果11感觉画质模糊)

  • 淘宝怎么看评价过的订单(淘宝怎么看评价过的内容)

    淘宝怎么看评价过的订单(淘宝怎么看评价过的内容)

  • 华为荣耀30s怎么设置返回键(华为荣耀30s如何)

    华为荣耀30s怎么设置返回键(华为荣耀30s如何)

  • 优酷花芝卡是什么意思(优酷花之卡怎么查看)

    优酷花芝卡是什么意思(优酷花之卡怎么查看)

  • 用户数据是什么意思(用户数据是啥意思)

    用户数据是什么意思(用户数据是啥意思)

  • 三极管在电路中有哪些作用(二极管的工作原理)

    三极管在电路中有哪些作用(二极管的工作原理)

  • 微信九宫格输入法怎么设置(微信九宫格输入法)

    微信九宫格输入法怎么设置(微信九宫格输入法)

  • 视频源格式错误怎么解决(视频源格式错误怎么办qq浏览器)

    视频源格式错误怎么解决(视频源格式错误怎么办qq浏览器)

  • ipadpro 10.5支持快充吗(ipad pro10.5能快充吗)

    ipadpro 10.5支持快充吗(ipad pro10.5能快充吗)

  • 手机恢复出厂后照片还有吗(手机恢复出厂后如何恢复数据)

    手机恢复出厂后照片还有吗(手机恢复出厂后如何恢复数据)

  • mg4j2cha是6s吗(mg4j2j/a是什么版本)

    mg4j2cha是6s吗(mg4j2j/a是什么版本)

  • 华硕主板硬盘模式achi和ide在哪改(华硕主板硬盘模式ahci和ide在哪改)

    华硕主板硬盘模式achi和ide在哪改(华硕主板硬盘模式ahci和ide在哪改)

  • xls怎么算百分比(excel2016怎么算百分比)

    xls怎么算百分比(excel2016怎么算百分比)

  • usb设计灵感是什么(usb设计规范)

    usb设计灵感是什么(usb设计规范)

  • pptv怎么上传视频

    pptv怎么上传视频

  • 小米ai音箱可以连接几个蓝牙(小米ai音箱可以直接连手机蓝牙嘛)

    小米ai音箱可以连接几个蓝牙(小米ai音箱可以直接连手机蓝牙嘛)

  • 苹果手机为什么下载不了soul(苹果手机为什么连不上wifi)

    苹果手机为什么下载不了soul(苹果手机为什么连不上wifi)

  • 飞行模式下别人打电话有记录吗?(飞行模式下别人发短信我会收到吗)

    飞行模式下别人打电话有记录吗?(飞行模式下别人发短信我会收到吗)

  • oppo手机有隔空投送吗(oppo手机隔空刷视频)

    oppo手机有隔空投送吗(oppo手机隔空刷视频)

  • 7p和8p屏幕通用吗(7p屏幕和8p屏幕通用吗)

    7p和8p屏幕通用吗(7p屏幕和8p屏幕通用吗)

  • 淘票票如何开发票(淘票票在哪里打开)

    淘票票如何开发票(淘票票在哪里打开)

  • 应税劳务的主要成本包括
  • 车船使用税2021
  • 预计负债的会计核算
  • 其他应收款增加银行存款减少的原因
  • 减免税款年末有余额吗
  • 收到红字发票如何申报增值税?
  • 广告公司如何申报文化事业建设税
  • 工业会计成本核算分录
  • 残保金上年在职工资总额
  • 差额事业单位发放科研奖励记账
  • 润滑油经销需要什么资质
  • 个体广告用去税务报账吗?
  • 未盖发票章怎么办
  • 地税的发票
  • 增值税普通发票和专用发票有什么区别
  • 每月免税10万是什么意思
  • 小规模银行存款多笔小金额财务费用可以合并记账吗?
  • 耕地占用税与土地出让金
  • 利得入什么科目
  • 公司法人如何从公司提钱
  • 怎么向个体工商户贷款
  • 金税盘开票信息修改
  • 门窗属于建材吗还是材料
  • 支票作废了需要什么材料
  • 对个体工商户个人的认识
  • 代收代付快递货款需要发票吗,中间差额服务费怎么开票?
  • 电动汽车的出路在哪里
  • 补报的年报可以更改吗
  • apple mac 系统
  • 固定资产一次性扣除后第二年账务处理
  • 新办企业税务服务
  • 腾讯手游助手如何退出登录
  • bios怎么更改硬盘
  • PHP:xml_parser_create()的用法_XML解析器函数
  • 公司股东转账进公司账户,会计分录
  • 个人补缴的养老全部划入个人账户
  • config.cfg是什么文件
  • 漏记收入 罚款
  • nlp图
  • 应付职工薪酬包括个人社保和个税吗
  • 租入固定资产改建支出何时开始摊销
  • 武侯祠红墙在哪个门
  • 总结一些php中好用的软件
  • php实现的常规正态分解
  • h5页面内嵌到微信
  • 工商罚款怎么入账
  • progress的用法及短语
  • Windows 10 python 3.9安装运行Mockingbird--拎包入住功略
  • audit install success
  • vgextend命令作用及含义
  • python函数的默认值
  • 企业的应交税金一般通过什么科目核算
  • 股本金退出要交税吗?
  • 劳务公司成本怎么算
  • python django做网页
  • 收据的种类有哪些
  • 微信小程序 滚动 变色
  • 生产企业购入原材料
  • 待报解啥意思
  • 跨年银行回单怎么入账
  • 中级会计报名必须用电脑吗
  • 税前扣除怎么理解
  • 投资性房地产讲解
  • 收到??
  • 一个简单的群规怎么写
  • win8驱动在哪个文件夹
  • office进程
  • linux系统启动步骤
  • 网站出现问题怎么办
  • node connect
  • shell发送报文
  • 如何进行js 的测试
  • js写贪吃蛇什么水平
  • ubuntu20.04中文
  • python汉字字符
  • python闭包的条件
  • EasyUI Pagination 分页的两种做法小结
  • 电子发票查询系统手机查询
  • 现在德国的普通话怎么样
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设