第二节 windows下vue开发环境的搭建

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

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

vue常用开发工具

  1. vscode
  2. webstorm (本教程使用开发工具)
  3. 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)连同它的依赖一起打包生成包含这些模块的静态资源。现有的模块打包器不适合大项目(大单页面应用)程序。代码分割和静态资源无缝模块化的迫切需求,催生了一个新的模块打包器。 我试图扩展现有的模块打包器,但是它没能实现所有的目标。

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

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                                // 说明文档
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值