第二节 windows下vue开发环境的搭建_vue windows 怎么看效果-优快云博客

本文详细介绍如何搭建Vue开发环境，包括安装Node.js、npm/cnpm、webpack、vue-cli等工具，以及使用2.0和3.0版本的vue-cli创建项目的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue常用开发工具

vscode
webstorm （本教程使用开发工具）
atom

开发环境搭建

一、安装Node.js环境（类似于java要安装jdk等运行环境一样）

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。
Node.js 的包管理器 npm，是全球最大的开源库生态系统。

Node.js下载地址：Node.js中文网下载地址
Node.js中文网地址
根据需要进行下载。

二、下载完成以后进行安装，直接双击运行安装即可

安装时根据需要更换安装目录
Node.js安装文件

三、检验Node.js是否安装成功

首先查看安装目录情况：
在这里插入图片描述
然后打开docs管理工具，输入node -v，看是否输出版本号：

四、安装包管理器npm / cnpm

如果大家做过java开发，就会知道在做java web开发时会引入许多依赖文件，如果自己一个一个去下载会很麻烦，所以我们一般都会使用maven进行管理，npm / cnpm的作用就类似于maven。

在安装Node.js的时候，会默认安装好了npm，通过docs管理工具查看：npm -v
在这里插入图片描述
同样类似于maven仓库，npm也有一个仓库，仓库同样需要翻墙从外网下载，从外网下载有时会速度太慢，还可能下载失败，所以国内就搭建了镜像网站，方便我们下载，所以需要安装镜像网站的命令 cnpm（和npm命令互通），执行以下命令进行安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

五、安装打包工具webpack

在这里插入图片描述 1、什么是webpack，为什么要使用它
webpack是一个模块打包器。WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。webpack把模块(s)连同它的依赖一起打包生成包含这些模块的静态资源。现有的模块打包器不适合大项目（大单页面应用）程序。代码分割和静态资源无缝模块化的迫切需求，催生了一个新的模块打包器。我试图扩展现有的模块打包器，但是它没能实现所有的目标。

把依赖树切分成块，实现按需加载。
保持低初始加载时间
每个静态资源都能是一个模块
具备把第三方库集成为模块的能力
具备打包器每个部分几乎都能自己定制的特点。
适合大型项目。

2、安装webpack

npm install webpack -g

在这里插入图片描述

六、安装全局 vue-cli 脚手架

类似于maven创建项目时的模板工具。

npm install --global vue-cli

安装完成以后通过命令查看是否安装成功：vue -V
在这里插入图片描述

七、新建一个工程，看环境是否配置成功

一、使用2.0创建项目的过程

1、查看 vue-cli 的版本
在这里插入图片描述
2、新建一个vue工作目录，并切换到工作目录下

3、新建helloworld项目

// helloworld是项目名称
vue init webpack helloworld

在命令行输入命令然后回车
在这里插入图片描述
然后等待安装成功即可。

4、安装完成以后，进入项目目录，使用命令 npm run dev 执行

启动成功。
在浏览器中输入：http://localhost:8080/ 即可看到效果。

├── README.md                       // 项目说明文档
├── node_modules                    // 项目依赖包文件夹
├── build                           // 编译配置文件，一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config                          // 项目基本设置文件夹
│   ├── dev.env.js                  // 开发配置文件
│   ├── index.js                    // 配置主文件
│   └── prod.env.js                 // 编译配置文件
├── index.html                      // 项目入口文件
├── package-lock.json               // npm5 新增文件，优化性能
├── package.json                    // 项目依赖包配置文件
├── src                             // 我们的项目的源码编写文件
│   ├── App.vue                    // APP入口文件
│   ├── assets                      // 初始项目资源目录，回头删掉
│   │   └── logo.png
│   ├── components                  // 组件目录
│   │   └── Hello.vue               // 测试组件，回头删除
│   ├── main.js                     // 主配置文件
│   └── router                      // 路由配置文件夹
│       └── index.js                // 路由配置文件
└── static                          // 资源放置目录
└── test                             // 我们的项目的单元测试文件

二、使用3.0创建项目的过程

1、首先升级脚手架

// 注意管理员权限
npm i -g @vue/cli

在这里插入图片描述

安装完成，查看版本号：vue -V

2、创建项目helloworld3

vue create helloworld3

在这里插入图片描述

默认安装就是安装 babel 和 eslint，一直往下enter即可。因为不需要那么多配置，这里选择手动安装。

选择要安装的配置（注意： Linter / Formatter 尽量不要选，会经常报格式不正确警告和报错，如果无所谓也可以安装）

在这里插入图片描述
注意：在docs命令行下，通过上下进行移动，通过space进行插件的选择/不选择

babel：一个javascript转译器，将最新版的js语法（es6、es7）转换为现阶段浏览器可以兼容的js代码

typescript：作用有些类似于babel，拥有类型检查能力和面向对象新特征。

PWA：渐进式WEB应用

Router：路由，设置url，使不同的url显示不同的页面

Vuex：作用类似于全局对象，但是并不完全相同。

CSS Pre-processors：css预处理器

Linter / Formatter：代码规范标准  // 注意：尽量不选

Unit Testing：单元测试

E2E Testing：e2e测试

在这里插入图片描述
选择css预处理方式：
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
这里说下 stylus ：来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，不过在使用人群上不如Sass和LESS。
在这里插入图片描述

保存配置，方便下次一键配置：

等待生成项目：

安装成功：

3、启动项目进行验证

效果图：

4、通过可视化UI进行创建，启用命令 vue ui

基本步骤同使用命令行步骤，不再过多叙述。

5、3.0整体目录机构（build 和 config）

├── public                      　　  　    // 项目公共文件夹
│   └── favicon.ico             　　 　     // 项目配置文件
│   └── index.html              　　  　    // 项目入口文件
├── src                        　　　　　    // 我们的项目的源码编写文件
│   ├── assets                  　　         // 基础样式存放目录
│   │   └── logo.png        　　　　　　　    // 基础图片文件
│   ├── components                          // 组件存放目录
│   │   └── HelloWorld.vue       　　　　    // helloworld组件
│   ├── views                               // view存放目录
│   │   ├── About.vue       　　　　　　　    //about 页面
│   │   └── Home.vue       　　　              //Home 页面
│   └── App.vue            　　　　　　　　   // App入口文件
│   └── main.js             　　　　　　　  　 // 主配置文件
│   └── router.js             　　　　　　 　　 // 路由配置文件
│   └── store.js             　　　　　　　 　 // Vuex store配置文件
├── tests                      　　  　      // 测试文件夹
│   ├── unit                  　　            // 单元测试
│   │   ├── .eslintrc       　　　　　　 　    // 基础图片文件
│   │   └── HelloWorld.spec.js        　　　
└── babel.config.js                           // babel 配置文件
└── package.json                             // 项目依赖包配置文件 
└── package-lock.json                        // npm5 新增文件，优化性能
└── postcss.config.js                        //  
└── README.md                                // 说明文档