首页 前端知识 VUE开发环境搭建

VUE开发环境搭建

2024-04-23 21:04:35 前端知识 前端哥 485 528 我要收藏

简介

vue.js是一套构建用户界面的渐进式框架,Vue 采用自底向上增量 开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,是一个基于MVVM结构的轻量 级框架,非常容易与其它库或已有项目整合。安装vue需要借助npm指令集,所以一般会先安装node.js环境。

1.下载node.js环境()

打开node.js的官网下载地址:http://nodejs.cn/download/ 选择适合自己系统的安装包,本文以windows x64系统为例。选择64位安装

下载安装包后正常安装(我用的是朋友发给我的msi文件), 可以在安装过程中更换默认安装路径,最好安装在C盘以外的路径下,因为后期下载资源后会非常大.

我安装的版本node.js版本是12.22.12  ,npm版本是6.14.16

 2. 配置node.js和npm环境变量

安装好之后,对npm安装的全局模块所在路径以及缓存所在路径,进行环境配置。是因为以后在 执行类似: npm install express -g (后面的可选参数-g,g代表global全局安装的意思)的安装语 句时,会将安装的模块安装到 C:\Users\用户名\AppData\Roaming\npm 路径中,占C盘空间。 首先在node.js的安装路径中新建两个文件夹,分别作为缓存文件夹和全局安装文件夹。
  1. node_cache
     2. node_global 在cmd中输入以下指令,设置缓存和全局安装文件夹为上述新建文件夹。 请将 D:\Program Files\nodejs 替换为你自己的node.js的安装路径。
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

打开“环境变量”。
  1. 新建环境变量
        变量名:NODE_PATH         变量值:D:\Program Files\nodejs;D:\Program Files\nodejs\node_global\node_modules         

     2.path变量中新增

        %NODE_PATH%;D:\Program Files\nodejs\node_global      3.验证环境变量是否配置成功         我安装的版本node.js版本是12.22.12  ,npm版本是6.14.16         

       

3. 配置cnpm

由于网络原因,国内访问npm的速度很慢,可以通过设置国内淘宝镜像来访问npm。 打开cmd,执行以下指令。
npm install -g cnpm --registry=https://registry.npm.taobao.org
利用cnpm搭建express环境,打开cmd,执行以下指令。
cnpm install express -g

什么是express环境呢

Express是一个流行的Node.js Web框架,提供了一组方便的API和工具,可以用于开发Web应用程序。Express提供了中间件,路由和模板引擎等功能,使得开发Web应用程序更加简单和高效。

在Express环境中,开发者可以使用各种Node.js模块来构建Web应用程序。Express提供了一些内置中间件,包括静态文件服务,处理HTTP请求,解析请求体等。同时,也支持使用第三方中间件来扩展应用程序的功能。

Express环境通常包括一个或多个路由文件,定义了应用程序的不同端点,以及每个端点的行为。开发者可以在路由文件中定义路由,并将它们绑定到适当的处理程序函数上。

总之,Express环境为Node.js Web应用程序的开发提供了一个快速,灵活和高效的方式。

4. 使用vue-cli脚手架搭建vue开发环境

安装全局vue-cli脚手架,用于帮助搭建vue框架的模板项目。 打开cmd,执行以下指令。 cnpm
cnpm install vue-cli -g

5. 使用webpack打包工具,启动vue项目

创建一个工作空间用于保存项目,比如本文使用 D:\workspace\vs_workspace 打开cmd,通过cd指令进入该目录 输入下面指令,创建hellovue项目
vue init webpack hellovue
一路回车,除了vue-router选择yes,其余一律no

5*.补充第五步

补充:因为版本原因,以上第五步创建的项目并没有serve命令也就是 npm run serve   自行补充并下载非常消耗时间  所以 可以去除掉上边的init命令 使用下面的命令
vue create project1
如果你的vue脚手架版本偏低,就会提示以下

因为我是版本升级vue版本也提示了版本偏低

只要根据他的提示命令进行就好

 最后就会直接提醒你npm run serve

devvue cli2的默认执行命令,servevue cli3的默认执行命令,二者虽只有版本不同,但是在打包时还是有很大的区别,在执行是哪个命令时,记得先看一下package.json文件中的配置

6.根据提示访问

不要关闭cmd窗口 ,根据指令提示,访问网址:http://localhost:8080,可以看到vue的网页

 常用的安装命令:npm install vue-quill-editor --save

总结

Node.js是一种开源的JavaScript运行环境,它使得能够在服务器端使用JavaScript。npm(全称Node Package Manager)是随Node.js一起安装的默认包管理器,用于在Node.js项目中管理和安装依赖的软件包。

Express是一种基于Node.js平台的Web应用程序框架,它提供了一组丰富的特性和HTTP实用工具,可以帮助快速地创建API和Web应用程序。

Vue CLI是Vue.js官方提供的命令行界面工具,它能够帮助快速搭建Vue.js项目,提供了一些脚手架、插件和构建工具等,使得项目开发和维护变得更加简单。

在这些工具之间的关系中,Node.js和npm是基础,它们提供了构建和运行JavaScript应用程序所需的基本环境。Express是一个构建在Node.js之上的框架,它简化了Web应用程序的开发过程。Vue CLI是一个构建在Node.js和npm之上的工具,它简化了Vue.js项目的搭建和开发过程。因此,这些工具之间的关系是层层嵌套的,每个工具都依赖于底层的工具和环境。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5896.html
标签
评论
发布的文章

【Java】JSONArray详解

2024-04-30 12:04:14

Unity——LitJSON的安装

2024-04-30 12:04:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!