首页 > 其他分享 >webstorm运行Vue项目环境配置(如何从0配置运行一个写好的vue项目)

webstorm运行Vue项目环境配置(如何从0配置运行一个写好的vue项目)

时间:2023-03-28 12:56:27浏览次数:48  
标签:node npm Vue cnpm webstorm 点击 vue 安装

 1.在Node官网上下载zip安装包。 网址:https://nodejs.org/dist/v16.14.0/ (需要哪个版本就把/v后的版本号改成哪个版本)

 

 2.下载完成后解压至需要的文件夹下。

 

 3.在此文件夹下新建两个文件夹:

node_cache:npm缓存路径

node_global:npm全局安装路径

 

4.配置环境变量

右击我的电脑 - 点击属性 - 点击高级系统设置 - 点击环境变量

 

 

在系统变量中新建变量。

 

变量名:NODE_HOME

变量值:node解压的文件夹地址

 

在系统变量的Path中新建两个变量

%NODE_HOME%

%NODE_HOME%\node_global

 

 确定-确定-确定

 

 

5.配置 npm 全局路径和缓存路径

 windows + R 打开命令行工具,输入cmd,点击确定打开。

 

 

 点击右侧的v,点击 Windows PowerShell,以管理员身份打开命令行工具。

 

 执行

npm config set cache "E:\node16.14\node-v16.14.0-win-x64\node_cache"

npm config set prefix "E:\node16.14\node-v16.14.0-win-x64\node_global"

 

6.验证是否安装成功

windows + R 打开命令行工具,输入cmd,点击确定打开。

 

 执行

node -v

npm -v

 

 出现版本即为安装成功。

 

7.cnpm安装

安装淘宝镜像(类似于阿里云的maven中央仓库镜像)

 执行

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

 执行 cnpm -v 验证是否安装成功。

 

8.webpack安装

执行

cnpm install webpack -g

 

9.全局安装vue-cli

执行

npm install --global vue-cli

 

 验证是否安装成功。执行

vue -V

注意“V”要大写!

 

10.项目配置

点击右上角框,点击 Edit Configurations

 

将Node interpreter修改为node包中的node.exe的地址。

将Package manager的地址修改为node包中node_modules包下npm的地址。

点击Apply应用后再点击ok。

 

11.安装依赖

删除原有的node_modules目录。
进入webstorm,在控制台,输入

npm install 或 cnpm install

 项目目录会自动生成node_modules目录

 

12.运行项目

 

 点击出现的访问地址进行访问。

 

 完成!

 

 

标签:node,npm,Vue,cnpm,webstorm,点击,vue,安装
From: https://www.cnblogs.com/lysboke/p/17264744.html

相关文章

  • vue3 中 pinia 的 state 修改模版绑定的 state 数据没更新?
    解决方案:给state增加 computedimport{useLayerStore}from"@/stores/";constlayer=useLayerStore();constlayerList=computed(()=>layer.layerList);......
  • 超全、超简单Vue微信公众号授权登录指南
    <template> <divid="app"> <h1>微信授权登陆</h1> <div> <div> <span>手机号</span>&nbsp;&nbsp; <inputtype="number":value="account"placeholder="......
  • vue2实现路由懒加载
    以下内容仅供学习使用安装@babel/plugin-syntax-dynamic-import插件。1.1使用npm安装:npminstall--save-dev@babel/plugin-syntax-dynamic-import1.2使用yarn安装......
  • Vue中watch和computed的区别和应用场景
    watch中的函数是不需要调用的,computed内部的函数调用的时候不需要加()。Watch是属性监听,监听属性的变化;computed是计算属性,通过属性计算而得来的属性。watch需要在数据变化......
  • VUE实现购物车界面
    以下是一个用Vue.js实现购物车的简单示例:在Vue组件中定义购物车数据:data(){return{cart:[],total:0}}在商品列表或详情页中添加“加入购物......
  • 记录优化vue项目首屏加载慢的过程
    一背景当项目部署在外网时,前端首屏加载的平均时间是10S,通过开发者工具查看加载的包,例如chunk-libs.xxx.js的有2.9MB,因为包太大导致加载慢,严重影响了用户体验。所以解决......
  • vue全家桶进阶之路8:Axios的安装与HTTP请求实战
    Axios是一个基于Promise的HTTP客户端,用于在浏览器和Node.js中发送HTTP请求。它可以使用在Vue中发送请求以及与后端API进行交互。在Vue中使用Axios可以通过以下步骤:安装A......
  • vue 导出方法blob文件流
    axios({method:'get',url,params,headers:{'Content-Type':'application/json;application/octet-stream'},......
  • vue2+element-ui+springboot+mybatis-plus获取当前账户进行修改密码详细教程
    以下内容仅供学习使用新建一个dto类,用于专门修改当前账户的使用importlombok.Data;@DatapublicclassUserPasswordDTO{privateStringusername;priva......
  • Vue 核心(二)
    目录Vue核心(二)八、绑定样式1、class2、style九、条件渲染1、渲染指令2、使用示例十、列表渲染1、基本语法2、key原理3、列表过滤4、列表排序5、数组更新检测6......