安装Node(脚手架)

目录

  • 一,安装node(脚手架)
    • 1.1, 配置vue.config.js
    • 1.2, vue-cli3x的目录介绍
    • 1.3, package.json
  • 最后

一,安装node(脚手架)

从官网直接下载安装即可,自带npm包管理工具。https://nodejs.org/en

在这里插入图片描述
安装之后在终端里查看查看node版本

node -V

在这里插入图片描述
安装webpack

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

安装vue-cli3.x以上

安装vue-cli
npm install @vue/cli@4.5.17 -g
创建工程
vue create 工程名

注意
要先在盘服中创建好文件夹,然后访问
在这里插入图片描述
创建好之后创建工程名字然后选择最后一个,最后一个是自定义项目
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我就不选择Y了,我选的是N

创建项目成功之后
在这里插入图片描述

1.1, 配置vue.config.js

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

初始化的内容如下:

module.exports = {configureWebpack:{devServer:{port:8090, // 端口open:true, // 自动打开浏览器// Mock数据before(app){}}}
}

1.2, vue-cli3x的目录介绍

vue.config.js里大概包括了配置 常用的输出路径名、跟目录、预处理、devServer配置、pwa、dll、第 三方插件等等
因为绝大部分的配置和扩展尤大大已经做好了封装的了,我们常用的开发基本可以满足,不满足的 我们自己可以自行去扩展
webpack的配置在这个属性里修改configureWebpack(Mock也是在这里面的)

在这里插入图片描述

1.3, package.json

找到这个文件package.json修改一些配置不然运行不成功
在这里插入图片描述
修改成这样
在这里插入图片描述

然后新建终端
在这里插入图片描述
然后输入:npm run serve
在这里插入图片描述
成功之后打开是这个页面
在这里插入图片描述

最后

送大家一句话:现在站在什么地方不重要,重要的是往什么方向移动!!!

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

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

相关文章

内网安全:WMI协议与SMB协议横向移动

目录 网络拓扑图 网络环境说明 WMI协议 SMB协议 域内信息收集 WMI协议 - 横向移动 利用方式一:wmic命令 利用方式一:cscript 利用方式一:impacket SMB协议 - 横向移动 利用方式一:psexec 利用方式二:psexe…

Java在线OJ项目(三)、前后端交互API模块

Java在线OJ项目(三)、前后端交互API模块 1. 客户端向服务器请求所有题目 或者 单个题目前端获取所有题目获取一个题目 后端 2. 后端读取前端提交的代码,进行编译运行,返回结果前端提交代码后端处理 1. 客户端向服务器请求所有题目…

[bug日志]springboot多模块启动,在yml配置启动端口8081,但还是启动了8080

【问题描述】 配置的启动端口是8081,实际启动端口是8080 【解决方法】 1.检查application.yml的配置是否有错误(配置项中,显示白色就错,橙色无措) 2.检查pom.xml的打包方式配置项配置,主pom.xml中的配置项一般为:&l…

简述docker映射(Mapping)和挂载(Mounting)

映射的概念: 将容器内的端口映射到主机的端口上,这样就可以通过主机的网络接口与容器内部进行通信。主机上对应端口的请求会被转发到容器内部,从而实现对容器内部程序的通信访问(注意!这里提到的容器内部的端口并不一定…

UE学习记录03----UE5.2 使用拖拽生成模型

0.创建蓝图控件,自己想要展示的样子 1.侦测鼠标拖动 2.创建拖动操作 3.拖动结束时生成模型 3.1创建actor , 创建变量EntityMesh设为可编辑 生成Actor,创建变量EntityMesh设为可编辑 屏幕鼠标位置转化为3D场景位置 4.将texture设置为变量并设为可编辑&am…

【1267. 统计参与通信的服务器】

来源:力扣(LeetCode) 描述: 这里有一幅服务器分布图,服务器的位置标识在 m * n 的整数矩阵网格 grid 中,1 表示单元格上有服务器,0 表示没有。 如果两台服务器位于同一行或者同一列&#xff…

kali linux查看局域网下所有IP,并对指定IP攻击

kali linux查看局域网下所有IP,并对指定IP实施局域网内攻击 首先我们打开我们熟悉的kali linux操作系统,利用指令: ifconfig来确认本机的ip地址 确认了本机的ip地址之后,利用一下的指令查看局域网下所有ip: fping -g 本机IP地址…

Visual Studio 2022离线源码编译onnxruntime

1. 首先参考前述文章《Visual Studio 2019源码编译cpu版本onnxruntime_xunan003的博客-CSDN博客》第1~3步,将anaconda python3.8虚拟环境copy至内网离线环境envs中。 并将下载的onnxruntime包迁移至内网固定位置; 2.查看onnxruntime/cmake/external所依…

第一讲使用IDEA创建Java工程——HelloWorld

一、前言导读 为了能够让初学者更快上手Java,不会像其他书籍或者视频一样,介绍一大堆历史背景,默认大家已经知道Java这么编程语言了。本专栏只会讲解干货,直接从HelloWord入手,慢慢由浅入深,讲个各个知识点,这些知识点也是目前工作中项目使用的,而不是讲一些老的知识点…

wangeditor 富文本的使用

版本 4.7.8基本实现展示&#xff1a; 官网地址 https://www.wangeditor.com/ 1.封装好组件 <template><div ref"editorEl" class"editor-wrapper"></div> </template><script> import E from "wangeditor"; imp…

如何更好地使用 ArkUI 的 Image 组件?

如何使用好 ArkUI 的 Image 组件&#xff1f; 开发者经常需要在应用中显示一些图片&#xff0c;例如&#xff1a;按钮中的logo、网络图片、本地图片等。在应用中显示图片需要使用 Image 组件实现&#xff0c;Image支持多种图片格式&#xff0c;包括png、jpg、bmp、svg和gif&am…

SVN 项目管理笔记

SVN 项目管理笔记 主要是介绍 SVN 管理项目的常用操作&#xff0c;方便以后查阅&#xff01;&#xff01;&#xff01; 一、本地项目提交到SVN流程 在SVN仓库下创建和项目名同样的文件夹目录&#xff1b;选中本地项目文件&#xff0c;选择SVN->checkout,第一个是远程仓库项…