Web 前端 之 Vue 脚手架环境的安装搭建/并创建Vue脚手架工程简单整理(内含:国内环境安装搭建 下载速度慢 的简单解决办法)
Web 前端 之 Vue 脚手架环境的安装搭建/并创建Vue脚手架工程简单整理(内含:国内环境安装搭建 下载速度慢 的简单解决办法)
目录
Web 前端 之 Vue 脚手架环境的安装搭建/并创建Vue脚手架工程简单整理(内含:国内环境安装搭建 下载速度慢 的简单解决办法)
一、简单介绍
二、实现原理
三、注意事项
四、安装脚手架环境具体步骤
五、创建 Vue 脚手架工程
附加:
一、如果npm在国内的网络环境下可能会比较慢,解决方案
一、简单介绍
Web 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。
本节介绍,Web 前端开发中使用 Vue 脚手架时,环境的安装搭建,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。
二、实现原理
安装
1、使用 node 的相关命令进行操作者(如果没有安装 node ,需要先安装)
2、npm install -g @vue/cli 安装 (注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上)
3、npm install -g @vue/cli-init 安装初始化的一些东西
创建
1、npm init 初始化
2、vue init webpack test_demo创建 test_demo使用
3、cd test_demo / npm run dev 运行,开启网页浏览
三、注意事项
1、安装 vue-cli 脚手架目前需要node版本为 v4.0 以上
2、npm install -g @vue/cli 加-g是安装到全局
四、安装脚手架环境具体步骤
1、如果没有安装 node,可以在百度搜索 node.js,点击进入官网
2、根据需要选择安装版本即可
3、双击下载的安装包进行安装
4、根据需要选择安装路径,然后下一步
5、根据需要设置,或者一路 Next ,然后点击 install 安装
6、安装 node 完成后,选择一个文件夹作为环境安装目录,cmd 打开任务窗口,并切换到该目录文件夹
7、使用命令npm install -g @vue/cli 进行安装,一段时间后,安装OK即可
命令:npm install -g @vue/cli
8、使用命令npm install -g @vue/cli-init 进行安装,一段时间后,安装OK即可
命令:npm install -g @vue/cli-init
五、创建 Vue 脚手架工程
1、使用 npm init 初始化下环境,文件夹中生成一个 文件
命令:npm init
2、使用 vue init webpack test_demo 创建工程 test_demo,然后多个 test_demo 工程目录
命令:vue init webpack test_demo
3、test_demo 工程目录如下,其中 src 目录如下
4、执行 最后提示的两个命令
然后,可以在网页输入 http://localhost:8080 得到如下网页
如果网页无法正常显示,查看 8080 端口是不是被其他应用占用
5、这里 test_demo 其实就可以作为一个模板工程使用了
附加:
一、如果npm在国内的网络环境下可能会比较慢,解决方案
参考博文:vue-cli 脚手架 安装 - 雅昕 - 博客园
使用淘宝镜像:
1、官方网址:淘宝 NPM 镜像;
2、安装:npm install cnpm -g --registry=https://registry.npm.taobao.org; 注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;
3、注意,cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。
4、如何更新npm的方法: 可以使用 npm install -g npm 来更新版本
Web 前端 之 Vue 脚手架环境的安装搭建/并创建Vue脚手架工程简单整理(内含:国内环境安装搭建 下载速度慢 的简单解决办法)相关推荐
- JDK下载、安装、运行第一个Java程序的过程以及javac不是内部或外部命令的解决办法
JDK下载.安装.运行第一个Java程序的过程以及javac不是内部或外部命令的解决办法 1.下载和安装JDK开发环境 下载地址:https://www.oracle.com/technetwork/ ...
- python安装pymssql等包时出现microsoft visual c++ 14.0 is required问题无需下载visualcppbuildtools的解决办法...
python安装pymssql等包时出现microsoft visual c++ 14.0 is required问题无需下载visualcppbuildtools的解决办法 如题,在练习python ...
- web前端全栈0基础到精通(祺)vue 01
一.vue的基本知识 1.1vue 的官网 https://cn.vuejs.org/ 1.2概念 渐进式的JavaScript框架????渐进式... 自底向上,逐渐增强.vue.js它本身就是一个 ...
- VUE 3——3:脚手架构建工具介绍及在创建 Vue 3 项目中的应用
这是针对 Vue 新人的一个简单指导. 在前面的文章中,我们不推荐新手直接使用 vue-cli,(尤其是在还不熟悉基于 node.js 的构建工具时),而是通过直接引用的方式: <script ...
- 从头搭建VUE环境,使用IDEA 2021创建VUE项目
一.安装和配置node.js 1.1 下载安装node.js Nodejs的官方网站下载地址:Download | Node.js Node.js会同步安装npm,安装完成后,启动cmd测试下是否安装 ...
- web前端开发网络课程,HTML常用的五种标签,重难点整理
前言 最近在准备面试,然后复习下之前写过的项目,书籍,笔记,文章.一看很多知识点都没有印象,最可拍的是连自己为了防止忘记写的文章竟然都感觉不是自己写的.有些开始怀疑人生了. 好了,废话少说,离金三银四 ...
- 联想粒子矿云/我家云OMV(Open Media Vault) 刷Armbian后如何安装Docker,换软件源并提速?通电两三分钟就掉盘,硬改解决办法
联想粒子矿云/我家云OMV(Open Media Vault) , 线刷图文教程 粒子云,硬盘扔到了黑群上,盒子没解绑,就只能刷机折腾. 我的粒子云盒子是SS1版本,枪灰色,按着W大的教程刷了OMV0 ...
- mysql error nr.2003_[MySQL]在安装windows版MySQL时遇到过如下问题Error Nr.1045和Error.Nr.2003,相应解决办法如下...
1.准备mysql server-5.0.27.exe 2.按照指导安装,在安装到最后一步时遇到如下两个错误: 2.1.出现错误Error Nr.1045 解决办法: a).停止MySQL服务:我的电 ...
- Mac安装软件报“打不开。。。,因为它来自身份不明的开发者”的解决办法
问题描述 在Mac上安装git,双击pkg进行安装,报如下图错误: 解决办法 不要双击pkg文件,改成选中文件之后,鼠标右键,选择"打开方式->安装器(默认)",即可继续安装 ...
- 安装SQL Server出现在创建窗口句柄之前,不能在控件上调用 Invoke 或 BeginInvoke的错误解决办法...
以下是错误报告: 标题: SQL Server 安装程序失败. ------------------------------ SQL Server 安装程序遇到以下错误: 在创建窗口句柄之前,不能在控 ...
最新文章
- GT Transceiver的复位与初始化(4)RX初始化和复位流程
- Linux系统的启动流程以及做个小小的Linux
- oracle的split函数
- boost::fusion::nil用法的测试程序
- NSTimer 进阶使用总结与注意事项
- python中写入csv文件的方法_Python写入CSV文件的方法
- 07 - java 方法里面的 return
- 接口与抽象类的区别和联系
- c语言找到串口,再次熟悉串口
- Java多线程编程(3)--线程安全性
- 朋友圈如何测试(思维导图)
- Prophet模型预测商品销售量
- 相见恨晚的英语学习方法!百万人读过!
- oracle最新版本18c的介绍,Oracle Database 18c已经发布及新特性介绍
- 超详细的Android APP 集成 PayPal 境外支付 信用卡 借记卡 支付,支付宝 微信海外 境外支付
- 3款移动应用数据统计分析平台对比
- 华为云EI的诗与远方
- jsp2022326税务税收协同办公系统
- 寒武纪行歌 - 智能驾驶大算力芯片入局者
- sdnu1385.Problem A: XOR(连续异或规律)
热门文章
- (floyd)佛洛伊德算法
- 一台电脑能运行两个mysql数据库_在一台机子上,安装,运行两mysql数据库实例...
- 人脸识别之人脸对齐(四)--CLM算法及概率图模型改进
- 一文读懂AUTOSAR CAN网络管理
- 【PCL】warning LNK4099: 未找到 PDB“.pdb”正在链接对象,如同没有调试信息一样
- Python-类与类之间的关系
- phrases practice_LEVEL UP | 看完这篇,帮你摆脱用英文讲电话的恐惧
- 盛世昊通:造车新势力产销增长,汽车行业更上一层楼
- 石油大--2020年秋季组队训练赛第十三场---- F、Historical Maths(二分)
- 【百度松果菁英班】码蹄集题库4