windows安装vue

发布于:2025-03-04 ⋅ 阅读:(14) ⋅ 点赞:(0)

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
在这里插入图片描述