windows安装vue

原创已于 2025-03-02 21:35:52 修改 · 769 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2025-03-02 16:27:55 首次发布

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 文件路径。
绝对路径改为相对路径