Vue基础-搭建Vue运行环境

这篇具有很好参考价值的文章主要介绍了Vue基础-搭建Vue运行环境。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这篇文章介绍了在Vue.js项目中进行开发环境搭建的关键步骤。包括node.js安装和配置、安装Vue及Vue CLI工具、安装webpack模板、安装vue-router、创建Vue项目等步骤。这篇文章为读者提供了清晰的指南,帮助他们快速搭建Vue.js开发环境,为后续的项目开发奠定基础。

一、node.js 安装和配置

1、进入官网地址下载安装包

官方网站下载地址:Node.js (nodejs.org)

选择长期维护版本(LTS)下载。

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js


2、安装程序

a、一键安装

下载完成后,双击安装包,安装Node.js,一直点下一步,直到完成。

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

b、测试安装是否成功

控制台查看Node.js版本:

node -v     // 显示node.js版本
npm -v      // 显示npm版本

如果出现版本号则说明安装成功。

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

成功显示版本说明安装成功。


3、环境配置

a、配置安装目录和缓存目录

我们需要设置全局安装包的目录路径、设置 npm 包的缓存路径

安装目录下新建 “node_global”和 “node_cache” 文件夹

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

创建完毕后,使用管理员身份打开cmd命令窗口,输入:

npm config set prefix "C:\Program Files\nodejs\node_global" //设置全局安装包的目录路径
npm config set cache "C:\Program Files\nodejs\node_cache" //设置 npm 包的缓存路径

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

b、配置环境变量

首先我们检查刚刚的配置:

命令行输入:

npm config list

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

可以看到我们刚刚设置的配置:

cache=”C:\ProgramFiles\nodejs\node_cache”
prefix=”C:\ProgramFi1es\nodejs\node_g1oba1″
registry=”https://registry.npm.taobao.org”

复制prefix的值:C:\ProgramFi1es\nodejs\node_g1oba1

此电脑右键>属性>高级系统设置>环境变量,
将prefix的值复制到环境变量系统变量的Path。

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js


4、测试是否安装成功

配置完成后,全局安装一个最常用的 express 模块进行测试

npm install express -g   // -g代表全局安装

出现以下界面即为配置成功。

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js


5、安装淘宝镜像源

将npm的模块下载仓库从默认的国外站点改为国内的站点,这样下载模块的速度才能比较快,现在用的都是淘宝镜像源(https://registry.npm.taobao.org),使用淘宝镜像源方式:

npm安装淘宝镜像

npm config set registry https://registry.npm.taobao.org

查看是否成功:

npm config get registry

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js


二、安装 Vue 及 Vue CLI 工具

Vue CLI 是一个基于 Vue.js 的官方脚手架工具,用于创建和管理 Vue.js 项目。当执行 npm install @vue/cli 时,它会安装 Vue CLI 的最新版本,并且这个版本中包含了 Vue.js 的依赖。

Vue CLI 除了包含 Vue.js 本身,还提供了一套项目搭建和开发的工具,例如项目初始化、开发服务器、构建工具等。一旦安装完成,您可以使用 vue create 命令来创建新的 Vue.js 项目,并且可以通过 Vue CLI 提供的各种命令和配置来进行项目开发和管理。

简单来说,就是安装Vue CLI工具时包含Vue的安装,不需要单独安装Vue。

命令行输入:

npm install -g @vue/cli

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

 检验是否安装成功:

npm list vue -g  #全局查找安装的vue

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

全局搜索能搜索到Vue,就说明安装成功。


三、安装 Webpack 模板

Webpack 是一个模块打包工具,主要用于将各种前端资源(如JavaScript、CSS、图片等)打包成一个或多个静态文件,以便于浏览器加载。

使用 Webpack 的优势:

  • 模块化开发: Webpack 支持模块化开发,能够将项目拆分成小的模块,使代码更易维护和组织。
  • 资源打包: 可以将多个资源文件打包成一个或多个文件,减少网络请求次数,提高页面加载性能。
  • 代码分割: 支持将代码拆分成多个块,实现按需加载,优化应用的加载速度。
  • 自动化任务: Webpack 提供了强大的插件系统,可以自动执行各种任务,例如代码压缩、图片优化等。
  • 开发服务器: 提供了一个开发服务器,支持热模块替换(Hot Module Replacement),使开发过程更高效。
  • 预处理器支持: 可以集成各种预处理器(如Babel、Sass、Less等),使开发更灵活。

命令行安装webpack,输入:

npm install webpack -g

再安装webpack-cli,命令行输入:

npm install --global webpack-cli

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

接下来,我们配置环境变量,类似于上面的环境变量设置,我们依然是往系统变量的path里添加我们webpack的安装路径,我们先查看安装路径。

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

看到webpack的安装路径是:C:\Program Files\nodejs\node_global\node_modules

接着我们添加环境变量:

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

然后我们检查webpack是否安装成功,命令行输入:

webpack -v

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

如果有版本信息返回,则说明webpack已经安装成功。


四、安装 vue-router

vue-router 是 Vue.js 官方提供的用于在 Vue.js 单页面应用 (SPA) 中实现导航的插件。它允许您通过声明式的方式定义应用的路由,将不同的组件映射到应用的不同URL路径。vue-router 通过监听URL的变化,帮助开发者管理页面的导航、跳转和状态。

以下是 vue-router 的一些主要功能:

  • 声明式的路由配置: 使用 vue-router,您可以在 Vue 组件中声明式地定义路由,使得路由与组件之间的关系更加清晰。
  • 嵌套路由: 支持嵌套路由,允许您在组件内部定义自己的子路由,实现更复杂的页面结构。
  • 动态路由匹配: 支持通过参数匹配路由,使得在URL中的某一部分可以作为参数传递给组件。
  • 导航守卫: 提供了全局的导航守卫,可以在导航发生前、发生时、发生后触发相应的钩子函数,实现路由跳转前的拦截和控制。
  • 状态管理: 可以在路由中保存和管理应用的状态,使得不同路由之间可以共享数据。
  • 懒加载: 支持异步组件加载,可以将组件按需加载,提高应用的性能。

安装vue-router:

npm install -g vue-router

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

至此,我的node_modules目录如下:

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js


五、创建 Vue 项目

我们cd到合适的目录,创建一个测试的vue项目,这里我的测试项目叫 test_vue。

命令行创建项目:

vue init webpack test_vue

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

模板下载完成之后,系统提示需要我们去选择初始化配置:

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

等待几分钟,即可初始化完成。

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

cd到项目目录下,运行项目:

npm run dev

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

访问Localhost:8080,测试应用是否正常运行。

Vue基础-搭建Vue运行环境,前端,vue.js,前端,webpack,npm,node.js

运行成功,Vue项目搭建成功。文章来源地址https://www.toymoban.com/news/detail-783650.html

到了这里,关于Vue基础-搭建Vue运行环境的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 06 基于Vue+Vue-cli+webpack搭建渐进式高可维护性前端实战项目

         本文是专栏《 Vue + SpringBoot前后端分离项目实战 》的实战第一篇,将从Vue脚手架安装开始,逐步带你搭建起一套管理系统所需的架构。当然,在默认安装完成之后,会对文件目录进行初步的细化拆分,以便后续 功能迭代和维护 所用。 为兼顾大多数计算机毕设的需求,

    2024年02月16日
    浏览(47)
  • 探究Vue源码:mustache模板引擎(5) 对比rollup与webpack,在本地搭建webpack环境

    好 从本文开始 我们就来手写一下mustache这个库 他是模板引擎的一个祖先 将模板字符串编译成一个dom字符串 就是它的思想,这也是一个具有跨时代意义的思想 这里的话 我们还是搭一个 webpack 的项目环境 这里值得一提的是 mustache 他官方是通过rollup来进行打包的 很多第三方库

    2024年02月16日
    浏览(41)
  • 前端10年进化 Node.js、模块化、CommonJS、AMD、CMD、Webpack、Vue-cli、Electron-vue

    模块化的概念在软件开发领域已经存在很长时间,但在 JavaScript 中的模块化发展相对较晚。以下是对您提出的问题的回答: 提出时间:JavaScript 中的模块化概念相对较早地提出于 CommonJS 规范。CommonJS 是一种 JavaScript 模块化规范,最早在 2009 年由 Ryan Dahl 和其他社区成

    2024年02月11日
    浏览(79)
  • vue运行报错: webpack<5 used to include polyfills for node.js core modules by default.

    在使用vue3开发是安装使用web3等工具,运行报错 解决方案 1、安装 node-polyfill-webpack-plugin  2、vue.config.js中修改配置

    2024年02月01日
    浏览(52)
  • Vue前端环境搭建以及项目搭建

    安装node.js 安装node.js主要是为了安装npm工具,用于管理js包等,类似于java的maven。 去官网下载安装。 配置新的镜像源 安装webpack webpack是前端项目打包工具。 命令: 安装vue-cli 这是vue的开发工具。 安装文档地址:https://cli.vuejs.org/zh/guide/installation.html 命令: 查看vue-cli: vue-

    2024年01月23日
    浏览(69)
  • 关于vue运行报错:webpack < 5 used to include polyfills for node.js core modules by default.

    在使用vue3开发时安装使用web3等工具,运行报错 解决方案 1.安装 node-polyfill-webpack-plugin 2.vue.config.js中修改配置 再次运用,问题解决~ 原因是由于在webpack5中移除了nodejs核心模块的polyfill自动引入,所以需要手动引入,如果打包过程中有使用到nodejs核心模块,webpack会提示进行相

    2024年02月16日
    浏览(45)
  • 【Vue篇】mac上Vue 开发环境搭建、运行Vue项目(保姆级)

    首先,了解一下,Vue 的整体开发环境。 Homebrew :Mac 系统下的包管理器,类似于 Linux 下的 apt-get,Windows 的控制面板 - 安装删除程序 Node.js : JavaScript 运行环境(runtime),不同系统之间不能直接运行各种编程语言,Runtime类似于各国会议上的同声传译 npm : Nodejs 下的包管理器

    2024年02月05日
    浏览(41)
  • 前端项目部署自动检测更新后通知用户刷新页面(前端实现,技术框架vue、js、webpack)——方案一:编译项目时动态生成一个记录版本号的文件

    当我们重新部署前端项目的时候,如果用户一直停留在页面上并未刷新使用,会存在功能使用差异性的问题,因此,当前端部署项目后,需要提醒用户有去重新加载页面。 vue、js、webpack 编译项目时动态生成一个记录版本号的文件 轮询(20s、自己设定时间)这个文件,判断版

    2024年02月02日
    浏览(64)
  • 前端框架 vue-admin-template的搭建运行

    vue-element-admin是基于element-ui 的一套后台管理系统集成方案。 GitHub - PanJiaChen/vue-element-admin: :tada: A magical vue admin https://panjiachen.github.io/vue-element-admin 地址下载node.js  1.6版本 CNPM Binaries Mirror https://registry.npmmirror.com/binary.html?path=node/latest-v16.x/ 然后一路傻瓜式安装即可 1.下载包

    2024年02月10日
    浏览(33)
  • Vue路由与node.js环境搭建

    目录 前言 一.Vue路由 1.什么是spa 1.1简介 1.2 spa的特点 1.3 spa的优势以及未来的挑战 2.路由的使用 2.1 导入JS依赖 2.2 定义两个组件 2.3 定义组件与路径对应关系 2.4 通过路由关系获取路由对象 2.5 将对象挂载到vue实例中 2.6 定义触发路由事件的按钮  2.7 定义锚点和路由内容 

    2024年02月07日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包