文章编号：129831 / 分类：行业资讯 / 更新时间：2025-01-28 04:22:38 / 浏览：次
下载Vuejs并进行开发环境的搭建过程分享
======================

一、引言
----

Vue.js 是一款流行的前端 JavaScript 框架，用于构建用户界面和单页面应用程序。
它具有简单易学、灵活轻量的特点，因此受到了广大开发者的喜爱。
本文将详细介绍如何下载 Vue.js 并搭建一个完整的开发环境，帮助初学者快速上手。

二、下载 Vue.js
--------

下载 Vue.js 的过程非常简单，可以通过以下步骤完成：

1. 访问 Vue.js 官网（），选择适合您项目的版本（Vue2 或 Vue 3）。
2. 在页面中找到“安装”部分，您会看到两种主要方式：通过 npm（Node Package Manager）或直接下载Vue.js 文件。对于大多数项目，推荐使用 npm 方式进行安装，因为它可以方便地管理依赖关系。
3. 如果您还没有安装 Node.js 和 npm，请先下载并安装它们。可以从 Node.js 官网（）下载适合您操作系统的版本。
4. 安装完 Node.js 和 npm 后，在命令行中运行以下命令来安装 Vue CLI（Vue 的命令行工具）：

```shell
npm install -g @vue/cli
```
这将会全局安装 Vue CLI，以便您可以在任何项目中使用它。

三、搭建开发环境
--------

搭建 Vue.js 开发环境需要安装一些必要的工具和插件，包括代码编辑器、npm 包管理器、Vue CLI 等。以下是详细的步骤：

1. 选择代码编辑器：您可以根据自己的喜好选择一个代码编辑器，如 Visual Studio Code、Sublime Text 或 Atom 等。这些编辑器都有丰富的插件和强大的功能，可以帮助您更高效地编写代码。
2. 安装 npm 包管理器：如前所述，确保您的系统中已经安装了 Node.js 和 npm。如果没有，请先安装它们。
3. 安装 Vue CLI：通过运行 `npm install -g @vue/cli` 命令来安装 Vue CLI。这将使您能够创建和管理 Vue 项目。
4. 创建新项目：使用 Vue CLI 创建新的 Vue 项目。在命令行中运行以下命令：

```shell
vue create my-project
```
这将创建一个名为 my-project 的新 Vue 项目。您可以根据需要选择配置选项。
5. 进入项目目录并启动开发服务器：使用命令行进入项目目录，然后运行以下命令启动开发服务器：

```shell
cd my-project
npm runserve
```
这将启动一个开发服务器，并在本地浏览器中打开应用程序。
6. 安装其他依赖项：根据您的项目需求，可能需要安装其他依赖项。可以使用 npm 来安装这些依赖项。例如，要安装 Vue Router（用于路由管理），可以运行以下命令：

```shell
npm install vue-router
```
四、配置开发环境（可选）
------------

为了更高效地开发 Vue 应用，您可以配置一些开发工具，如代码编辑器插件、调试工具等。以下是一些常用工具：

1. Visual Studio Code 插件：安装 Vue插件（例如 Vetur）以获取语法高亮、智能提示等功能。还可以安装其他相关插件，如 ESLint、Prettier 等。这些插件将帮助您更高效地编写代码并遵守编码规范。
2. 调试工具：Chrome 浏览器有一个强大的开发者工具，包括 VueDevtools 插件，可以帮助您调试 Vue 应用并监视组件状态。请确保已安装并启用此插件。其他浏览器也有类似的开发者工具可供使用。请根据您的偏好选择适合的工具。请注意，在使用 Vue Devtools 时，请确保您的项目已连接到开发服务器并已启动应用程序实例。否则，您将无法看到组件的状态和属性等信息。同时还需要注意插件的版本问题因为不同的版本可能存在差异请尽量保持插件版本与Vue版本相匹配避免出现问题影响开发效率和使用体验此外还有其他一些有用的工具和库可以根据需要进行安装和使用例如使用axios进行网络请求处理sass或less进行样式预编译等这些工具和库的使用都可以提高开发效率和代码质量但需要根据项目的具体需求进行选择和使用避免过度依赖和滥用导致代码复杂度和维护成本增加从而导致难以维护和debug在开发中除了工具和库的选用适当的外更重要的是熟悉和理解Vue的基本概念和原理通过理解和学习Vue的响应式原理组件化思想生命周期钩子等核心概念可以更好地掌握Vue框架并能够更好地设计和编写高效且易于维护的代码从而避免一些常见的错误和问题在开发和调试过程中除了使用工具进行调试外还需要学会阅读和理解错误信息和日志这对于定位和解决问题非常重要通过不断地学习和实践您将逐渐熟悉并掌握Vue框架的开发环境和工具的使用从而为更好地进行项目开发打下坚实的基础综上所述本文详细介绍了如何下载Vuejs并搭建开发环境的过程分享了相关工具和插件的使用方法和注意事项通过学习和实践读者可以逐步掌握Vue框架的开发环境和工具的使用从而更好地进行项目开发和学习希望本文能对初学者有所帮助为他们的学习和开发之路提供有益的参考和指导

---

vue环境配置(vue环境配置教程)

Mac系统配置Vue开发环境

首先安装nodejs

终端输入：brewinstallnodejs?或者直接官网手动安装。node-v查看nodejs版本

注：网上说使用终端安装会需要nodejs模块安装目录的权限，运行：sudochmod-R777/usr/local/lib/node_modules/

3、安装npm（淘宝镜像）

终端输入：npminstall-gcnpm--registry=

4、安装webpack

cnpminstallwebpack-g

5、安装vue脚手架（自动搭建vue项目框架的工具）

sudonpminstall-gvue-cli。 静待。

输入vue或者vuelist，可vue是否安装成功。

vue2/vue3环境搭建

检查是否安装成功

Vuebuild==打包方式，回车即可；

Installvue-router==是否要安装vue-router，项目中肯定要使用到所以Y回车；

UseESLinttolintyourcode==是否需要js语法检测目前我们不需要所以n回车；

Setupunittests==是否安装单元测试工具目前我们不需要所以n回车；

Setupe2etestswithNightwatch==是否需要端到端测试工具目前我们不需要所以n回车；

1、build：构建脚本目录

1）==生产环境构建脚本；

2）==检查npm，版本；

3）==构建相关工具方法；

4）==配置了css加载器以及编译css之后自动添加前缀；

5）==webpack基本配置；

6）==webpack开发环境配置；

7）==webpack生产环境配置；

2、config：项目配置

1）==开发环境变量；

2）==项目配置文件；

3）==生产环境变量；

3、node_modules：npm加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

2）components：组件目录，我们写的组件就放在这个目录里面；

3）router：前端路由，我们需要配置的路由路径写在里面；

4）：根组件；

5）：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、：首页入口文件，可以添加一些meta信息等

7、：npm包配置文件，定义了项目的npm脚本，依赖包等信息

8、：项目的说明文档，markdown格式

9、文件：这些是一些配置文件，包括语法配置，git配置等

1.解决vue不能自动打开浏览器的问题：当我们输入npmrundev，运行项目，命令行提示我们运行成功，但是浏览器也没有自动打开，只能自己手动输入。

改完之后重启一下即可。

2.为了避免端口冲突，也可以修改port，打开目录同上

更改成功：

1.如果你已经全局安装了旧版本的vue-cli(1或2)，你需要先通过

npmuninstallvue-cli-g或yarnglobalremovevue-cli卸载它(卸载脚手架)

2.全局安装npminstall-g@vue/cli或yarnglobaladd@vue/cli

3.全局安装了vue-cli3但是还想用vue-cli2,添加一个桥接工具命令：npminstall-g@vue/cli-init

4.可以进行创建项目了

vue-cli2:命令：vueinitwebpackmy_project

vue-cli3命令：vuecreatemy-project

3.版本不同安装方式也不同

vue-cli2:命令npminstall-gvue-cli

vue-cli3:命令npminstall-g@vue/cli

3.版本不同的创建项目方式不同

vue-cli2:命令：vueinitwebpackmy_project

vue-cli3命令：vuecreatemy-project

-cli2和vue-cli3安装完后的项目目录不一样

5.安装指定版本的vue

npminstall-g@vue/cli@3.12.1

vue-cli3.0项目目录结构

vue-cli2.0项目目录结构

vue-cli4.5.15的vue2项目目录

VUE配置proxy代理、开发环境、测试环境、生产环境

前端开发过程中，我们经常会碰到跨域的问题，下面我们来配置下，不同的环境下，统一的跨域问题解决。

2、开发环境

测试环境

生产环境

3、配置

4、axios配置baseURL

5、配置打包、启动（json不可以再备注，我是为了方便理解）

vuecli4.0配置环境变量

------------------正文开始------------------

开发项目时，经常会需要在不同环境中切换。那么我们如何配置不同的环境变量呢？

为了更加方便消化本文章，建议先看下官方文档：

环境变量和模式

看完官方的文档如果还没有明白，可以参考本文。

在vue-cli构建的项目中，默认有3种模式，如下图：

我个人的理解就是：

你执行npmrunserve时，对应的环境就是开发环境；

你执行npmrunbuild时，对应的环境就是生产环境。

如果你开发的项目中，不止该3种，该咋整呢？像在我开发的项目中，就有本地环境(local)、开发环境(development)、测试环境(devtest)、预发布环境(beta)、生产环境(production)。 请记住我括号里面的英文。

来，左边跟我一起画个龙，在你右边儿画一道彩虹画完了，开始进入主题了

------------------进入主题------------------

如官方文档所说，通过为文件增加后缀来设置某个模式下特有的环境变量。 我这里有5个环境，所以配置了5个文件。 如下图：

基本格式如下：

preNODE_ENV=环境名称

VUE_APP_URL=对应的环境地址/pre

如我本地环境的配置就如下图所示：

我本地是用的easy-mock模拟的数据，所以配置的地址是mock接口地址。

如官方文档所说，可以通过传递--mode来配置不同的模式。我自己的项目配置如下图：

请注意我配置文件中的serve与build。

文件已创建好，配置语句也已写好。怎么用它呢？

首页你需要哪个环境，就执行哪个环境的命令语句。

比如我现在需要local环境，就执行npmrunlocal-serve。如下图所示：

然后通过_ENV获取环境名；通过_APP_URL获取环境对应的url。

比如我们在axios请求中，就可以把它的baseURL设置为_APP_URL，如下图所示：

后面的/web是根据我自己接口来的，你别也写个/web。

如果你不确定你自己现在是在哪个环境变量下，可以(当前环境变量：+_ENV)和(当前环境路径：+_APP_URL)看下。

像我的项目中就是下面这2个东东：

输出的内容就是文件里面配置的环境变量。

为了更好的理解，我们再执行一条语句，npmrunserve,看看此时的环境变量是哪个？

为什么呢？

因为npmrunserve默认指向，我在里面配置的环境就是上面输出的内容。的配置如下图：

总而言之就是，你需要哪个环境变量，就【npmrun对应的环境变量】就完事了！

快速搭建VUE项目

搭建Vue项目的快速指南首先，安装。 您可以在其官方网站/en/找到下载链接。 完成下载并安装后，进行版本号检查。 下一步，安装Vue CLI。 访问vue-cli/zh/GUIde/进行操作指引。 确保Vue CLI正确安装，可通过查看文档进行确认。 创建您的Vue项目。 在命令行输入vue create xx（请自定义项目名称，注意不要以大写字母开头），选择默认模板并回车。 等待项目创建完成。 项目创建成功后，您会看到一系列文件被生成。 请确保运行npm i以安装所有依赖。 最后，通过执行npm run serve启动项目。 当您看到下图所示的界面，恭喜您！Vue项目的搭建已成功完成。 在接下来的步骤中，您可以根据项目需求进行开发。

vue开发步骤

安装开发环境在Vue项目开发的初期，首先需要确保环境已安装完成。 可以访问官网下载并安装最新版本。 安装完成后，通过命令行验证是否成功安装，输入`node -v`，若显示版本号则说明安装成功。 全局安装Vue CLI脚手架Vue CLI（Command Line Interface）是一个用于创建、开发和管理项目的工具。 通过`npm`或`yarn`，全局安装Vue CLI脚手架。 在命令行中输入`npm install -g @vue/cli`，成功安装后，可以通过`vue`命令进行Vue项目的操作。 初始化项目工程使用Vue CLI脚手架运行`vue init`命令，根据提示选择项目模板，输入项目名、安装路径、是否创建组件等配置信息。 完成初始化后，会在指定路径下生成一个基本的Vue项目结构。 进行代码开发进入项目目录，开始编写组件、事件等Vue代码。 利用Vue的特性，如单文件组件、模板语法和数据绑定，实现页面的动态渲染和交互。 同时，开启Webpack热部署功能，可实时查看代码修改效果，加速开发流程。 打包开发代码完成开发后，使用`npm run build`命令，将项目打包成生产环境可用的静态文件。 打包过程会优化代码，压缩文件，生成适用于线上部署的版本。 部署代码上线打包后的静态文件可以上传至服务器或CDN，通过配置域名和反向代理，实现项目的线上发布。 根据服务器环境的不同，可能需要进行额外的配置，如SSL证书、域名绑定等。

相关标签： 下载Vuejs并进行开发环境的搭建过程分享、 下载vue教程、

本文地址：http://www.hyyidc.com/article/129831.html

上一篇：Vuejs版本选择与下载开发者必备知识vuejs怎...
下一篇：Vue框架下载经验分享常见问题及解决方法VUE...