《Vue3实战》 第一章 node.js/npm安装、配置

简介: 《Vue3实战》 第一章 node.js/npm安装、配置

前言

介绍node.js、npm安装,以及运行第一个Vue项目。

1、node.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、访问页面

目录
相关文章
|
1月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
64 3
|
7天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
1月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
40 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
20天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
185 4
|
23天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
21 4
|
24天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
30 3
|
1月前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
244 0
|
2月前
|
JavaScript
NodeJs的安装
文章介绍了Node.js的安装步骤和如何创建第一个Node.js应用。包括从官网下载安装包、安装过程、验证安装是否成功,以及使用Node.js监听端口构建简单服务器的示例代码。
NodeJs的安装
|
2月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
2月前
|
JavaScript 前端开发
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
如何使用Vue和Element UI配合Node.js及multiparty模块实现图片上传并反显的功能,包括前端的Element UI组件配置和后端的Node.js服务端代码实现。
35 1
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo

推荐镜像

更多