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

windows安装vue

1、下载nodejs安装包
https://nodejs.cn/download/

2、安装node
中途记得可以自己改安装路径,其他都是下一步

3、安装完成后检查
node -v :查看nodejs的版本
npm -v :查看npm的版本
在这里插入图片描述
4、修改npm默认安装目录与缓存日志目录的位置
在nodejs目录下新建两个文件夹node_global和node_cache
在这里插入图片描述
创建完毕后,输入以下命令修改npm默认安装目录与缓存日志目录的位置

npm config set prefix xxxx/node_global
npm config set cache xxxx/node_cache

修改后查看下:

npm config get prefix
npm config get cache

在这里插入图片描述
配置系统环境变量:
首先在系统变量新建(不是在用户变量新建)
填写变量名和变量值(你的Node.js安装路径),填写完成后点击确定
在这里插入图片描述
接着双击点开系统变量的Path
在这里插入图片描述
将【%NODE_HOME%】和【%NODE_HOME%\global】 添加进去,点击新建并输入进去,添加完成后点击确定。

%NODE_HOME%
%NODE_HOME%\global

在这里插入图片描述
接着双击点开用户变量的Path,删除掉自动配置的这行
在这里插入图片描述
将全局文件夹添加进去,完成后点击确定

xxx\nodejs\node_global

在这里插入图片描述

5、更改npm镜像源

npm config set registry https://registry.npmmirror.com

查看:npm config get registry
在这里插入图片描述
nodejs文件夹设置完全控制权限
在这里插入图片描述
在这里插入图片描述
下载测试
将express安装到全局文件夹里

-g:安装到全局文件夹

npm install express -g

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

npm list -g

在这里插入图片描述

安装vue:

npm install vue -g

在这里插入图片描述

安装@vue/cli,为了使用vue ui

npm install -g @vue/cli

最后就可以创建项目了:

npm init vue@latest

这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具,选项自行选择是否安装
在这里插入图片描述
可以通过 vue ui 命令来打开图形化界面创建和管理项目:

vue ui

Vite

Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目,语法格式如下:

npm init vite-app <project-name>

创建项目 runoob-vue3-test2:

npm init vite-app test2

创建 Vue 项目

打开终端或命令提示符,输入以下命令:

npm create vue@latest 

系统会提示输入项目名称,我这边输入 project_name:
同npm init vue@latest

在 VS Code 中打开 Vue 项目

从终端或命令提示符中进入我们创建的 Vue 项目文件夹 runoob-vue3-app,然后使用 code 命令让项目在 VS Code 中打开:

cd project_name
code .

VS Code 将启动并在文件资源管理器中显示你的 Vue 项目,显示如下:
在这里插入图片描述
vscode安装Vue - Official 插件
在这里插入图片描述
安装完成后,.vue 文件被识别为 Vue.js 文件类型,并支持以下语言特性:

  • 语法高亮
  • 括号匹配
  • 悬停描述
    在这里插入图片描述

智能提示 (IntelliSense)
在 App.vue 中输入代码时,你会看到 HTML、CSS 和 Vue.js 特有语法(如 v-bind、v-for)的智能提示。
在这里插入图片描述

在脚本部分,还可以看到 Vue.js 相关的 JavaScript 特性提示,比如 computed 属性。

跳转到定义、查看定义
通过安装的 Volar 扩展,VS Code 支持 Vue.js 语言服务。
放置光标在 App 上,右键选择 Peek Definition 查看定义信息,或者按下快捷键 ⌥F12。
你会看到一个弹出的窗口展示 App 的定义信息。

Vue3 项目打包

当你准备将应用发布到生产环境时,就需要打包 Vue 项目。

打包 Vue 项目使用以下命令:

npm run build

执行以上命令,输出结果如下:
在这里插入图片描述
执行完成后,会在 Vue 项目下会生成一个 dist 目录,该目录一般包含 index.html 文件及 static 目录,static 目录包含了静态文件 js、css 以及图片目录 images(如果有图片的话)。
如果直接双击打开 index.html,在浏览器中页面可能是空白了,要正常显示则需要修改下 index.html 文件中 js、css 文件路径。
绝对路径改为相对路径

我们可以在 vite.config.js 文件中设置自己的端口,比如以下设置端口后为 8001
在这里插入图片描述

相关文章:

  • 7.1.2 计算机网络的分类
  • hot100-动态规划
  • 【计算机网络入门】初学计算机网络(八)
  • LLMs之DeepSeek:DeepSeek-V3/R1推理系统的架构设计和性能统计的简介、细节分析之详细攻略
  • 30天开发操作系统 第25天 -- 增加命令行窗口
  • 网站搭建作业
  • 常用光模块收发光范围整理
  • matplotlib设置字体为宋体+times new roman
  • 【量化策略】动量突破策略
  • 基于Rook的Ceph云原生存储部署与实践指南(下)
  • 金融项目实战
  • 数学基础:06随机变量
  • CMake学习
  • 计算机毕设JAVA——某高校宿舍管理系统(基于SpringBoot+Vue前后端分离的项目)
  • 有关Java中的集合(1):List<T>和Set<T>
  • 本地部署 DeepSeek:从 Ollama 配置到 Spring Boot 集成
  • 第十章——数组
  • DeepSeek开源周Day6:DeepSeek V3、R1 推理系统深度解析,技术突破与行业启示
  • 基于微信小程序的疫情互助平台(源码+lw+部署文档+讲解),源码可白嫖!
  • [Lc优选算法] 双指针 | 移动零 | 复写零 | 快乐数
  • 网站设计的公司设计/关键词查网址
  • 赣州建网站/网站推广优化设计方案
  • 门户网站的建设公司/长沙专业竞价优化首选
  • 微信里的网站怎么做/seo推广经验
  • 专业网站建设哪家权威/外贸推广
  • 如何用word做网站/谷歌浏览器在线打开