当前位置: 首页 > news >正文

使用CLI脚手架搭建Vue2项目

一、配置前端的环境

1、下载安装Node.js

网址:Node.js 中文网 (nodejs.com.cn)

参考:【简明图文教程】Node.js的下载、安装、环境配置及测试_node下载安装-CSDN博客

推荐安装路径C盘改为D盘

2、配置nodejs及环境变量【安装的时候勾选Add to PATH就不用配置】

npm全局模块的安装路径以及缓存cache的路径。

(1)nodejs下新建两个文件夹【node_global】和【node_cache】

(2)打开cmd,建议管理员身份(路径是刚刚新建的路径)

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

(3)配置环境变量

①打开窗口:依次执行【此电脑】-->【右键】-->【属性】-->【高级系统设置】-->【高级】-->【环境变量】,打开环境变量设置窗口

②系统变量点新建

输入变量名和变量值
变量名:NODE_PATH
变量值:D:\ProgramFiles\nodejs\node_global\node_modules

③检查

打开文件夹【node_global】,查看是否有多出了一个【node_modules】文件夹

注:如果 文件夹【node_global】里没有出现 【node_modules】文件夹,则在【node_global】下手动创建一个【node_modules】文件夹,再复制你创建的【node_modules】文件夹的路径地址到变量值。

④选中系统变量Path,点击编辑,追加

D:\Program Files\nodejs\

%NODE PATH%

3、检查node和npm是否安装成功

二、安装Vue CLI

1、命令行安装Vue CLI

npm install -g @vue/cli

如下,执行成功(管理员身份运行)

2、成功结果

三、创建新项目

提示:需要使用管理员身份,否在报错,如下图

1、命令行新建项目

win键cmd选择使用管理员身份打开,F:或者其他目标盘,cd跳转到目标文件中,输入命令行

vue create your-project-name

需要选择是否需要下载可以点Y

提示选择preset, 选择Vue2即可

提示选择,npm即可

示意图如下:

2、用VS Code管理员身份打开项目,运行

npm run serve

运行成功标志:

你可以在浏览器中访问 http://localhost:8080 来预览你的应用。

按住ctrl点击连接也可以打开浏览器

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • python-鼠标绘画线条程序
  • 跟《经济学人》学英文:2024年07月27日这期 AI firms will soon exhaust most of the internet’s data
  • 【Docker】Dockerfile 文件编写
  • 基于SpringBoot+Vue的校车调度管理系统(带1w+文档)
  • CF 训练2
  • 记录使用FlinkSql进行实时工作流开发
  • 如何强化学习神经网络
  • 进程状态(一)---- 运行,阻塞,挂起
  • ESP8266+STM32+阿里云保姆级教程(AT指令+MQTT)
  • HBuilder在uni-admin实现unicloud-map中poi管理
  • linux 虚拟机解压arm-linux-gcc-4.6.4-arm-x86_64.tar.bz2并arm-linux-gcc
  • openEuler使用mariadb
  • C# 组合CancellationTokenSource的使用
  • 搭建日志系统ELK(二)
  • arkhamintelligence 请求头加密 X-Payload 完整逆向分析+自动化解决方案
  • 2018一半小结一波
  • const let
  • echarts花样作死的坑
  • 表单中readonly的input等标签,禁止光标进入(focus)的几种方式
  • 利用阿里云 OSS 搭建私有 Docker 仓库
  • 聊聊directory traversal attack
  • 问:在指定的JSON数据中(最外层是数组)根据指定条件拿到匹配到的结果
  • 用Python写一份独特的元宵节祝福
  • 中文输入法与React文本输入框的问题与解决方案
  • ​Java并发新构件之Exchanger
  • ​LeetCode解法汇总518. 零钱兑换 II
  • ​一帧图像的Android之旅 :应用的首个绘制请求
  • # Redis 入门到精通(七)-- redis 删除策略
  • #我与Java虚拟机的故事#连载10: 如何在阿里、腾讯、百度、及字节跳动等公司面试中脱颖而出...
  • #我与虚拟机的故事#连载20:周志明虚拟机第 3 版:到底值不值得买?
  • (ibm)Java 语言的 XPath API
  • (MIT博士)林达华老师-概率模型与计算机视觉”
  • (MTK)java文件添加简单接口并配置相应的SELinux avc 权限笔记2
  • (ZT)薛涌:谈贫说富
  • (八)Flask之app.route装饰器函数的参数
  • (补充):java各种进制、原码、反码、补码和文本、图像、音频在计算机中的存储方式
  • (七)Flink Watermark
  • (十八)SpringBoot之发送QQ邮件
  • (十三)MipMap
  • (十五)使用Nexus创建Maven私服
  • (已解决)什么是vue导航守卫
  • (转)Sublime Text3配置Lua运行环境
  • (轉貼) UML中文FAQ (OO) (UML)
  • .describe() python_Python-Win32com-Excel
  • .JPG图片,各种压缩率下的文件尺寸
  • .net 调用php,php 调用.net com组件 --
  • .NET使用HttpClient以multipart/form-data形式post上传文件及其相关参数
  • .Net中的设计模式——Factory Method模式
  • @modelattribute注解用postman测试怎么传参_接口测试之问题挖掘
  • [].slice.call()将类数组转化为真正的数组
  • [023-2].第2节:SpringBoot中接收参数相关注解
  • [7] CUDA之常量内存与纹理内存
  • [BZOJ 1040] 骑士
  • [CDOJ 1343] 卿学姐失恋了
  • [c语言]小课堂 day2