Vue脚手架安装(全网最详细)

目录

1、环境准备

1.1 安装node

1.1.2 判断你是否安装成功

1.1.3 在命令提示符中查看node版本

1.2 安装webpack

1.3 安装vue-cli3.x以上

2、创建工程

2.1 创建

2.2 选择

2.2.1 选择自定义设置:

2.2.2 选择Vue版本:

2.2.3 是否使用历史模式选择路由:

2.2.4 选择CSS扩展语言:

2.2.5 选择ESLint:

2.2.6 在什么时候格式化:

2.2.7 配置文件单独存还是存一起:

2.2.8 需不需要保存预设:

2.2.8.1 给预设起名:

2.2.9 测试是否创建工程成功:

 3、打开工程并配置

工程中的文件介绍:

配置package.json:

使用终端启动:

配置vue.config.js:

结束语:


1、环境准备

1.1 安装node

node.js

  •  node提供了javascript的运行环境
  • 它可以让javascript运行在服务端的开发平台 

从官网直接下载安装即可,自带npm包管理工具。地址:Node.js

点击左边被红框圈住的,直接下载。 

打开下载后的node文件,安装非常简单一路next就行,我相信各位大佬都会安装

1.1.2 判断你是否安装成功

搜索命令提示符,并且以管理员身份运行

1.1.3 在命令提示符中查看node版本

输入node -v命令查看node版本,如果有版本号就说明安装成功。

1.2 安装webpack

webpack

  • 用于现代 JavaScript 应用程序的静态模块打包工具
  • 下图中,左边那一大堆通过webpack打包为右边那一小堆

 安装webpack命令:

安装webpack 全局安装 在开发环境中
npm install webpack -D -g

1.3 安装vue-cli3.x以上

脚手架3.0以上的和2.0的代码已经完全是不一样了,现在脚手架2.0的都已经被抛弃了

 安装vue-cli命令: 

安装vue-cli
npm install @vue/cli@4.5.17 -g 

2、创建工程

2.1 创建

选择一个空文件夹后创建,最好是放D盘里面

创建命令: 

创建工程
vue create 工程名

输入命令后会出现创建界面

可以通过上下键切换,回车下一步

 选项解释:

2.2 选择

2.2.1 选择自定义设置:

上下切换,空格选择,回车下一步

我们选择的都会配置到我们的工程里面,它会把选择到的全配好。

2.2.2 选择Vue版本:

选择vue2版本

2.2.3 是否使用历史模式选择路由:

我们使用历史模式,填y

2.2.4 选择CSS扩展语言:

选择Less扩展语言

2.2.5 选择ESLint:

选择第一个

2.2.6 在什么时候格式化:

选择第一个,在保存的时候格式化

2.2.7 配置文件单独存还是存一起:

 选择第一项,单独存放

2.2.8 需不需要保存预设:

需要就填y,不需要就填n,填y可以在下次创建时直接选择这次的预设,我就填y了

2.2.8.1 给预设起名:

如果需要保存预设了,就要给它起个名后再创建工程,如果不需要就直接开始创建工程了。

2.2.9 测试是否创建工程成功:

选择到刚才创建的地址,然后输入一下命令:

先输入
set NODE_OPTIONS=--openssl-legacy-provider
后输入,启动
npm run serve

按着Ctrl+左键点击local后的地址,如果能打开就证明成功了。

 成功页面:

 3、打开工程并配置

使用Visual Studio Code打开刚创建的工程

工程中的文件介绍:

配置package.json:

配置package.json,可以少些一步命令执行,选择下图文件

 将script对象的每个属性前面加一个set NODE_OPTIONS=--openssl-legacy-provider &&

"scripts": {"serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve","build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build","lint": "vue-cli-service lint"},

使用终端启动:

先新建个终端

 在终端中,定位到当前地址,输入运行命令,如果想让它暂停ctrl+c就会暂停了

配置vue.config.js:

工程中此文件是没有,需要在工程的根路径下自行创建,注意好创建的路径。

要和这些配置文件同级

 内容:

module.exports = {configureWebpack:{devServer:{port:8090, // 端口open:true, // 自动打开浏览器}}
}

结束语:

 后面在发的博客也都是在vue脚手架上作了,大家先提前安装好脚手架。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/81048.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Lio-sam代码分析(1)-基本框架说明

Lio-sam代码分析(1)-基本框架说明 概述LIO-SAM整体框架imageProjecion图像映射节点FeatureExtraction 特征提取mapOptmization 图优化节点imuPreintergration IMU预积分 概述 LIO-SAM是Tixiao又一次的升级,主要是加入了IMU进行了紧耦合(而gps和loop可有…

解密长短时记忆网络(LSTM):从理论到PyTorch实战演示

目录 1. LSTM的背景人工神经网络的进化循环神经网络(RNN)的局限性LSTM的提出背景 2. LSTM的基础理论2.1 LSTM的数学原理遗忘门(Forget Gate)输入门(Input Gate)记忆单元(Cell State)…

基于微信小程序的物流管理系统3txar

在此基础上,结合现有物流管理体系的特点,运用新技术,构建了以 springboot为基础的物流信息化管理体系。首先,以需求为依据,对目前传统物流管理基础业务进行了较为详尽的了解和分析。根据需求分析结果进行了系统的设计&…

19万字智慧城市总体规划与设计方案WORD

导读:原文《19万字智慧城市总体规划与设计方案WORD》(获取来源见文尾),本文精选其中精华及架构部分,逻辑清晰、内容完整,为快速形成售前方案提供参考。 感知基础设施 感知基础设施架构由感知范围、感知手…

Centos7 安装Docker 详细多图版

配置要求 Docker CE(社区免费版) 支持 64 位版本 CentOS 7,并且要求内核版本不低于 3.10, CentOS 7 满足最低内核的要求,所以我们在CentOS 7安装Docker。 一、Centos安装Docker 1.1 卸载(可选&#xff0…

springboot+docker实现微服务的小例子

【任务】: 创建一个服务A:service_hello 创建一个服务B:service_name service_name负责提供一个api接口返回一个name字符串。 service_hello负责从这个接口获取name字符串,然后进行一个字符串拼接,在后面加一个hello&…

Linux - 借助 inotifywait,轻松实现 Linux 文件/目录事件监听

文章目录 inotify-tools 依赖包使用示例 inotify-tools 依赖包 [rootVM-24-3-centos ~]# yum install inotify-tools Loaded plugins: fastestmirror, langpacks Repository epel is listed more than once in the configuration Determining fastest mirrors ...... ...... ..…

市面上那里有稳定L2股票行情数据接口?

随着市场的发展和技术的进步,level2股票行情数据接口已经成为股票交易软件的标准配置之一。虽然这些券商软件的功能在很大程度上相似,但它们仍然有自己的特点和优势。 例如:通过股票交易所以其专业的研究报告和丰富的信息服务而受到广泛关注&…

uniapp - 全平台兼容实现上传图片带进度条功能,用户上传图像到服务器时显示上传进度条效果功能(一键复制源码,开箱即用)

效果图 uniapp小程序/h5网页/app实现上传图片并监听上传进度,显示进度条完整功能示例代码 一键复制,改下样式即可。 全部代码 记得改下样式,或直接

实验篇——家族成员染色体位置分析

实验篇——家族成员染色体位置分析 文章目录 前言一、名词解释二、实操1. 获取存储基因ID的文件2. 获取基因密度文件3. 获取染色体文件4. 执行 总结 前言 在基因家族分析中,通过观察基因家族成员在染色体上的位置。可以判断在染色体上是否成簇分布。 一、名词解释 …

【Python原创毕设|课设】基于Python Flask的上海美食信息与可视化宣传网站项目-文末附下载方式以及往届优秀论文,原创项目其他均为抄袭

基于Python Flask的上海美食信息与可视化宣传网站(获取方式访问文末官网) 一、项目简介二、开发环境三、项目技术四、功能结构五、运行截图六、功能实现七、数据库设计八、源码获取 一、项目简介 随着大数据和人工智能技术的迅速发展,我们设…

stm32之5.长按按键(使用时钟源)调整跑马灯速度

------------------------------ 源码 #include <stm32f4xx.h> #include "led.h" #include "delay.h" #include "my_str.h" #include "beep.h" #include "key.h" int main(void) { key_init(); Led_init();…