前端｜VUE环境的搭建

最新推荐文章于 2025-10-14 13:42:43 发布

原创

最新推荐文章于 2025-10-14 13:42:43 发布 · 574 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #后端 #环境搭建

本文介绍了如何从零开始学习Vue前端框架，首先讲解了Node.js环境的搭建，包括下载、安装和验证过程，然后详细阐述了使用Vue CLI创建首个模板工程的步骤，包括工程初始化、配置和启动。通过本文，读者可以成功在本地搭建Vue开发环境并运行第一个Vue项目。

原创文章，转载请注明：转载自技术哥

微信订阅号：技术哥

技术哥

给你不一样的世界

前端学习从零起步 –Vue

“时下国内最火的三大前端框架有：Angular、React、Vue，其中Vue因其性能好、入门快、轻量化、可拓展性强、数据流双向绑定、灵活等特点，成为了许多前端开发者框架的首选。”

Vue-Bulma开发的图表UI界面转自github用户wangxg2016/vue-bulma

通过Vue开发的高仿知乎日报转自github用户 hilongjw/vue-zhihu-daily

今天我们就开始学习基于vue的前端框架

步骤：

1.搭建nodejs环境
2.搭建vue环境并新建第一个模板工程

以下教程以windows7 x64为例：

一、nodejs环境搭建：

官网首页这里我们就可以直接下载node安装包了，推荐选左边的8.11.1LTS稳定版本，因为右边的最新版可能会不是很稳定。
</

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Tdata技术哥

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue教程｜搭建vue项目｜Vue-CLI2.x 模板脚手架

baidu_21035953的博客

11-29

1689

通过实战方式，介绍基于Vue-CLI2.x 模板脚手架搭建vue2.x项目的完整构建过程，从环境搭建、脚手架搭建到脚手架构建项目，另外分享了工程结构各文件的具体用途，方便大家了解和掌握

前端vue环境搭建

waiting971118的博客

11-21

1308

前端vue环境搭建 nodejs 的下载（1）nodejs 最新版本的下载 nodejs 的下载地址（中文） nodejs的下载地址（英文） (2) nodejs旧版本的下载（3）下载完成后的安装包 nodejs 的安装（1）双击安装包之后（2）install之后静等一段时间，点击finish就可以了 nodejs 的配置（1）安装完成之后，，.msi格式的安装包已经将node启动程序添加到系统环境变量path中,查看系统变量验证。（此电脑右击 -> 属性 -> 高级系统

参与评论您还未登录，请先登录后发表或查看评论

前端VUE环境搭建

huox_111111的博客

11-16

1642

cnpm install --save vue-axios-plugin -g //-g:全局安装。cnpm install --save axios vue-axios -g //-g:全局安装。cnpm install axios-retry -g //-g:全局安装。下载网址：http://nodejs.cn/download/安装成功后，执行npm --version查看版本号即成功。官方网址：http://nodejs.cn/-- 在 vue.js 之后引入 -->2. 安装axios。

Vue 开发环境搭建全指南：从工具准备到项目启动

最新发布

qq_40303030的博客

10-14

1118

本文系统介绍了Vue开发环境搭建的全流程。首先强调基础工具链的重要性，包括Node.js安装、nvm版本管理、包管理器选择（推荐pnpm）。其次详细讲解VSCode编辑器配置，推荐安装Volar等必备插件并配置代码格式化。接着对比两种主流构建工具：基于Webpack的Vue CLI（适合稳定项目）和基于ESM的Vite（开发更快，官方推荐），分别介绍其安装方法和项目结构。最后给出选择建议：新项目优先Vite，老项目可沿用Vue CLI。环境搭建完成后，开发者即可专注于Vue语法和业务逻辑开发。

Vue环境搭建与配置

qq_40583795的博客

04-02

2218

注意：NVM安装前必须保证卸载干净Node.js(在控制面版或者应用列表中卸载nodejs)4.修改package.json文件中的脚本命令，以指定不同的构建模式。-D：安装在开发环境中；-S安装在生产环境下。文件来加载相应的环境变量文件（环境变量使用）3.在 Vite 项目中，修改。一个具有注脚的文本。

前端搭建vue项目

sake_pipi的博客

03-05

1013

1、打开node.js官网https://nodejs.org/en/下载当前版本node.js并安装到电脑中，安装方式为"无脑安装之下一步" 安装完成后检验是否安装node.js: win+r输入cmd打开dos窗口输入node -v回车之后会显示node.js版本号，证明电脑安装成功了！ npm集成在node.js中，在dos窗口输入npm -v回车之...

前端基础之vue环境搭建

ChengSir_1995的博客

11-05

294

目录1，vue搭建需要的软件和包2，流程2.1 安装node.js2.2 安装vue-cli3，安装vscode4，在vscode内安装vetur 1，vue搭建需要的软件和包 node.js、vue-cli、vscode、vetur 2，流程 2.1 安装node.js 在官网下载node.js，node官网然后安装在本地D盘or其他，注意：在你需要启项目的文件夹下输入cmd，使用node...

精选资源

前端开发Vue开发环境搭建全攻略：从0到1构建高效Vue项目开发体系

06-25

内容概要：本文详细介绍了Vue开发环境的搭建流程，阐述了Vue.js在前端开发领域的优势，包括简洁易学、虚拟DOM技术、组件化开发模式以及丰富的生态系统。文章详细讲解了搭建Vue开发环境的必要性和具体步骤，涵盖Node....

vue程序视频播放网站纯前端 vue源码带搭建教程

06-25

vue程序视频播放网站纯前端 vue源码带搭建教程有项目详细说明，以及启动流程技术栈: vue 编译器 idea/vscode

Mac快速搭建前端环境&创建前端项目【Vue】

weixin_45565886的博客

05-22

3873

Mac快速搭建前端环境&创建前端项目【Vue】

前端-vue环境搭建

weixin_42792607的博客

03-22

218

1.nodejs下载安装 http://nodejs.cn/download/ 2.set缓存路径、全局模块存放路径打开cmd或其他命令行工具 npm config set cache "nodejs安装路径/cache" npm config set prefix "nodejs安装路径" 若配置后输入npm命令提示如下语法错误：删除C:\Users\Administrator用户目录下.npmrc文件重新配置即可 3.设置环境变量目前安装nodejs后，安装程序会总动添加nodejs的环境

前端Vue环境搭建

weixin_48193914的博客

12-04

2508

从零开始搭建一个高效、稳定的前端开发环境。

vue前端环境搭建

2402_85461894的博客

01-10

359

3. 如果遇到权限问题，在Linux/Mac上使用sudo，Windows上使用管理员权限运行命令行。- 访问 [Node.js官网](https://nodejs.org/)- 选择项目配置（Babel、Router、Vuex、CSS预处理器等）- Vetur（Vue 2）或Volar（Vue 3）- 选择Vue版本（Vue 2或Vue 3）1. 建议使用nvm管理Node.js版本。- 下载并安装LTS（长期支持）版本。### 1. 安装Node.js。### 2. 安装Vue CLI。

前端vue项目环境搭建

qq_39873580的博客

09-06

707

由于公司业务，需要开发一个理财管理系统，包括理财系统需要配置的参数，供管理员使用的理财产品信息查询，客户评估试卷查询等需求。由于现有的公司前端框架用的extjs目前维护人员很少，所以打算重新搭一套前端的vue框架。所以下面的就是从无到有的记录搭框架的全过程，给自己留个底，好记性不如烂笔头。第一步，下载vscode 这个在360软件管家中就可以下载。第二步，vscode中下载中文插件第一步下载完成后，页面长这个样子之后下载中文插件安装完了之后，重启就是中文的了。第三步，下载.

VUE前端项目环境搭建

qq_38003956的博客

09-13

1190

vue前端项目环境搭建

VUE前端开发环境搭建

y519063548的博客

07-20

256

1.Node.js下载并安装 1.地址：https://nodejs.org/zh-cn/ 2.下载后直接正常选择目录安装 3.检查node js版本 node -v 4.检查NPM版本号 npm -v 5.切换淘宝NPM库 npm config set registry https://registry.npm.taobao.org 6.检查镜像配置是否生效 npm config list 7.安装VUE和客户端 npm install -g @vue/cli --force 等待安

vue环境搭建

weixin_68376171的博客

01-20

5742

我出现了这些错误，我不知道为什么我创建最新版不成功，好像什么版本不匹配，这个弄了我好久，难受。（1）打开刚才安装node.js的文件夹，在里面新建两个文件夹，分别为node_global和node_cache。根据自己的电脑版本和需求选择，这里我的电脑是Windows11,选择的是长期维护的稳定版本。（2）输入这两条命令完成npm的配置，引号里面的路径是你电脑里面的这两个文件路径。后面我改成具体的版本号，最新版是3.3.10，我试到3.3.4成功，好，出现这个页面适配了，可以直接跟着尚硅谷的老师学了。

微信公众号前端vue环境搭建

09-17

在搭建微信公众号前端vue环境之前，首先需要准备一个微信公众平台测试账号。这个测试账号可以通过个人微信扫描二维码登录来获得，不需要注册。接下来，我们可以按照以下步骤来搭建vue环境： 1. 确保你已经安装了Node.js和npm（Node包管理器）。 2. 打开命令行终端，进入你的项目文件夹。 3. 使用以下命令来初始化一个基于vue的项目： ``` npm init -y ``` 4. 接下来，安装vue-cli，它是一个vue脚手架工具，可以帮助我们快速搭建项目： ``` npm install -g @vue/cli ``` 5. 初始化一个新的vue项目： ``` vue create your-project-name ``` 其中，"your-project-name"是你项目的名称，可以自行替换。 6. 在初始化过程中，你可以选择一些项目配置选项，例如使用默认配置或手动选择特定的特性。根据你的需求进行选择。 7. 初始化完成后，进入到项目目录： ``` cd your-project-name ``` 8. 运行以下命令来启动项目： ``` npm run serve ``` 9. 现在，你的vue环境已经搭建完成。你可以根据项目需求进行开发，编写vue组件、路由、数据交互等等。请注意，以上步骤是搭建基于vue的微信公众号前端环境的一般方法。具体的配置和开发流程可能会根据你的实际应用场景而有所不同。因此，在进行微信公众号前端开发之前，建议你仔细阅读微信公众平台的开发文档，并根据文档中的指引进行配置和开发工作。