当前位置: 首页 > news >正文

《Vue3实战》 第一章 nods/npm安装、配置

1、nods.js安装(Windows)

在这里插入图片描述

1.1、下载并安装node

https://nodejs.org/en/ , 安装到d盘nodejs目录

1.2、配置环境变量

在这里插入图片描述
path配置
在这里插入图片描述

1.3、配置全局包存放目录和缓存目录

在根目录下创建node_global(全局包存放目录)和node_cache(缓存目录)
命令设置全局包存放目录和缓存目录

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

检查安装是否成功:
在这里插入图片描述

1.4、安装cnpm

安装cnpm,国内镜像进行安装(管理员身份进入命令行)

1.4.1、配置淘宝镜像

npm config set registry https://registry.npm.taobao.org

验证:

npm config get registry

1.4.2、安装cnpm

验证:

npm install cnpm -g

2、vue安装

2.1、安装vue3

cnpm install vue@next

2.2、创建项目

cnpm install -g @vue/cli
cnpm install -g @vue/cli-init
vue init webpack vue3_example

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、Vue项目打包发布

3.1、开发者模式运行

cnpm run build

在这里插入图片描述

3.2、将编译结果发布到Nginx服务

3.2.1、下载并安装nginx

http://nginx.org/en/download.html
在这里插入图片描述

3.2.2、将文件解压到D盘,再将dist文件copy到NG的html目录下

在这里插入图片描述

3.2.3、启动nginx

在这里插入图片描述

3.2.4、访问页面

在这里插入图片描述

http://www.lryc.cn/news/59313.html

相关文章:

  • JAVA练习104-四数相加 II
  • 【C++基础】引用(引用的概念;引用的特性;常引用;使用场景:做输出型参数、大对象传参、做输出型返回值、返回大对象的引用);引用和指针的区别)
  • Redis只用来做缓存?来认识一下它其他强大的能力吧。
  • 【ES】数据同步集群
  • 37岁男子不愿熬夜,回乡养鸡每天准时下班,青山绿水中养鸡,直播间里卖鸡蛋...
  • 深度学习和人工智能之间是什么样的关系?
  • 实战打靶集锦-016-lampiao
  • 《Web前端应用开发》考试试卷(模拟题)
  • 【react全家桶学习】react简介
  • 此战成硕,我成功上岸西南交通大学了~~~
  • 光耦继电器工作原理及优点概述
  • 【Mysql】mysql8.0.26解压包部署方式
  • 进销存管理系统能为企业带来哪些实际效益?
  • 图片怎么转换成pdf格式?这几个方法帮你一键转换
  • 数据结构exp1_2学生成绩排序
  • 在DongshanPI-D1开箱使用分享与折腾记录实现MPU6050数据读取
  • Nature子刊 定制饮食去除半胱氨酸和蛋氨酸可诱导细胞自毁进而治疗脑瘤?
  • 抛弃 TCP 和 QUIC 的 HTTP
  • 未来公寓智能化设计平台项目(下)
  • 常见分布式消息队列综合对比
  • 怎么邀请主流媒体到现场报道
  • 2023年最强手机远程控制横测:ToDesk、向日葵、Airdroid三款APP免Root版本
  • 用SQL语句操作oracle数据库--数据查询(上篇)
  • 模板学堂|DataEase图表样式解析
  • STM32看门狗
  • 什么是划分子网?网络工程师划分子网有啥技巧?
  • 制作两栏布局的 6+5 种方法:从相当合理到完全错误
  • nvidia-smi 各种命令
  • 实验6 TensorFlow基础
  • Python爬虫基础之如何对爬取到的数据进行解析