Win11配置vue开发环境
安装前准备工作
必须安装有node
可以在命令提示符工具使用node -v和npm -v来确定是否安装成功
node -v
npm -v
如出现下图则表示安装成功
重点 打开node安装目录在安装目录下新建两个文件夹node_global和node_cache
Ⅲ 用管理员权限打开cmd命令窗口,输入
npm config set prefix “你的路径\node_global”
{这里你的路径是指你的node安装路径}
Ⅳ 输入
npm config set cache “你的路径\node_cache”
{这里你的路径是指你的node安装路径}
Ⅴ 设置环境变量 配置开发框架
①打开【系统属性】-【高级】-【环境变量】,点击系统变量中的新建变量名:NODE_PATH
变量值为:你的路径\node_global\node_modules 或者 你的路径 \node_modules
{这里你的路径是指你的node路径}
②编辑用户变量(环境变量进去上面那一栏)然后双击path 将默认的 C 盘下 APPData\Roaming\npm 修改成 你的路径\node_global 如果没有APPData\Roaming\npm 直接新建 你的路径\node_global
{这里你的路径是指你的node路径}
③在用户变量Path里面添加%NODE_PATH%
然后管理员权限打开cmd 运行
npm install -g @vue/cli
等出现类似于上图则表示vue脚手架安装成功
④ 管理员打开Windows PowerShell 运行Set-ExecutionPolicy Unrestricted -scop Localmachine 然后选择A(全是) 来是设置vue脚本权限
再设置环境变量
⑤ 在系统变量→Path里面添加C:\Program Files\nodejs\node_cache 根据你的路径而定
Ⅵ 创建vue项目
① 以管理员身份打开vscode 在你的项目下新建一个存放vue框架的文件夹我这里起名是vue你可以参考
然后代开它的终端输入cd vue(你新建的vue框架文件夹名称) 进入该文件夹
然后创建vue项目
vue create 你要创建的vue项目名
然后回车 等一会然后选择vue3或者vue2 现在大多数都是3
然后在选择npm (有则选没有则默认)
然后等待项目创建成功如下图 创建成功后vue里面会有很多东西哦 然后vscode会将怎样启动vue的代码给你
cd wkx //表示要进入你的vue项目下
npm run serve //表示启动该vue框架
npm run serve之后会启动vue服务 如果系统提示您什么请选是或者允许
然后你会得到vue的本机访问地址和网络访问地址 这里我们使用本机访问
复制粘贴在浏览器中 vue就搭建好啦
Ctrl + c 停止vue服务运行
Win11配置vue开发环境相关推荐
- webpack配置vue开发环境
首先,你要完成了下面几点: 配置css 配置js 配置图片文件 配置html-webpack-plugin(可选) 然后安装vue需要的包 npm install vue vue-loader vue ...
- python和vue结合开发前端,请手动配置Vue开发环境
vue怎么全局定义一个变量代替路径 . 原理:设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用exportdefault暴露出去,在里面使用Vue.prototype挂载到vue实例 ...
- Vue3安装配置、开发环境搭建(组件安装卸载)(图文详细)
Vue3安装配置.开发环境搭建(组件安装卸载)(图文详细) 本文目录: 一.vue的主要安装使用方式 二.node.js安装和配置 1.支持运行 Node.js的平台 2.Node.js 版本开发发布 ...
- laravel+vue开发环境搭建
From: https://www.jianshu.com/p/1c2cc11ba46f 描述 最近通过laravel在公司做了一些项目,但本身前端出身的我,总是感觉lphp开发过程中,前端写好页面, ...
- 初探webpack之从零搭建Vue开发环境
初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...
- 面试官:自己搭建过vue开发环境吗?
开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...
- 168.Vue.js智能扫码点餐系统(二)【搭建Vue开发环境】2019.03.18
0.知识点 搭建开发环境 1.搭建Vue开发环境 2.安装vue-cli脚手架 安装命令 // 第一种: npm install --global vue-cli// 第二种 cnpm install ...
- Vue 开发环境搭建(Mac 版)
Vue 开发环境搭建(Mac 版) 参考: https://www.jianshu.com/p/cc722eba1f46 https://www.runoob.com/w3cnote/vue2-sta ...
- vue开发环境修改本地启动的端口号和开启https
categories: [前端,vue] thumbnail: /images/fe/leetcode.jpg toc: true vue开发环境修改本地启动的端口号 当我们使用脚手架搭建项目时,re ...
最新文章
- 时序预测的必要条件是基于策略和环境相对稳定前提的
- facebook 分享,遇到的错误
- c++堆内存默认大小_C++|array new 和 array delete的堆内存细节
- AWS共享资源的警告
- list排序(Collections.sort())
- mstem函数怎么定义_小白该怎么学Java开发 Java编程重要点有哪些
- HTML5 Canvas中处理图像和视频
- WSL2支持GPU使用docker
- Object-C 语法 字符串 数组 字典 和常用函数 学习笔记
- 蓝桥杯真题:乘积尾零
- 速锐得整车CAN网络控制策略数据解析方案
- 没有百万调音师,用大数据+AI 也能让用户的声音更动听
- pRRophetic 通过基因表达水平预测临床化疗反应的R包
- Python+uiautomtor2实现app自动化测试
- MySQL对数据表进行分组查询(GROUP BY)
- 程序员必读书单1.0
- 自定义datastage阶段
- 华硕wl 700ge 路由器 刷OpenWrt 过程记录
- Iconfont 图标大全 样式和代码对齐
- [bzoj3711]Druzyny
热门文章
- 第五届北大青鸟杯全国IT精英挑战赛华中区一等奖项目——中商百货分销系统_关键代码说明书
- (3)3DMAX之坐标系统
- jenkins 忘记账号密码如何解决
- Spring5之maven依赖
- cad批量打印快捷键_[效率]CAD批量打印和批量合并PDF
- 买二手房不能大意 专家:收楼要注意五个要点
- git 服务器搭建 项目,git服务器搭建过程
- 2023年全国最新道路运输从业人员精选真题及答案26
- floor 函数 功能:返回小于或者等于指定表达式的最大整数
- 7.20在学生类student和教师类teacher 基础上再派生出一个助教类