热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue在windows的环境配置

前言:最近因为在筹备一个官网的创建,遂前段选择vue+elemen的方式搭建项目。所以需要搭建vue环境,在搭建的时候遇到很多坑,可能是教程老的原因,老是出错,遂出此教程。过程:1

前言:

  最近因为在筹备一个官网的创建,遂前段选择vue+elemen的方式搭建项目。所以需要搭建vue环境,在搭建的时候遇到很多坑,可能是教程老的原因,老是出错,遂出此教程。

过程:

  1:安装node.js(https://nodejs.org/en/)

地址:https://nodejs.org/en/ 下载安装

技术分享图片

 测试是否安装成功:nodejs里面会安装npm指令,显示版本号安装成功。

技术分享图片

   2:配置nodejs prefix(全局)和cache(缓存)路径

先找到nodejs的安装目录(默认C:\Program Files\nodejs)

在nodejs安装路径下,新建node_global和node_cache两个文件夹

技术分享图片

命令进行修改设置

npm config set cache "C:\Program Files\nodejs\node_cache"
npm config set prefix "C:\Program Files\nodejs\node_global"

  3:设置环境变量

新增:NODE_PATH 指向我们创建的node_global文件夹

技术分享图片

PATH下面加入:C:\Program Files\nodejs\node_global(指向node_global 别忘记修改成自己的目录)

  4:安装webpack,打开命令行工具输入:npm install webpack -g

  5:安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g

 这两步要是失败就是环境变量没有配置好

  6:检查   vue-V为大写

  技术分享图片

创建一个vue项目

  1. 在硬盘上找一个文件夹放工程用的: cd 目录路径
  2. 安装vue脚手架输入:vue init webpack exprice ,注意这里的“exprice” 是项目的名称可以说是随便的起名,但是需要主要的是“不能用中文”。

$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev
如下图:


技术分享图片
  1. cd 命令进入创建的工程目录,首先cd exprice(这里是自己建工程的名字);
  2. 安装项目依赖:npm install,因为自动构建过程中已存在package.json文件,所以这里直接安装依赖就行。
  3. 启动项目:npm run dev 
  4. 访问 localhost:8080即可

Vue在windows的环境配置


推荐阅读
  • 基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架,实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线,并确保消息的实时性和可靠性,适用于需要即时通信的应用场景。 ... [详细]
  • 本文深入探讨了 Vue.js 中异步组件的应用与优化策略。首先,文章介绍了异步组件的基本概念及其在现代前端开发中的重要性。为了确保最佳实践,建议使用 Webpack 作为模块打包工具,因为 Browserify 默认不支持异步组件的加载。接着,详细解释了异步组件的使用方法,并提供了官方文档的相关链接以供参考。此外,文章还讨论了多种优化技巧,包括代码分割、懒加载和性能调优,以提升应用的整体性能和用户体验。 ... [详细]
  • 深入解析Wget CVE-2016-4971漏洞的利用方法与安全防范措施
    ### 摘要Wget 是一个广泛使用的命令行工具,用于从 Web 服务器下载文件。CVE-2016-4971 漏洞涉及 Wget 在处理特定 HTTP 响应头时的缺陷,可能导致远程代码执行。本文详细分析了该漏洞的成因、利用方法以及相应的安全防范措施,包括更新 Wget 版本、配置防火墙规则和使用安全的 HTTP 头。通过这些措施,可以有效防止潜在的安全威胁。 ... [详细]
  • 在《PHP应用性能优化实战指南:从理论到实践的全面解析》一文中,作者分享了一次实际的PHP应用优化经验。文章回顾了先前进行的一次优化项目,指出即使系统运行时间较长后出现的各种问题和性能瓶颈,通过采用一些通用的优化策略仍然能够有效解决。文中不仅详细阐述了优化的具体步骤和方法,还结合实例分析了优化前后的性能对比,为读者提供了宝贵的参考和借鉴。 ... [详细]
  • 作为140字符的开创者,Twitter看似简单却异常复杂。其简洁之处在于仅用140个字符就能实现信息的高效传播,甚至在多次全球性事件中超越传统媒体的速度。然而,为了支持2亿用户的高效使用,其背后的技术架构和系统设计则极为复杂,涉及高并发处理、数据存储和实时传输等多个技术挑战。 ... [详细]
  • 智能制造数据综合分析与应用解决方案
    在智能制造领域,生产数据通过先进的采集设备收集,并利用时序数据库或关系型数据库进行高效存储。这些数据经过处理后,通过可视化数据大屏呈现,为生产车间、生产控制中心以及管理层提供实时、精准的信息支持,助力不同应用场景下的决策优化和效率提升。 ... [详细]
  • Ceph API微服务实现RBD块设备的高效创建与安全删除
    本文旨在实现Ceph块存储中RBD块设备的高效创建与安全删除功能。开发环境为CentOS 7,使用 IntelliJ IDEA 进行开发。首先介绍了 librbd 的基本概念及其在 Ceph 中的作用,随后详细描述了项目 Gradle 配置的优化过程,确保了开发环境的稳定性和兼容性。通过这一系列步骤,我们成功实现了 RBD 块设备的快速创建与安全删除,提升了系统的整体性能和可靠性。 ... [详细]
  • 在《Vue开发实战:第九章》中,深入探讨了开发过程中常见的错误及其解决方案。本章节重点分析了npm版本兼容性问题,如依赖树无法解析(`npm ERR! code ERESOLVE`)等错误,提供了详细的排查步骤和解决策略,帮助开发者有效应对类似问题。此外,还介绍了如何通过配置npm和使用特定版本的包来避免兼容性冲突,确保项目顺利运行。 ... [详细]
  • MySQL性能优化与调参指南【数据库管理】
    本文详细探讨了MySQL数据库的性能优化与参数调整技巧,旨在帮助数据库管理员和开发人员提升系统的运行效率。内容涵盖索引优化、查询优化、配置参数调整等方面,结合实际案例进行深入分析,提供实用的操作建议。此外,还介绍了常见的性能监控工具和方法,助力读者全面掌握MySQL性能优化的核心技能。 ... [详细]
  • 如何在Django和Vue中配置共享全局变量以实现跨组件数据传递
    在Django和Vue项目中,为了实现跨组件的数据传递,可以通过配置共享全局变量来达到目的。具体做法是在Django项目的主目录下创建一个专门用于存储全局变量的Python文件。例如,可以在该文件中定义一个函数 `templates_global`,该函数返回需要在多个组件间共享的数据。此外,还可以利用Vue的Vuex状态管理库来进一步增强数据的管理和传递效率,确保数据的一致性和可维护性。 ... [详细]
  • 根据 Laravel 官方文档,视图文件在首次加载时会被编译成普通的 PHP 代码并存储在缓存中。当视图文件发生更改时,系统会自动检测到这些变化并重新编译和缓存新的版本,以确保用户始终看到最新的内容。这一机制显著提高了应用的性能和响应速度。 ... [详细]
  • 浏览器中 W3School JavaScript 的 Location 对象详解
    Location对象是浏览器Window对象的一部分,通过`window.location`属性可访问。它包含了当前页面URL的相关信息,如协议、主机名、路径和查询参数等,对于页面导航和URL操作非常有用。 ... [详细]
  • 优化后的标题:利用Chrome扩展程序解锁百度网盘的大文件直下与第三方下载工具兼容性
    文章探讨了如何通过使用Chrome扩展程序来增强百度网盘的功能,特别是针对大文件的直接下载和与第三方下载工具的兼容性问题。这一方法不仅提高了下载效率,还为用户提供了更多的灵活性和便利性,解决了百度网盘在使用过程中的一些限制。 ... [详细]
  • IIS 7及7.5版本中应用程序池的最佳配置策略与实践
    在IIS 7及7.5版本中,优化应用程序池的配置是提升Web站点性能的关键步骤。具体操作包括:首先定位到目标Web站点的应用程序池,然后通过“应用程序池”菜单找到对应的池,右键选择“高级设置”。在一般优化方案中,建议调整以下几个关键参数:1. **基本设置**: - **队列长度**:默认值为1000,可根据实际需求调整队列长度,以提高处理请求的能力。此外,还可以进一步优化其他参数,如处理器使用限制、回收策略等,以确保应用程序池的高效运行。这些优化措施有助于提升系统的稳定性和响应速度。 ... [详细]
  • 在iOS平台上,应用的流畅操作体验一直备受赞誉。然而,过去开发者往往将更多精力集中在功能实现上,而对性能优化的关注相对较少。本文深入探讨了iOS应用性能优化的关键要点与实践方法,旨在帮助开发者提升应用的响应速度、降低功耗,并改善整体用户体验。通过具体案例分析和技术解析,文章提供了实用的优化策略,包括代码层面的改进、资源管理优化以及界面渲染效率的提升等。 ... [详细]
author-avatar
亲爱的某某骗子
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有